O que é ReactJs? Como Funciona e Principais Aplicações

fala impressionador bem-vindo a mais um vídeo aqui da # programação e nesse vídeo eu vou falar com você sobre o react JS Ou react você já ouviu falar do react você sabe o que que é o react você sabe como o react tá conectado ao JavaScript tudo isso aí é o assunto do nosso vídeo de hoje que começa logo depois da vinheta Então bora [Música] lá então vamos lá pessoal Primeiro de tudo o react é uma biblioteca de ação de frontend o que que isso significa bom quando a gente fala de um sistema que roda

na internet a gente geralmente separa ele em duas partes o front end e o back end front end é a parte da frente do sistema que seria a parte com a qual o usuário interage que que é isso Olha eu tô falando de um sistema que roda na internet então um site por exemplo uma página ali de internet é o frontend de um sistema Ah pô o site eu vou entrar nele eu vou dar eu vou colocar login ali meu meu usuário minha senha vou entrar no site aí vou conseguir acessar ali o site vou

conseguir acessar os meus dados vou conseguir por exemplo num site de e-commerce fazer uma compra você entrou interagiu com o site por meio da página isso é o frontend E aí essa página por sua vez fez uma comunicação com a inteligência aí por trás que é o backend Inteligência é essa que pô el ficou que ah não pera aí esse login essa senha São desse cara de fato Ah tá beleza é o Daniel que tá tentando entrar então toma aqui ó Daniel pode entrar esse aqui foram as últimas compras dele aqui aqui nessa nossa plataforma

Beleza você entende como aqui tem um sistema único aqui atuando em partes diferentes né tem essa parte aqui da página e a página tem que responder as interações do usuário então quando eu clico no login ela tem que logar quando eu clico ali para digitar alguma coisa eu clico ali no campo e digito eu interajo ali com a página toda essa parte de interação aqui do usuário né toda essa parte aqui que é a página e a inteligência que permite a página ser do jeito que ela é é o que a gente chama de front

end e o react ele existe para facilitar isso e como é que ele facilita isso bom ele dá pra gente recursos para que a gente construa essa interface de uma forma facilitada Aliás não só isso mas vale aqui a a curiosidade você já vai entender o porquê o react foi criado pelo Facebook em 2013 com essa finalidade a de construir frontends páginas de internet de forma facilitada de forma mais simples do que se fazia até então beleza e aí a gente vai falar aqui um segundinho sobre componentes e a ideia de componentização que que é

isso bom botei aqui frontend feito em partes mas vamos lá a gente vai aqui para uma página você entrar por exemplo no Globo Esport se você entrar e qualquer outra página na verdade as páginas seguem esse padrão aqui você vai ver um cabeçalho ali na página né você vai ver ali uma parte Inicial ali da página no topo aí você vai ver aqui umas uns itens laterais aqui uns cards qualquer coisa assim algumas opções assim de outras matérias por exemplo para você clicar aqui no aqui do lado direito aqui uma sessão maior assim você vai

ver a matéria aqui embaixo você pode ver sei lá uns anúncios ou links para outros lugares do Globo Esport sacou bom isso aqui é uma página de internet eu peguei aqui o Globo Esport como um exemplo mas você tem uma página de internet isso aqui com várias partes assim todas essas partes compondo a página de internet e normalmente com HTML CSS e JavaScript puros O que que a gente faz a gente monta essa página inteira monta essa página inteira com HTML define uma interface V uma característica estética para essa página características estéticas para essa página

com CSS e adiciona inteligência usando JavaScript só que o react E na verdade a bibliotecas que componentizar esse frontend em partes componente Então é isso é uma parte do front end então ao invés de fazer a página inteira numa atacada só eu faço o cabeçalho eu faço o rodapé eu faço aqui um componente que vai representar um item lateral desse uma opção lateral beleza Ah uma opção para levar para uma outra matéria aí eu tenho várias outras matérias como por exemplo a a seleção ganhou o jogo contra o México no sábado de 3 a 2

