Alura > Cursos de Front-end > Cursos de React > Conteúdos de React > Primeiras aulas do curso React: comece seu projeto full stack

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:

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

Plus

De
R$ 1.800
por
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

Matricule-se

Pro

De
R$ 2.400
por
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, a inteligência artificial da Alura

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

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

Matricule-se

Ultra

12X
R$209
à vista R$2.508
  • Acesso a TODOS os cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, com mensagens ILIMITADAS

    Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.

  • Luri Vision, a IA que enxerga suas dúvidas

    Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

  • 6 Ebooks da Casa do Código

    Escolha os ebooks da Casa do Código, a editora da Alura, que apoiarão a sua jornada de aprendizado para sempre.

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