Primeiras aulas do curso React: Entendendo como a biblioteca funciona

React: Entendendo como a biblioteca funciona

Criando o projeto - Introdução

Tudo bom? Neste curso vamos começar a entender a biblioteca do react. Ela foi criada pelo Facebook para fazer renderização e layouts mais complexos dentro da web, e ele facilita nossa vida em vários pontos. Vamos começar a entender como ele funciona, o pensamento por trás dele, como a gente desenvolve aplicações. No final vamos ter essa aplicação de notas, o ceep.

Posso criar uma nova nota. Uma vez que dou o criar nota ele vai criar essa nova nota para mim. Vou ter um evento de formulário, a gente vai ver como o react trabalha com formulários e como a gente consegue transferir informações a partir de um evento de submit no formulário para outro componente do react.

Se a gente olhar no código, vamos ter nosso app. No final ele vai estar muito simples. A gente vai entender como essa ação de renderização funciona, para que ela serve, como a gente vai criar componentes baseados em classe do JavaScript, como vamos criar nossos propriedades métodos dentro dos componentes para atualizar o estado deles. Uma vez que o estado for atualizado a gente vai conseguir ver refletido na página e vamos criar nossos próprios componentes.

Vamos criar um formulário de cadastro e uma lista de notas. A partir desse formulário de cadastro a gente vai passar informações para a lista de notas usando o elemento pai como meio de passar informações. A gente vai usar o app para passar informações de um lado para o outro, e essas informações vão ser passadas através de propriedades.

A gente tem propriedades personalizadas que a gente vai criar durante o curso. A lista de notas é também um componente onde a gente tem um estado do JavaScript, o jsx, que é essa sintaxe toda estranha que lembra o html, mas não é o html. Vamos ver como trabalhar com o jsx. Inclusive a extensão do arquivo.

A gente tem ele passando uma lista, utilizando um método que recebe um array de notas, e para cada nota a gente vai renderizar um item dentro da lista com o outro componente, que é o card da note. Vamos navegar até o card e no final ele tem a renderização que lembra muito um html, mas é o jsx, não é o html. A gente pode usar elementos do JavaScript dentro do jsx para tirar informações e deixar mais dinâmico.

Inclusive, vamos ver como passamos props para o nosso componente e o estado, que são os dois atributos principais de qualquer componente do react. Além disso, vamos ver como funciona e algumas especificações de como o JavaScript funciona, porque a gente tem que fazer a associação de algum eventos com métodos de instância. A gente vai ver por que precisamos usar isso, como funciona e como vamos contornar os erros que aparecem durante o processo de desenvolvimento de uma aplicação do navegador usando react e JavaScript.

Vamos estudar o react.

Criando o projeto - Criando o projeto

E aí? Tudo bom? Vamos começar nosso curso de react. Vamos falar dessa biblioteca criada para visualização e criação de interfaces de usuário, muito famosa, de frontend. A primeira coisa que a gente precisa fazer é criar o projeto em react. Para fazer isso vamos usar um pacote do npm chamado create react app.

Se você já conhece, o npm é um gerenciador de pacotes do node, ele tem aberta a aba dele, npm node package manager, gerenciador de pacotes que vem com o node js, você já deve ter ouvido falar. Se já fez nossos cursos de JavaScript, introdução à linguagem, a gente usa o node como interpretador e até um pouco do npm, mas bem pouco até o momento.

A gente vai precisar desse create react app. A gente vai iniciar a aplicação executando esse comando, quero dar o npx create react act. Mas mesmo que você conheça o npm talvez você nunca tenha visto o npx. Qual a diferença? O npm é o gerenciador de pacotes, é o repositório onde a gente guarda e compartilha pacotes de JavaScript que a gente quer compartilhar entre vários projetos, desenvolvedores, e assim por diante.

O npx é o executador de pacotes. Ao invés de baixar o pacote e instalar globalmente na máquina, posso só falar que não quero instalar o pacote porque só vou usar ele uma vez, de vez em quando, e não quero que fique dentro da minha máquina. Nesse caso, vou usar o npx, que vai buscar o pacote no npm, no repositório, vai baixar as dependências que precisa e executar, depois ele limpa e fica só com o resultado final, que no nosso caso vai ser a pasta com o projeto inicial do react criado.

Mas se você não conhece, nunca ouviu falar, provavelmente você não tem o node instalado. Preciso instalar o node js, é um adendo que vem junto com o node js. A minha recomendação e a versão que a gente vai usar é a lts. A long term support. Uma versão mais estável do node, ao invés da versão corrente, que é a 14, a gente não vai usar ela porque é mais instável, está sendo desenvolvida, tem novas features, coisas interessantes, mas para o desenvolvimento do projeto vou usar a mais estável, que tem um suporte até final de 2021, começo de 2022, que é a 12.17.

