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