Introducao React Apps

19 de out. de 2019

Transcript

1. Introdução para React Apps Jonathan Cruz Rocha Github/Twitter joohncruz
2. “Arquitetura é a organização fundamental de um sistema, compreendido pelos seus componentes, o relacionamento entre eles e os princípios que direcionam seu projeto e sua evolução.”
3. “A arquitetura de grandes projetos deve contemplar necessidades dos mais diversos públicos.”
4. “Inicie com uma marcação HTML ruim e você estará escrevendo códigos CSS e Javascript ruins para mascarar isso. Inicie com uma grande marcação e você conseguirá escrever códigos CSS e JavaScript mais escaláveis. ”
5. Iniciando o projeto TESTES WEBPACK ES6 ENV SASS CHAI COMPRESSÃO ES6+ DEPENDÊNCIAS
6. Create React App npm install -g create-react-app npx create-react-app my-app cd my-app npm start
7. https://bit.ly/32uvbZb
8. Etapas • Etapa 1 ◦ Estrutura de pastas ◦ Tipos de componentes • Etapa 2 ◦ State e Props • Etapa 3 ◦ Estilos • Etapa 4 ◦ Context
9. git checkout etapa/1
10. Estrutura de pastas • Por páginas privadas e públicas seguindo camadas • Por features ◦ camada na feature
11. Componentes • Presentational e Container • Stateless e Stateful
12. git checkout etapa/2
13. git checkout etapa/3
14. Estilos • Por páginas privadas e públicas seguindo camadas • Por features ◦ camada na feature
15. CSS DO BEM BEM significa block, element, modifier e segue essas propriedades para definir criação de nomes. .elementopai .elementopai__filho .elementopai__filho- -primeiro
16. git checkout etapa/4
17. Controle de estado • Context • Redux
18. REDUX É uma implementação criada pelo Adam Abramov para implementar a arquitetura web Flux, criada pelo Facebook
19. COMO?
20. COMO?
21. Mais códigos… https://bit.ly/2P8carE
22. https://bit.ly/2oUpmWs https://github.com/joohncruz/ Valeu...