Para instalar ela você pode instalar via o instalador do Windows, no meu caso, ou o binário, ou a maneira que você quiser instalar diretamente dos downloads do node, ou você pode instalar através do nvm. A gente tem o nove version manager, que é um outro pacote que a gente usa, que a gente instala no Windows, Linux, Mac, que vai gerenciar as versões do node que eu tenho, porque às vezes você está trabalhando em diferentes projetos e tem uma versão do node específica. Esse cara ajuda a instalar a versão específica que a gente quer.

Se você quiser instalar ele, você pode vir aqui embaixo, via wget ou via chocolatey, que é um gerenciador de pacotes do Windows. Há uma série de termos aqui que estão aparecendo, mas se você quer a instalação mais simples, vem no node, baixa o instalador dele, instala, e você está bem. Só precisa garantir que você está na versão que você quis baixar, que é a 12.

Vou abrir meu visual studio code, o meu terminal, vamos aumentar a tela, fechar o menu lateral, e aumentando a tela vou dar um nvm, que já estou com ele instalado, vem com uma série de comandos que posso usar, inclusive o nvm install, quero usar para a versão 12.17.0. Vou digitar nvm install 12.17 e ele vai começar a baixar para você a versão do node e instalar. No meu caso já tenho instalado, então ele só verifica, e posso usar.

Para confirmar isso, vou dar um node version e vemos que está na versão 12.17. Esse comando é para verificar a versão do node que você está usando. Se você por acaso não estiver nessa versão, seja anterior ou mais atual, no meu caso tenho outras versões instaladas. Tenho a 10, a 13, outra versão da 12. Se eu quiser trocar de versão ou nvm e use, por exemplo, versão 13.17. Ele vai me pedir autorização. Se eu limpar a tela e der node version mudamos para a 13.17. Não é o caso, quero a 12.17. Ele vai pedir para trocar de novo, pedir autorização. Se eu verificar a versão estou na versão 12.

Dado que tenho o node instalado, e como falei você pode baixar diretamente do site a versão que você quer ou usar o nvm, que é um pacote super útil para quem trabalha com várias versões, a partir desse momento, uma vez que tenho instalado, já estou na pasta, uma vantagem de abrir o terminal pelo visual studio code, mas não quero criar o projeto dentro dessa pasta. Quero criar na pasta anterior.

Vou navegar para a pasta anterior, vamos limpar, quero dar um npx, vou executar um pacote que está no meu npm, que se chama create react app. Vamos criar um aplicativo do react com esse create react app chamado ceep, o gerenciador de notas que a gente vai criar.

A partir deste momento dei o enter e ele vai começar a extrair, pegar o pacote, baixar na minha máquina e fazer toda a execução, criar a pasta do projeto, ele já terminou aqui porque eu tinha rodado o comando antes, ele já criou super rápido, para você pode ser que demore mais porque vai ter que baixar dependências. Uma vez que ele criou tenho uma pasta com a estrutura de pastas.

Se eu vier na lateral e abrir minha pasta atual, vou pedir para atualizar, tem a pasta ceep com toda a estrutura de pastas com a aplicação do react. Dentro do projeto atual ele criou uma nova pasta com o nome do projeto que criei, e dentro dele tem a pasta public, source, package JSON, e uma série de coisas. É onde vamos ter o código fonte, onde teremos todos os arquivos que são os assets do site, da aplicação do react.

Por padrão, se você já mexeu com JavaScript, você vai saber que a index js é geralmente o ponto de entrada da nossa aplicação. E no caso, se você olhar a index js ela parece estranha, não tem cara de JavaScript. Vamos entender durante o curso como isso funciona, mas o que a gente pode ver é que temos o react dom, que é separada, inclusive a gente vê o react e o react dom, são duas coisas diferentes. Ele está pedindo para desenhar na tela algumas coisas.

Tenho primeiro falando para usar o strict mode, é a boa prática de sempre usar strict mode, e ele está pedindo para desenhar o componente que a gente criou aqui, que é nosso app. Ele está sendo importado através desse arquivo, tem um módulo e está através do source app. É o arquivo app js. Ele é onde a gente pode começar e vamos manipular para fazer nossa aplicação.

No react o ponto de entrada não é a index js por padrão. É o ponto de entrada, mas não é nela que a gente costuma mexer, costumamos mexer na app js, é nela, nesse arquivo que a gente vai começar a mudar e fazer a aplicação rodar.

Você pode ver que ele já vem com algumas coisas, uma div, um header, um p, algumas tags do html, que você já reconhece ou pode reconhecer. Vamos ver como isso está no nosso navegador, já que ele já veio com alguma coisa preenchida.

Para ver no navegador vou dar "Ctrl + J", abrir meu terminal, fechar a aba lateral. Estou na pasta do projeto atual, quero navegar até a pasta ceep, vou dar um cd ceep, vamos limpar o terminal para subir o texto, e vou dar npm start. Quero começar dentro do npm, temos alguns scripts e quero rodar o script de start da aplicação. Vou dar um enter, ele vai começar a subir a aplicação, já automaticamente puxou para o navegador e começou a aplicação.

