Treinamento React.js!
by Inovando
Conteúdo
1. Dicas
2. Configuração VSCode
3. Estruturas de dados
4. Material Design
5. Figma
6. Create React App (Setup/Github)
7. Flexbox (flexboxfroggy)
8. Material-UI (Página de Login)
9. Tematização
10. React Final Form
11. React Router
12. Estilização de Componentes
13. Chamar APIs (internas e externas)
Fundamentos
Código
Dica #1
No mundo do desenvolvimento de software o melhor programador não é o que digita mais rápido, mas se você quiser...

Dica #2
Prefira sempre abstrair e reutilizar ao invés de duplicar


Dica #3
Utilize teclas de atalho e snippets

Dica #4
Aprenda a ler e interpretar as documentações

Dica #5

Dica #6
Como estar a frente de todo mundo no mercado de trabalho
2. Documentação EM INGLÊS
3. As vezes documentação EM PORTUGUÊS
4. Youtube
5. Cursos no Udemy/Udacity/Skillshare EM INGLÊS
6. Cursos no Alura/TreinaWEB EM PORTUGUÊS
Dica #7
Aprenda com erros de outros Devs, outros Front-ends, outros Back-ends, outras APIs, seja curioso!
Configuração VSCode
Estruturas de dados
- Array
- Object
- String
- Number
- Formatação de dados
Material Design
Material Design é uma especificação de design desenvolvido pelo Google em 2014.
Cada framework/biblioteca javascript tem sua própria implementação (outras linguagens/softwares também):
- React: Material-UI
- Vue: Vuetify
- Figma: Material Baseline Design Kit
🎉 Figma! 🎉


Formulários
- Qual campo está ativo?
- Quais campos o usuário já visitou?
- Quais campos tem erro?
- Estamos validando algum campo pelo back? ex: e-mail já existente
- Estamos enviando o formulário?
- A gente já tentou enviar o formulário e alguns erros foram retornados do back?
- Quais campos o usuário já visitou desde a última vez que tentamos enviá-lo?
Rotas com React Router
- Possibilita a criação de rotas em formato de Componentes e Props seguindo os fundamentos do React.js
- Navegação entre páginas sem recarregar o navegador
- A real sensação de uma SPA (Single Page Application)
Estilização de Components
- Não precisamos "inventar" nomes para classes css que não conflitem com outros estilos
- Não precisamos criar arquivos .css
- Possibilita a criação de estilos em formato de Componentes e Props seguindo os fundamentos do React.js
Preciso ligar essa maravilha com o back!
- Podemos criar uma API REST simples com uma biblioteca chamada JSON Server descrevendo seus dados em um arquivo .json
- Vamos criar um NPM Script pra automatizar a criação desse servidor
Bonus!
Bonus!
Bonus!
Bonus!
Bonus!
Bonus!
Bonus!
Bonus!
Bonus!
Bonus!
Obrigado!
E parabéns por chegar até aqui!
Slides por Patrick Santos
Treinamento React.js! by Inovando
By Patrick Santos
Treinamento React.js! by Inovando
- 275