beleza Isso aqui é uma matéria a outra matéria Ah o patrocinador abandonou o Corinthians Isso aqui é uma outra matéria beleza e os dois são matérias que eu poderia acessar eu poderia clicar aqui tanto num quanto o outro e aí eu vou pra matéria correspondente Beleza então você tá vendo aqui que eu tô pensando em cada elemento da página como um bloco separado e isso aqui é isso é a ideia de componente a ideia de componentização da página ao invés de fazer a página inteira numa tacada só num arquivo só eu faço os pedaços ali

da página e depois eu junto os pedaços numa página só beleza Tá bom e o que que isso traz de benefício essa ideia de componentização Ela traz a ideia bom Ela traz pra gente a capacidade de reutilizar esses blocos porque repara só É como eu te falei se eu tenho ali Ah um link que vai levar pra matéria do Corinthians e o patrocinador o outro link que vai levar pra matéria do jogo do Brasil contra o México o outro link que vai levar paraa apresentação do Thiago Silva São três matérias diferentes são três conteúdos diferentes

mas em termos de código em termos de estrutura ali de Página em termos de elemento que eu tô definindo essencialmente a mesma coisa eu tô definindo um elemento ali que quando for clicado vai me levar para um conteúdo espe específico todos os três fazem isso eles vão sei lá mostrar a imagem correspondente a cada uma das matérias vai ter uma diferenciação no conteúdo mas o que eles fazem ali na nossa página é a mesma coisa E aí repara Só se eu faço esse bloco aqui se eu programo esse bloco se eu defino esse bloco aqui

eu posso usar ele algumas vezes eu posso repetir ele eu posso reutilizar ele porque eu vou lá e eu programo um bloco ali que ah vai mostrar a imagem da matéria e quando eu clicar nesse bloco ele vai me levar pra matéria beleza aí eu posso utilizar esse bloco aqui que eu defini para mostrar a primeira matéria para mostrar a segunda matéria para mostrar a terceira matéria para mostrar a quarta matéria todas essas matérias podem ser exibidas utilizando esse mesmo bloco que eu programei porque esse bloco eu programei de forma genérica e ele faz Exatamente

isso mostra uma matéria pra qual na qual se o usuário clicar ele vai ser redirecionado pra ler ela completa beleza e isso aqui é muito bom isso aqui é muito importante porque tem muito a ver com como as pginas de internet são estruturadas eu dei aqui uns exemplos e-commerce redes sociais plataformas de notícia olha aqui mais uma vez no exemplo do Globo Esporte isso aqui é um print do Globo Esporte Olha só is aqui a gente tem uma matéria e aí você tem aqui o imagem da matéria título da matéria aí tem aqui uma sub

Manchete aqui aí você tem aqui imagem da matéria título da matéria aqui você tem imagem da matéria título da matéria estruturalmente é a mesma coisa tá vendo as páginas de internet Muitas delas e você vai reparar isso com muita facilidade elas são feitas a partir da repetição de uma mesma estrutura só com adaptando o conteúdo aqui por exemplo o conteúdo era o guarani que fecha com atacante aqui é como a seleção tá vivendo um problema de dupla cidadania beleza são matérias diferentes mas o conteúdo aqui o em termos de programação essa página aqui tem um

bloco aqui que tem uma imagem de uma matéria e o link para ela aqui tem uma imagem de uma matéria e o link para ela também aqui tem uma imagem de uma matéria e o link para ela também Você tá vendo que é a mesma coisa e eu só tive que programar essa mesma coisa uma só vez eu pego programo uma só vez e uso três vezes para três conteúdos diferentes sacou beleza isso é um exemplo de plataforma de notícia mas um e-commerce por exemplo uma plataforma de comércio online faz isso por exemplo quando ele

mostra para você a lista ali dos produtos ele tá sempre mostrando ali o produto e aí tá mostrando ali o botãozinho de opa adicionar o produto ao carrinho ou não pera adicionar aqui o produto ao ao carrinho só que numa cor diferente só que ele vai mostrar vários produtos aqui repetidos vários bloquinhos cada bloquinho com um produto em particular ora ele programou o bloquinho ali que deve representar um produto E aí na hora de exibir ele vai só adaptando para cada um dos produtos tá vendo ele tá repetindo esse mesmo bloquinho ali que representa um