Está rodando no local host 3000 e tenho o react, falando para editar o arquivo para você ver as alterações em tempo real. Se eu fechar o terminal, ele já está rodando, vou apagar o p e salvar, vou ter meu navegador e já deu o reload, não preciso ficar me preocupando em dar reload o tempo todo, ele vai fazer isso automaticamente. Já vem com o hot reload para a gente.

Nossa aplicação está criada e a partir de agora vamos começar de fato a moldar ela e deixar da maneira como gostaríamos, criando o gerenciador de notas.

Criando o projeto - Limpando o projeto

A gente viu que conseguimos criar nosso aplicativo do react usando create react app, e a gente tem aqui nossa aplicação rodando, o frontend rodando no local host 3000 a partir do momento que demos o npm start. Precisamos começar agora a manipular essa aplicação, esse código, para deixar do jeito que a gente quer e para ter as interações que a gente gostaria. Só que antes disso vamos fazer uma limpeza na casa, porque toda vez que a gente cria código automaticamente, que a gente usa algum desses pacotes, é muito comum vir código a mais do que a gente vai precisar.

Por exemplo, a nossa aplicação não vai ser essa aplicação que está rodando na tela com o logo. Vou apagar esse código porque a gente vai ver daqui a pouco como vai ser a aplicação de fato. Uma vez que tenho isso apagado, não vou precisar mais, não estou usando nem o svg e nem o CSS, então vou apagar esses também.

Posso vir na hierarquia, apagar o CSS, a aplicação de testes que não vamos fazer testes, o logo svg, o meu service work, e o setup de testes. Todos esses vou apagar, vou ficar só com o que preciso, com o index js, o index CSS, que serve de reset para algumas coisas, e a aplicação js.

Se a gente olhar aqui, ele está importando o react, apesar de falar que não estou usando, e dentro dele tenho minha função que chama de app e retorna a função app para o index js que é o renderizado, o componente que está sendo renderizado. Dá para ver que essa maneira de escrever uma função que tem um retorno, no nosso caso como vimos pode ser uma coisa muito parecida com uma tag html, se eu colocar um h1 ele vai desenhar na tela, falando que não existe.

Antes de desenhar na tela preciso mudar em alguns lugares. Ele está procurando no index js, o service worker que a gente apagou. Ele não vai achar e vai dar erro de import. Além disso está falando que não é definido, então vou apagar essa parte. Nenhum erro. Esse componente jsx é uma função que tem um retorno, essa sintaxe html estranha.

Essa sintaxe html no meio de um código JavaScript, se você pegar o JavaScript não é muito comum, porque ele está desenhando, não está precisando de aspas. Como ele faz isso? Como ele está entendendo essas tags que a gente coloca no meio da aplicação?

O que o react usa, agora que coloquei essa tag ele está falando que estou usando o react, o que é estranho porque não tenho nada do react aqui dentro, é que tenho o jsx. Eu tenho essa sintaxe especial, ou como ele mesmo fala na documentação é uma extensão da sintaxe do JavaScript, uma maneira fácil de declarar elementos dentro dos componentes do react.

A gente vai usar o jsx durante esse curso e nas aplicações que estivermos utilizando porque é uma sintaxe fácil de entender, é uma sintaxe como ele mesmo deixa na página declarativa, é para facilitar esse módulo declarativo. Tenho um componente que chamei de app, que declarou como sendo só uma função, e ele retorna tudo que quero que seja desenhado. Tenho esse app e quero desenhar dentro dele esses elementos.

Lembrando que se olharmos a documentação esse react é uma biblioteca JavaScript para criar interfaces de usuário. Outra explicação que vale a pena é que temos dois reacts. Não são dois de verdade, mas tem pessoas que fazem a separação entre react, seria essa lib que a gente vai usar para fazer a renderização, e React, que seria todo o ecossistema que está por trás.

Já que essa biblioteca onde a gente vai focar nesses cursos iniciais foi feita principalmente para interface de usuário, ela só é uma representação dos meus dados, do que quero mostrar. Ela serve como a estrutura do frontend. Mas como quero o frontend rico, cheio de interações, vou ter que fazer animação, salvar o estado localmente usando o local storage, ou alguma API, tenho vários componentes que a gente vai introduzindo dentro dessa lib de interface de usuário para deixar a experiência para o usuário melhor, por isso a gente faz a separação de react, que é todo esse ecossistema super complexo com um monte de cosias, e React, só a lib que faz o desenho da interface, que não tem a cara da interface gráfica.

É legal saber que vamos tratar nesse primeiro curso basicamente dessa lib de renderização e de como ela funciona. A gente já viu que o app js é o ponto de entrada e que essa sintaxe toda estranha que ele está usando é o jsx. A gente vai usar o jsx durante todo o curso.

Sobre o curso React: Entendendo como a biblioteca funciona

O curso React: Entendendo como a biblioteca funciona possui 134 minutos de vídeos, em um total de 35 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1265 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas