React é o framework mais popular para construir interfaces de usuário. Neste curso você aprenderá os conceitos fundamentais que você precisa para começar a construir aplicações com React.
1. O que você aprenderá neste curso gratuito do React
Você começará com o básico do React—codificando seus primeiros componentes:
- usando React com JavaScript vanilla
- o básico da cadeia de ferramentas React
- as regras do JSX e como usá-lo para construir componentes
Em seguida, você aprenderá os métodos mais atualizados para codificar componentes com ganchos, estado, adereços e eventos.
- usando props para passar parâmetros para componentes
- como validar props e fornecer valores padrão para eles
- usando estado em componentes
- como lidar com eventos DOM e criar seus próprios eventos personalizados para componentes
- usando ganchos dentro de seus componentes
Na parte final do curso, você aprenderá algumas habilidades importantes para criar aplicativos do mundo real com o React
- usando React com formulários
- estilizando seus componentes com módulos CSS
- conectando-se a uma API REST externa
- construindo um aplicativo de página única com o React Router
Ao final deste curso, você terá a confiança e saberá como construir seus próprios aplicativos baseados em React!
Construindo seu primeiro aplicativo React
Assistir vídeo aula [0:02:19] ↗
É possível construir aplicativos com React sem usar nenhuma cadeia de ferramentas – apenas a biblioteca React e JavaScript puro.
Para acompanhar, tudo que você precisa é de um editor de código-fonte como o Visual Studio Code e os links React CDN.
Apresentando Componentes
Assistir vídeo aula [0:12:20] ↗
Aplicativos React são construídos com componentes. Você aprenderá o que são componentes e como criá-los com a biblioteca React.
Para manter a tradição, vamos criar um componente Hello World:
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
Configurando seu ambiente
Assistir vídeo aula [0:18:46] ↗
Para usar o React com uma cadeia de ferramentas, você precisará instalar o Node.js em seu computador. Isso nos dará acesso ao NPM, o que facilitará a instalação de todas as dependências do React.
Depois de instalar o Node, você pode instalar e executar a ferramenta create-react-app com o seguinte comando:
npx create-react-app react-fundamentals
Isso fornecerá o scaffolding do código-fonte para um aplicativo React chamado reaja-fundamentos, pronto para ir com uma cadeia de ferramentas atualizada. Depois de criar seu aplicativo, basta executar npm start para compilar e executar seu aplicativo no navegador com recarga ao vivo.
cd react-fundamentalsnpm start
-
Aprendendo JavaScript do lado do servidor com Node.js
Apresentando o JSX
Assistir vídeo aula [0:23:09] ↗
Você pode construir um aplicativo React com JavaScript puro, mas com JSX é muito mais fácil. JSX é uma sintaxe especial que permite combinar JavaScript e XML para codificar componentes rapidamente.
Existem algumas regras que você precisa seguir se usar JSX, e você aprenderá quais são nesta lição.
Começando do zero
Assistir vídeo aula [0:32:40] ↗
Eu sempre acho benéfico começar completamente do zero. Então, nesta lição, faremos exatamente isso.
Usando fragmentos
Assistir vídeo aula [0:40:28] ↗
Como os componentes precisam retornar apenas um único elemento React, às vezes é útil usar um React Fragment. Você aprenderá as diferentes maneiras de expressar um fragmento nesta lição.
Separando JavaScript e JSX
Assistir vídeo aula [0:51:28] ↗
Usar JavaScript com JSX permite escrever componentes mais limpos com lógica e processamento de dados mais complexos.
Mesmo estando nesse novo paradigma, ainda queremos separar nosso código JavaScript de nosso JSX. JSX deve ser expressivo, e você aprenderá como fazer isso nesta lição.
O React não visa separar marcação e lógica colocando-os em arquivos separados. Em vez disso, ele depende de componentes para dividir sua interface do usuário em várias entidades que podem funcionar de forma independente. É nosso trabalho manter nossa lógica separada da marcação dentro do componente. A melhor maneira de fazer isso é configurar tudo em JavaScript antecipadamente e usar JSX para criar nossa interface do usuário com base nos dados finais.
4. Trabalhando com dados
Passando dados com adereços
Assistir vídeo aula [0:59:30] ↗
No React, usamos principalmente props (abreviação de properties) para passar dados para nossos componentes.
A maneira mais fácil de entender props é pensar neles como os atributos que você pode passar para elementos HTML no desenvolvimento web. No entanto, props são muito mais avançados.
Validando adereços
Assistir vídeo aula [1:06:57] ↗
Os adereços não são validados por padrão – você precisa optar por validar seus adereços. É mais uma ferramenta de desenvolvimento e depuração do que qualquer outra coisa.
Fornecendo valores de prop padrão
Assistir vídeo aula [1:15:37] ↗
Definir valores padrão para seus adereços pode ser benéfico. Você aprenderá como fazer nesta lição.
Introdução ao estado
Assistir vídeo aula [1:20:14] ↗
State é usado para gerenciar informações ou dados dentro dos componentes do React. Ao contrário das props, os dados de estado podem ser alterados ao longo da vida útil do componente.
State é como o React sabe renderizar novamente os componentes. Vou apresentá-lo ao estado nesta lição.
Manipulação de eventos DOM
Assistir vídeo aula [1:29:23] ↗
Os eventos são vitais para qualquer interface gráfica do usuário. Mostrarei como lidar com eventos DOM nativos nesta lição.
Escrevendo componentes como classes
Assistir vídeo aula [1:35:08] ↗
Tradicionalmente, os componentes são escritos como classes. Vamos converter um de nossos componentes de função em uma classe nesta lição.
Usando entradas controladas
Assistir vídeo aula [1:45:33] ↗
Existem duas maneiras de trabalhar com formulários no React. Nesta lição, mostrarei como usar “entradas controladas”.
As entradas controladas são aqueles elementos de formulário cujo valor é controlado pelo estado do componente React. Eles são a maneira preferida de lidar com a entrada de formulários com o React.
Estado de levantamento e eventos personalizados
Assistir vídeo aula [1:57:21] ↗
Na maioria das vezes, queremos elevar o estado de um componente filho para um componente pai. Passaremos por esse processo e mostrarei como criar seus próprios eventos personalizados.
Usando entradas não controladas
Assistir vídeo aula [2:04:33] ↗
Uma maneira menos tediosa de trabalhar com formulários é com “entradas não controladas”. Mostrarei como usá-los nesta lição.
Com entradas não controladas, não precisamos nos preocupar em definir ou atualizar valores de entrada, então não há necessidade de criar onChange ouvintes de eventos ou use um value atributo.
5. Componentes de estilo
Estilizando com estilos embutidos
Assistir vídeo aula [2:15:56] ↗
Usar estilos inline no React não é uma coisa ruim como no HTML normal. Nesta lição, mostrarei como usar o style atributo para classes React.
Usando módulos CSS
Assistir vídeo aula [2:23:15] ↗
O suporte ao módulo CSS é fornecido imediatamente com o create-react-app. Você aprenderá o que são módulos CSS e algumas das razões pelas quais você pode querer usá-los.
Usando o
styleatributo como o principal meio de estilizar elementos geralmente não é recomendado. Na maioria dos casos,classNamedeve ser usado para referenciar classes definidas em uma folha de estilo CSS externa. — Documentos do React
6. Trabalhando com dados externos
Preparando o widget do tempo
Assistir vídeo aula [2:31:34] ↗
Construiremos um widget de clima real usando uma API meteorológica gratuita. Mas primeiro, precisamos estabelecer a estrutura para isso.
Lidando com efeitos colaterais em componentes de classe
Assistir vídeo aula [2:38:46] ↗
Lidando com efeitos colaterais em componentes de classe Os processos que têm efeitos colaterais, como uma solicitação HTTP, devem ser tratados adequadamente. Nesta lição, você aprenderá sobre eventos de ciclo de vida em um componente de classe e como usá-los para buscar dados externos.
Usando o Gancho de Efeitos em Componentes de Função
Assistir vídeo aula [2:47:35] ↗
Usando o Gancho de Efeitos em Componentes de Função Os componentes de função não possuem eventos de ciclo de vida; em vez disso, devemos usar ganchos para “ligar” essa funcionalidade.
Fazendo Solicitações em Nossos Componentes
Assistir vídeo aula [2:54:41] ↗
Fazendo Requisições em Nossos Componentes É hora de finalmente emitir requisições HTTP para a API de clima! Usaremos a API Weatherstack.
7. Criando aplicativos de página única
Apresentando o React Routing
Assistir vídeo aula [3:04:10] ↗
Usamos um pacote chamado react-router-dom para fornecer roteamento em nossos aplicativos. Você aprenderá como instalá-lo e configurar rotas nesta lição.
Usando layouts e definindo rotas aninhadas
Assistir vídeo aula [3:14:02] ↗
As rotas de layout são vitais para qualquer aplicativo da Web; eles nos permitem definir a aparência de nossos aplicativos em um único componente.
Usando parâmetros de rota
Assistir vídeo aula [3:21:38] ↗
Os parâmetros de rota são a maneira essencial pela qual passamos informações para os componentes de manipulação de rotas. Você aprenderá como usá-los nesta lição.
Usando efeitos colaterais nas páginas do roteador
Assistir vídeo aula [3:29:40] ↗
Pode ser um pouco complicado usar efeitos colaterais em uma rota. Eu vou te mostrar como nesta lição. Buscaremos dados de Newsapi.org.
8. Conclusão
O React inquestionavelmente mudou a maneira como criamos aplicativos da Web, e espero que, ao deixar você, você tenha o entendimento fundamental de como usar efetivamente o React para criar aplicativos.
