1. Temas
1.1. Objetivos do Aulão
1.1.1. Explicar os pontos essenciais do React e do uso dele no dia a dia
1.1.2. Tópicos ver no aulão: - O que é o React - Quem usa o React - Como está o mercado de React - O que é JSX - Como usar o React em um projeto - O que é Componentização - Como é o Fluxo de dados no React (Context API) - O que são Estados - O que é Lifecycle - Modelos de organização das pastas e nomeação - Estilização no React
1.2. O que é React?
1.2.1. Uma Lib javascript para construir interfaces de usuário
1.2.2. Ele foi desenvolvido dentro do Facebook em 2011 e em 2013 virou um projeto open source.
1.2.3. O React é usado como base para criar APPs Web e mobile, mas a sua única função é renderizar dados no DOM, então para criar APPs com ele nós usamos algumas bibliotecas associadas como React Router Dom, Redux e etc
1.2.3.1. Geralmente quando falamos sobre desenvolver projeto React estamos nos referindo ao ecossistema React que é a soma da lib React mais um conjunto de bibliotecas auxiliares.
1.3. Quem usa React?
1.3.1. Empresas
1.3.1.1. Facebook
1.3.1.2. Instagram
1.3.1.3. Twitter
1.3.1.4. Netflix
1.3.1.5. Dropbox
1.3.1.6. Codeacademy
1.3.2. Vagas
1.3.2.1. Júnior
1.3.2.2. Pleno
1.3.2.3. Sênior
1.4. Virtual DOM
1.4.1. O que é o DOM?
1.4.2. O que é o Virtual DOM?
1.4.2.1. O virtual DOM é uma cópia do DOM original que não é renderizada na tela
1.4.3. Porque o React usa o Virtual DOM?
1.4.3.1. Atualizar o DOM original através da sua API pode se tornam lento quando temos muitos elementos na página, com o virtual DOM nós atualizamos da forma mais otimizada possível apenas os elementos necessários.
1.4.4. Como o React faz o processo?
1.4.4.1. 1 - É criado um Virtual DOM
1.4.4.2. 2 - Antes de fazer alguma mudança (mudança de estado de um component) ele faz uma cópia do virtual DOM
1.4.4.3. 3 - Depois da mudança ele compara o virtual DOM com o virtual DOM que recebeu o updated
1.4.4.4. 4 - Caso existam mudanças ele atualiza o virtual DOM e depois calcula a melhor maneira de atualizar o DOM real.
1.4.4.5. 5 - Finalmente ele atualiza o DOM real
1.5. Criação de um Projeto React
1.5.1. Direto
1.5.1.1. [Vamos ao Exemplo]
1.5.1.2. Com Jsx
1.5.1.2.1. [Vamos ao Exemplo]
1.5.2. Create React APP
1.5.2.1. [Vamos ao Exemplo]
1.6. Componentização
1.6.1. O que são components
1.6.1.1. Components nos permitem dividir a tela (e os códigos) em pedaços independentes e reutilizáveis
1.6.1.2. Pensando sem components
1.6.1.3. Pensando com components
1.6.2. Component de classe
1.6.2.1. [Vamos ao Exemplo]
1.6.3. Component funcional
1.6.3.1. [Vamos ao Exemplo]
1.6.4. Compondo components
1.6.4.1. [Vamos ao Exemplo]
1.7. Fluxo de dados
1.7.1. Diagrama
1.7.2. Props
1.7.2.1. Props são as propriedades que um component filho pode receber de um component Pai
1.7.2.1.1. [Vamos ao Exemplo]
1.7.3. Eventos
1.7.3.1. Eventos são uma forma de passarmos dados de um component filho para um component pai
1.7.3.1.1. [Vamos ao Exemplo]
1.7.4. Context API
1.7.4.1. O Context API é uma maneira de passar propriedades (geralmente propriedades globais) através da arvore de components sem ter que declarar a passagem de propriedades por cada uma dos components
1.7.4.1.1. [Vamos ao Exemplo]
1.8. Estados
1.8.1. Os estados de um component são objetos que guardam as informações referentes aquele component, quando os estados mudam o component é renderizado novamente.
1.8.1.1. [Vamos ao Exemplo]
1.8.2. Hooks
1.8.2.1. Algumas features do react como o acesso aos states e aos métodos de lifecycle eram disponíveis apares para components de classe, mas como os hooks agora é possível utiliza-los também nos components funcionais
1.8.2.1.1. [Vamos ao Exemplo]
1.9. Lifecycle
1.9.1. Todos os components do React possuem um ciclo de vida que pode nos ajudar a monitorar a atualiza-lo
1.9.2. Diagrama
1.9.3. [Vamos ao Exemplo]
1.10. Renderização condicional e listas
1.10.1. Conditional Rendering – React
1.11. Organização das pastas e nomes
1.11.1. File Structure – React
1.12. Estilização no React
1.12.1. Separando os estilos em arquivos css
1.12.1.1. [Vamos ao Exemplo]
1.12.2. Styled Components
1.12.2.1. styled-components
1.12.2.2. [Vamos ao Exemplo]
1.13. Libs importantes
1.13.1. React Router Dom
1.13.2. Axios
1.13.3. Styled Components
1.13.4. Jest
1.13.5. React Bootstrap
1.14. Como Aprender React?
1.14.1. Documentação oficial
1.14.2. Treinamentos de Qualidade
1.14.2.1. Programador Full Stack Javascript em 8 semanas
2. Extras
2.1. Repositório com os exemplos
2.1.1. OneBitCodeBlog/aulao_de_react
2.2. Mapa
2.2.1. Aulão React