React: comece seu projeto full stack

Iniciando o 1º projeto React - Apresentação

Boas-vindas ao treinamento de React da Alura!

O instrutor, Bernardo Severo, é um homem branco, de cabelos castanho e óculos arredondados. Ele usa um moletom preto e está em um quarto com uma iluminação azul suave.

Nesse curso, aprenderemos sobre React, a ferramenta de desenvolvimento Front End mais utilizada no mundo.

Se você deseja aprender mais sobre o assunto ou se tornar um desenvolvedor Front End, este curso é para você. Dizemos isso porque, hoje, a grande maioria das empresas, pequenas ou grandes, usa o React como sua tecnologia para desenvolvimento de sites e aplicações web, principalmente.

Além disso, algumas aplicações mobile também são desenvolvidas com essa tecnologia.

Nesse curso, aprenderemos a criar uma aplicação React do zero: um site de livros que permitirá ao usuário salvar seus livros favoritos e descobrir novos livros para ler. Para isso, exercitaremos os principais conhecimentos de React, saindo do zero ao básico.

Para fazer o treinamento, você precisa de um conhecimento básico/intermediário em JavaScript, HTML e CSS. Essas três tecnologias são a base do React.

E aí, vamos nessa?

Iniciando o 1º projeto React - O que é React

Nesse vídeo, aprenderemos um pouco da teoria e da história do React, além de suas características e dos principais motivos para aprendê-lo.

O React foi desenvolvido por Jordan Walke, um engenheiro do Facebook, e lançado em 2013. A ferramenta foi criada para facilitar a manutenção do site do Facebook.

O React é, em resumo, uma biblioteca JavaScript. Ou seja, um conjunto de ferramentas que utiliza o JavaScript como código. Código este que, inclusive, é aberto. O React é sustentado pela Meta, a empresa do Facebook.

Ele usa o JSX como linguagem, uma combinação de JavaScript e HTML. A reutilização de componentes da interface é uma das principais características do React que, além disso, ainda é extremamente fácil de usar.

Devemos aprender a utilizar esse tecnologia porque ela é a ferramenta de front-end mais utilizada e aceita pelo mercado em todo mundo. Consequentemente, existe uma grande demanda por ela no mercado da programação.

Segundo o Stack Overflow, que refaz essa pesquisa anualmente, o React é usado em 44% das demandas de desenvolvimento web do mercado.

Iniciando o 1º projeto React - Criando a primeira aplicação com Create React app

Vamos dar nosso primeiro passo em direção a nos tornarmos desenvolvedores React. Faremos isso criando nossa primeira aplicação.

Agora que já temos todas as dependências necessárias para trabalhar com React, vamos abrir a IDE de nossa preferência. O instrutor utiliza o VS Code.

Vamos criar um novo arquivo, pelo caminho "Arquivo > Abrir > Nova Pasta". O nome da pasta será "alura-books", que será o nome do nosso site de livros. Depois, clicaremos em "Criar" e a pasta aparecerá. Vamos abri-la.

Agora vamos acessar "Terminal > Novo Terminal", para começarmos a criar nossa aplicação.

Vamos executar o comando npx create-react-app ., que criará nossa aplicação React e, com o ., cria na pasta que está aberta. No caso, a pasta "alura-books":

npx create-react-app .

O projeto será criado com todas as dependências. Vamos aguardar até que esteja pronto.

Quando a instalação estiver completa, veremos a mensagem "Happy hacking!" no terminal. Logo acima dessa mensagem, encontraremos os comandos que usaremos para rodar nossa aplicação. O comando que nos servirá durante o treinamento é npm start, que é responsável por fazer nossa aplicação rodar.

No menu lateral à esquerda, veremos que alguns arquivos foram criados automaticamente. O que buscaremos entender agora é o "package.json". Ele guarda as configurações do nosso projeto, como o nome, versão e dependências.

Vamos acessar a pasta "src". Dentro dela, há dois artigos que nos interessam: "App.js", que guarda o código que vamos manipular, e "App.css", o CSS padrão que nos servirá de referência. Vamos modificar bastante esses dois arquivos durante o treinamento.

No próximo vídeo, rodaremos nossa primeira aplicação.

Sobre o curso React: comece seu projeto full stack

O curso React: comece seu projeto full stack possui 246 minutos de vídeos, em um total de 52 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:

• Iniciando o 1º projeto React
• Primeiro componente
• Styled Components
• Estados
• Props e finalização do projeto