produto na listagem de produtos se você entrar em qualquer plataforma de e-commerce você vai ver isso Beleza o exemplo mais gritante e o exemplo mais gritante e o exemplo mais gritante disso é o de redes sociais por quê Porque as redes sociais elas são estruturadas em cima disso na repetição da mesma estrutura dos mesmos blocos por por exemplo imagina que você entra aqui no Instagram nesse momento se você entra no Instagram você vai ver lá uma postagem E aí você vai ver ali Ah o que que você pode fazer com a postagem você pode dar

like você pode comentar você pode compartilhar Ah bom você tem ali uma sessão de comentários embaixo da postagem Ah não Beleza já vi essa postagem eu quero passar pra próxima você roda a página você desce a página adivinha tem uma nova postagem que é o quê também uma imagem também um botão de like também um botão de comentário também uma sessão de compartilhamento tamb também uma sessão de comentários ali daquela postagem estruturalmente é a mesma coisa só muda Qual é o conteúdo que tá sendo exibido entende é o mesmo bloco que tá sendo recibido postagem

embaixo de postagem beleza e isso é muito bom pro programador porque o programador só teve que programar aquele bloco uma só vez e aí repetir aquele bloco usar aquele bloco para cada uma das postagens que tem que ser exibidas ali na página beleza isso aqui é um detalhe muito importante esse lance da re usabilidade da capacidade de reutilizar aliás passagem é isso que eu te falei de você pegar um bloco aqui e repetir esse bloco e como ele funciona bem PR redes sociais faz todo sentido agora vem vamos lá o Facebook criou o react e

o Facebook criou react para facilitar a produção dos negócios deles e os negócios deles são redes sociais o Facebook o Instagram todos eles pertencem a mesma empresa não é verdade bom E aí entendido que isso aqui é muito bom a ideia de você poder definir um pedaço ali da página e você poder reutilizar esse pedaço onde você quiser ou quantas vezes você quiser a gente entra também num outro ponto e esse aqui é um ponto principal do react na verdade Olha só reatividade react significa reagir Beleza então reatividade é a principal lance do do react

o principal ideia o que ele traz assim de mais importante beleza por quê Porque se você já criou uma página com HTML CSS JavaScript normais o que que acontece normalmente você quando quer que uma coisa se atualize dinamicamente na página você tem que programar linha por linha do JavaScript responsável por fazer isso Beleza o JavaScript é que vai se encarregar de fazer aquela atualização Pô você JavaScript que vai definir toda a inteligência necessária para que um pedaço da página se atualize automaticamente de acordo com alguma lógica que faça sentido para você beleza no react isso

é muito facilitado e por que que isso aqui é muito facilitado porque a gente define variáveis variáveis especiais que a gente chama de estado a gente define variáveis que são condições de atualização basicamente o seguinte se eu tenho aquela variável e aquela variável ali o estado ele muda de valor ele automaticamente todo lugar da minha página em que esse valor estava sendo usado para reir alguma informação vai ser carregado vai ser atualizado com um novo valor O que que significa significa que o react reagi a mudança do valor dessa variável e isso é muito bom

isso é muito prático pra gente porque facilita esse processo de fazer páginas que não são estáticas não são sei lá uma folha impressa que você tá vendo ali na tela do seu computador né a folha impressa assim como se você tivesse imprimindo uma folha não aquela página tem vida e aquela página é dinâmica aquela página tem os conteúdos ali se modificando na medida em que aquilo faz sentido por quê Porque essa modificação ali de elementos da página é muito facilitada pelo o fato de que a página Vai automaticamente atualizar cada pedacinho dela de acordo com

