Nosso Dontpad com algumas anotações http://dontpad.com/react-simara
Vamos aprender um dos conteúdos mais queridinhos do mercado, o react.
Vamos conhecer um pouco do universo dessa ferramenta incrível, os conceitos fundamentais e criar nossos primeiros projetinhos.
Objetivos Entender os pilares do React (componentes e props) e ser capaz de criar uma primeira aplicação em React do zero
Nossa aula será dividida em duas partes:
1- Conceitos e primeiros passos com react ❤️
2- Partiu codar 🚀
E como sempre, após esse momento de treino e de tira-dúvidas irei passar nossa tarefinha de casa!
- Usar as reações do zoom e levantar a mão para sinalizar que gostaria de falar
- Enviar as dúvidas no chat
- Manter microfone desligado quando outras pessoas estiverem falando
- Manter câmera ligada o máximo possível
- Momento mão no código, momento de olho na tela
Ex-aluna {reprograma}, desenvolvedora na ThoughtWorks e criadora do Podcast Quero Ser Dev.
React é uma biblioteca para criação de interface de usuários.
É uma ferramenta que nasceu no Facebook para sincronizar as diferentes informações/atualizações que aconteciam na tela!
Além disso, se tornou bastante popular devido ao fato de permitir o reuso de componentes, fácil manutenção no código e alta performance.😃
Olha aqui a documentação oficial do React.
"Biblioteca: é uma coleção de implementações de comportamentos escritos em uma linguagem e importadas no seu código."
Framework é uma coleção de bibliotecas.
A diferença fica explícita quando percebemos que ao usar uma lib/biblioteca podemos usar em parte do projeto e ainda refatorar para excluir a lib e o projeto continua. Já na utilização de frameworks a gente precisaria reiniciar o projeto do zero.
Facebook, Twitter, WhatsApp, Netflix, AirBnB e em muitas outras gigantes.
Mentalidade react:
Vou te provar que você já sabe react, só nunca usou. rs
Você já sabe HTML e javascript, certo?
Existe uma grande semelhança de HTML e Javascript com o comportamento/funcionamento dos componentes de react.
E a boa notícia: componente é a base do react.
A tríade do react: Exemplo meu milk shake de ovomaltine do Bobs.
- Visual: o retorno dos elementos nos componentes
- Funcionalidade: as funções de javascript que dão vida aos componentes
- Estado: Cria o poder de memória nos componentes
Dicionário react:
- JSX: XML + Javascript, uma sintaxe que você vai estranhar no início, mas que facilita muito nossa vida. É html dentro do javascript.
- Elemento: tags html que retornam de um componente
- Componente: códigos isolados, independentes e reutilizáveis, podem ser funcões ou classes.
- SPA: Single page application que é esse conceito de gerar experiência para os usuários, atualizando partes do código em vez da página inteira.
- Props: propriedades que passamos para componentes
- Estado: memória para manipular dados em componentes
npx create-react-app my-app
Como o react faz para mostrar todos os elementos e componentes na tela?
Vamos ver o ReactDOM.render()
Agora, vamos pensar sobre uma estrutura de pastas que seja recomendada para nosso projeto em react. Importante lembrar que não precisamos criar todas as pastas, elas surgem automaticamente quando usamos o npx create-react-app.
Aqui ficam salvos todos os pacotes de dependências que precisamos para fazer a sintaxe react funcionar.
index.html
Aqui está nosso html que recebe todos os códigos para mostrar na tela.
index.js
Aqui ficam as principais importações do react e o ReactDOM.render() que é responsável por mandar nossos componentes para o html.
app.js
Aqui fica nosso principal componente, que centraliza as outras funcionalidades/páginas.
📂Components
Aqui criamos nossos arquivos de componentes. :)
📂Pages
Aqui criamos nossos arquivos de páginas que recebem os componentes.
📂Routes
Aqui criamos o arquivo de navegação das nossas páginas.
📂Services
Aqui criamos os arquivos onde podemos consumir dados de api.
📂Styles
Aqui podemos criar todos os estilos de nossos arquivos, desde o global que importamos para o app.js, até por component ou por page que importamos em cada arquivo relacionado.
📂Assets
Aqui salvamos todos os arquivos de imagens.
Propriedades ou props é um objeto javascript que passamos como parâmetro para componentes. São as props que nos permite reutilzar components e renderizar diferentes dados em cada um deles.
Como no HTML passamos as props como atributos de tags.
Em html:
<img src="http://">
E se a gente pudesse mudar o ingredientes do nosso milk shake ou criar as nossas próprias receitas?
<Capslock texto="Qualquer texto vai ficar em caixa alta"> // QUALQUER TEXTO VAI FICAR EM CAIXA ALTA
function Capslock(props) {
const textoInserido = props.texto
const textoEmCapslock = textoInserido.toUpperCase()
return <div>{textoEmCapslock}</div>
}
Children é uma propriedade do objeto props. E assim como no HTML, temos as divs mães que criam uma hierarquia com os elementos filhos. Usando o children podemos modificar dados entre as tags de fechamento e abertura de um elemento.
Em html:
<strong>Seu texto fica bold</strong>
E se a gente pudesse escrever as nossas próprias funcionalidades nas tags?
<Capslock>Qualquer texto vai ficar em caixa alta</Capslock> // QUALQUER TEXTO VAI FICAR EM CAIXA ALTA
function Capslock(props) {
const textoInserido = props.children
const textoEmCapslock = textoInserido.toUpperCase()
return <div>{textoEmCapslock}</div>
}
Exemplos:
| Exemplo 1 | Descrição |
|---|---|
Hello world |
Utilizando o ReactDOM.render(), vamos renderizar o Hello World! |
| Exemplo 2 | Descrição |
|---|---|
Hello world |
Agora no App vamos renderizar o Hello World! |
| Exemplo 3 | Descrição |
|---|---|
Hello world |
Agora vamos criar um componente Hello e passar por props o nosso Hello World |
| Exemplo 4 | Descrição |
|---|---|
UpperCase |
Agora vamos criar um componente UpperCase que transforma em CapsLock qualquer texto passado por props. |
| Exemplo 5 | Descrição |
|---|---|
UpperCase |
Agora vamos criar um componente UpperCase que transforma em CapsLock qualquer texto passado por children. |
| Exemplo 6 | Descrição |
|---|---|
Tick |
Vamos criar um componente que retorna nosso horário local |
| Exemplo 7 | Descrição |
|---|---|
Imagem |
Vamos aprender como trabalhar com imagens, criando um componente que recebe um nome e uma imagem. E depois renderizar na tela esse card. |
| Exemplo 8 | Descrição |
|---|---|
Cards |
Vamos usar dados de um arquivo interno que simula um JSON para renderizar alguns cards na tela |
| Exemplo 9 | Descrição |
|---|---|
Lista |
Vamos usar dados de um arquivo interno que simula um JSON para renderizar uma lista na tela |
Desafio:
Calma! É só mais uma TAREFINHA DE CASA pra chamar de sua! Já treinamos bastante com nossos exemplos na aula!
Vamos criar um projetinho react do zero com direito a componetização, consumo de dados internos e uso de props.
Passo a passo:
- Crie um projeto react
- Apague as informações default
- Crie e exporte um arquivo que simula um JSON
- Crie um componente título que recebe o texto: "Meu Primeiro Projeto React do Zero", a ser renderizado por props ou children
- Crie um outro componente que mapeia os dados do arquivo que simula o JSON e retorna em elementos que devem ser renderizados na tela. Os dados devem conter 4 chaves e valores: id, nome, descrição e imagem.
- Import no App.js os componentes criados, perceba os erros/warnings que o terminal/console mostra, resolva e faça todos os componentes renderizar na tela
- Suba esse projeto no github, atualize o read me contando tudo o que você aprendeu e usou. E suba no classroom.
- Tente fazer entre domingo e terça, para aproveitar a aula de quarta e monitorias pra tirar dúvidas.
- Arraseee! E qualquer coisa, me chama!