Alura > Cursos de Front-end > Cursos de React > Conteúdos de React > Primeiras aulas do curso React: como os componentes funcionam

React: como os componentes funcionam

Importando do GitHub - Apresentação

Olá e boas vindas! Eu sou o Luiz Fernando, instrutor aqui na Alura e nesse curso vamos incrementar nosso Organo.

Faremos uma feature para criarmos um novo time. Com essa feature também será possível selecionar uma cor para o time ao criá-lo. Além disso, conseguiremos mudar a cor de times já existentes, excluir e favoritar colaboradores.

Para que consigamos fazer isso, aprenderemos como refatorar componentes e o porquê de utilizamos states e props. Bem como porque o React é considerado one way data binding em vez de two ways data binding, porque ele é declarativo e não reativo e porque ele é considerado uma biblioteca e não um framework.

Também aprenderemos como o React enxerga exatamente o que ele precisa mudar no DOM para que ele não pese tanto e fique mais performático. Além da diferença entre o DOM e virtual DOM.

Tudo isso na prática enquanto fazemos o código acontecer durante essa jornada. Espero que vocês gostem do curso e nos vemos nos próximos vídeos! Até!

Importando do GitHub - Clonando o repositório

Boa vindas! Agora, nosso primeiro passo é esclarecer qual o objetivo principal desse curso. O curso anterior, React: desenvolvendo com JavaScript do instrutor Vinicios Neves, nos ensina como utilizar o React.

Apesar desse nosso curso também ser prático, aqui focaremos em como funciona o React. Ou seja, focaremos no porquê de utilizarmos certos recursos como props e states, ou porque não podermos atualizar tudo no próprio React e porque ele é considerado uma biblioteca. Enfim, com esse curso, vocês terão um embasamento maior para conseguiremos fazer os códigos sozinhos.

Agora que temos ideia de como o curso funcionará, começaremos pegando o projeto anterior. No curso anterior, aprendemos como criar um projeto do zero e nesse curso, aprenderemos a pegar um projeto já pronto.

Faremos isso por meio do Git e do GitHub. Se vocês souberem como eles funcionam, não tem problema. O Git, foi desenvolvido para que nós programadores possamos mudar versões dos projetos e códigos sem precisarmos criar muitas pastas e o GitHub é um site em que podemos hospedar nossos códigos.

Tendo isso em mente, estamos com meu GitHub aberto. Vamos utilizar o Git para clonar o projeto. "Clonar" um projeto significa que vamos copiar o código para nossa máquina.

Página do GitHub com o botão "Code" em destaque no canto supeior direito da tela

Se clicarmos no botão "Code" em verde no canto direito superior, uma pequena janela com o título "Clone" se abrirá. Nela, aparecem as opções como "HTTPS", "SSH" e "GitHub CLI", nessa ordem. Selecionaremos a opção "HTTPS".

Menu com opções de "Clone" em destaque na página do GitHub

Abaixo dessas opções, temos uma URL, que pode ser copiada. Abaixo dela, também encontramos mais duas opções, uma em baixo da outra: "Open with GotHub Desktop e "Dowload ZIP", respectivamente. Como faremos tudo pelo Git, vamos apenas copiar a URL.

A seguir, vamos para uma pasta de documentos. Com o botão direito do mouse, selecionamos "Git Bash", como tenho o Git instalado neste computador, posso usar esse CLI. Com ele, é possível utilizarmos comandos de Linux no Windows.

O CLI será aberto diretamente na página desejada. Em seguida, escrevemos git clone e com o botão direito do mouse selecionamos "Paste" para colarmos a URL copiada do GitHub e damos "Enter"

git clone https://github.com/lfrprazeres/organo.git

Como já temos o Git instalado, ele copia o projeto. Se escrevermos cd, que significa change directory cuja tradução é "mude o diretório", mudaremos a pasta. Ao escrevermos organo, ele nos redireciona para a pasta "organo".

cd organo

Conseguimos copiar o código com sucesso! Agora, queremos abrir a pasta no VS Code. A primeira maneira de fazermos isso é via Terminal. O VS Code tem um comando chamado "Code" para que consigamos abri-lo. No Terminal, escrevemos code .. O . ponto significa que queremos abrir o VS Code na pasta atual.

code . 