as variáveis que são usadas nesses pedacinhos que tem esse valorzinho alterado beleza essa variável de estado ela permite isso aqui pra gente então o react ele é muito bom por causa disso porque ele facilita esse processo de de criação de páginas dinâmicas ele facilita o dinamismo ali das páginas simplesmente porque ele é capaz de reagir essas alterações de uns valores assim super importantes e aí se a gente usa esses valores super importantes aqui ao longo da página a gente consegue que a página se alter automaticamente beleza toda vez que esse cara tem um valor atualizado

então aí só para dar um exemplo pô imagina que você tem ali tá exibindo ali o horário né tá imagina que você tá exibindo o dia de hoje na sua página E aí passa da meia-noite o seu dia muda e aí essa variável aí ela é uma variável de estado ela vai ela mudou para representar um dia novo automaticamente a sua página vai atualizar sem você precisar fazer nada para mostrar o dia novo simplesmente porque você disse que esse dia que tá sendo exibido é o da variável de estado é o que tá guardado na

variável de Estado então react é capaz de reagir a essa mudança beleza e aí para encerrar um detalhe super importante aqui do react também uma coisa que a gente vai utilizar bastante é o tal do jsx o que que é o jsx primeiro de tudo jsx é o arquivo JavaScript beleza jsx começa com JS e não é para não é por menos é um arquivo de JavaScript mas é um arquivo de JavaScript que permite a escrita desses componentes desses pedaços de página de internet inteligente desses pedaços de front end de forma facilitada por quê Porque

você dentro do JavaScript Olha só isso aqui é uma função JavaScript Mas você pode escrever HTML dentro e aí você combina ali o HTML e o JavaScript E aí você consegue fazer a interface inteligente num lugar só beleza então se eu quisesse por exemplo definir um bloco daqueles ali de matéria do glob Sport que exibiu uma imagem e aí tinha um link que ali para você ser redirecionado pra matéria bom você conseguiria definir isso tudo aqui dentro você definiria uma imagem você logo em seguida definiria um título ali o título ali da matéria e aí

você daria a inteligência para que quando isso aí fosse clicado para que o usuário fosse direcionado então pra matéria Beleza o jsx é então isso aqui é essa tecnologia que permite a gente escrever HTML e JavaScript juntos e isso aqui vai a cara dos códigos de react que a gente vai escrever vai ser um código que vai devolver HTML JavaScript muitas vezes CSS também para fazer a estilização mas o CSS é o CSS normal que a gente usava mas o grande lance é isso aqui a gente poder escrever isso num lugar só Então aquela ideia

do componente do bloco de página a gente tá definindo um bloco inteligente Olha só um bloco que sabe como é que ele deve funcionar porque ele já tem tanto a parte da definição ali da página quanto a parte da Inteligência ali da página justamente porque eu tenho o HTML e o JavaScript juntos beleza gente então aí isso essa aqui é uma breve apresentação Zinha do react é só uma breve apresentação para você saber um pouco do que se trata saber que esse react é uma biblioteca do JavaScript que isso é uma funcionalidade que tá intimamente

relacionada com o JavaScript com o HTML com o CSS com a criação de frontend com a criação de páginas de internet e para que com isso a gente possa então fazer projetinhos de react aqui no nosso canal beleza é isso galera eu espero que você tenha gostado E aí faz o seguinte comenta aqui para para mim você já conhece o react Você já fez alguma coisa no react você já tem algum projetinho no react escreve para mim aqui nos comentários eu tô sempre lendo e aqui é sempre um negócio super interessante eu adoraria saber se

você já fez alguma coisa com isso ou não Daniel Tô Zerado em react nunca ouvi falar na verdade só ouvi esse nome aqui pô legal maneiro eu sei que é uma coisa que o mercado pede muito pô Tô animado para ver isso aí quero saber quero saber um pouco do seu nível também no react beleza é isso gente deixa um like se inscreve aqui no canal para você não perder vídeos como esse e vídeos os vários outros assuntos aqui do universo da programação que a gente traz toda semana aqui para vocês e eu vejo vocês

na semana que vem com um projetinho de react Então até lá