Ao apertarmos "Enter" ele abre o VS Code. Outra forma de fazer isso é abrindo a pasta "organo" no nossos documentos e com o botão direito do mouse selecionamos "Abrir com Code". A terceira e última maneira de abrir a pasta é pelo VS Code. Com ele aberto clicarmos em "Arquivo" > "Abrir pasta" e selecionarmos o documento desejado. O atalho "Ctrl + K Ctrl + O" do teclado também funciona.

Agora com o código clonado e já aberto no VS Code, vamos começar a destrinchar o nosso conteúdo nos próximos vídeo. Vejo vocês lá!

Importando do GitHub - Instalando dependências

Com nosso pacote em mãos, vamos fazer o projeto funcionar. Com o VSCode aberto, usamos o atalho "Ctrl + '" para abrirmos o Terminal. Aqui estamos usando o próprio Git Bash no VS Code, o de vocês pode ser um pouco diferente, mas não tem problema, o importante é ter um Terminal.

Em seguida, vamos utilizar o comando npm start para executar. Porém, quando o executarmos, é dito que ele não reconhece o react-scripts.

$ npm start

> organo@0.1.0 start
> react-scripts start

'react-scripts' não é reconhecido como um comando interno ou externo, um programa operável ou um arquivo em lotes.

Em "organo" > "src" > "package.json" temos várias informações sobre o projeto, dentre elas o nome, a versão, se ele é privado ou não e assim por diante.

{
"name": "organo",
"version": "0.1.0",
"private": true,
"dependencies": {
    @testing-library/jest-dom": "^5.16.4",
    @testing-library/react": "13^2.0",
    @testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
}

Temos também as as dependencias, e os scripts que são os comandos que podemos rodar. Um deles é o start, que tentamos usar agora.

As dependências do projeto são elementos dos quais nosso pacote depende, então, precisamos instalar todas essas dependências para que o projeto funcione. Os scripts também são dependências, por isso nosso comando não funcionou, porque ainda não instalamos o react-script start.

Usando novamente o atalho "Ctrl + '", voltamos ao Terminal. Para instalar essas dependências, escreveremos o comando npm install. Podemos também usar npm i, já que i é uma abreviação de install.

npm install

Enquanto ele instala, vamos esclarecer alguns conceitos. "npm" é a abreviação de Node Package Manager , que é o gerenciador de pacotes do Node. O Node é um framework criado para que consigamos usar Back-End no JavaScript. O npm nos permite ter essas dependências diretamente configurados nesses arquivos como "package.json", e ele os instala automaticamente.

Antigamente nós "injetávamos" as dependências no nosso projeto via CDN copiando e colando uma tag link ou uma tag script com uma URL diretamente em nosso HTML. Isso era bastante difícil de controlar, então o npm veio para facilitar o processo!

Na coluna do canto esquerdo do VS Code podemos ver uma lista de pastas. Nela, temos a pasta criada "package.json" e um arquivo parecido com ela que estamos criando agora, o "package-lock.json". O "lock", de "prender", contém informação de todas as versões específicas de todas as dependências que estamos adicionando ao projeto.

Agora nós também criamos agora a pasta "node_module". Em "package.json" nós temos sete dependências.

"dependencies": {
    @testing-library/jest-dom": "^5.16.4",
    @testing-library/react": "13^2.0",
    @testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Logo, deveríamos ter sete pastas, certo? Porém se clicarmos na pasta "node_module", ela abrirá muito mais do que apenas sete pastas. Isso ocorre porque o React não depende apenas dele, o React depende de um pacote que depende de outro pacote e assim por diante. Por essa razão, o Node instala todos de uma só vez para que não precisemos fazer isso sozinhos.

Além disso, ele é esperto o suficiente para que quando nós gerarmos o building para a produção final, ele consiga excluir os pacotes que não vamos utilizar. Ou seja, não precisamos nos preocupar com isso!

Agora que vocês entenderem o que é o npm e como ele funciona e conseguimos instalar os pacotes, voltaremos ao Terminal e novamente digitaremos o comando npm start, que dessa vez vai funcionar!

npm start

Automaticamente o navegador é aberto mostrando o Organo!

Página do Organo no navegador em que está visível a parte de "Pessoas e Times" e o início do formulário "preencha os dados para criar o card do colaborador" contendo dois campos: "Nome" e "Cargo".

Agora vamos começar a criar novidades para esse projeto! Vejo vocês no próximo vídeo.

Sobre o curso React: como os componentes funcionam

O curso React: como os componentes funcionam possui 138 minutos de vídeos, em um total de 38 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!

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri powered by ChatGPT

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com Luri até 100 mensagens por semana.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

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