TREINAMENTO REACT JS + REDUX

Descrição:

Introdução
Versão React / Instalação / Webpack / Babel / Bundle
Create-react-app
Setup do ambiente / Estrutura de pastas e arquivos / Gerenciamento de dependências / Arquitetura baseada em módulos / View e Controller
Funcionalidades React
JSX / Components / One-way Data Binding / Virtual DOM / Simplicity / Performance
Pros & Contras
ReactJS x AngularJS / ReactJS x ReactNative / React x Vue
React JSX
Por que usar JSX? / Elementos aninhados em JSX / Atributos JSX / Comentários JSX
Components
Componentes funcionais / Componentes da classe
State
Defining State (definindo estado) / Changing State (mudando estado) / Máquina de estados
Props
Default Props / State e Props
Props Validation
Validando Props / Validadores Customizados ReactJS / State x Props / Constructor / O que é o construtor Reactjs?
Funções Arrow
Component API
setState() / forceUpdate() / findDOMNode() / Component Life Cycle / Fase Inicial / Fase de montagem / Fase de Atualização / Fase de desmontagem
Forms
Lib de formulários / Criando Formulário / Componente não controlado / Componente controlado / Manipulação de múltiplas entradas no componente controlado / Controlado x Não-controlado
Events
Event Handler / Child Events
Conditional Rendering
If / Operador Logico && / Operador ternário / Operador Switch Case / Conditional Redenring com enums / Component form Rendering: como prevenir
Lists
Renderizando listas dentro de componentes
React Keys
Usando Keys / Usando keys com componente / Uso exclusivo de Keys entre Siblings
React Refs
Quando usar referências / Quando não usar referências / Como criar referências / Adicionar referência aos elementos DOM / Adicionar componentes de referência à classe /Refs de retorno de chamada / Referência de encaminhamento de um componente para outro componente / useRef()
React Fragments
Por que usamos fragmentos? / Keyed Fragments (Fragments com uso de keys)
React Router
O que é React Router? / Intalação React Router / Tratamento de rotas /Component no React Router / Adicionando navegação usando o componente Link / O que é o componente ? / React Switch Router / Roteamento aninhado no React / Benefícios do React Router
React CSS
Estilo em linha / Nome da propriedade camelCase / Usando objeto JavaScript / Folha de estilo CSS / CSS Modules / Componentes com estilo
Animação (Animation)
Instalação / Componentes do grupo de transição (React Transition) / Transition / CSSTransition / TransitionGroup
React Bootstrap
instalação do Bootstrap / Adicionando Bootstrap para React / Usando a CDN do Bootstrap / Bootstrap como dependência
React Package Bootstrap / Importando o Bootstrap / Usando reatstrap / Map / Introdução / método map ()
React Table
Recursos / Instalação / Aplicação
Higher-Order Components (componentes de ordem superior)
Convenções de Higher-Order Components
React Code Splitting
React.lazy / Suspense / Error boundaries / Route-based code splitting / Named Export
React Context
Como usar o contexto / Quando usar o contexto / API contexto / React.createContext / Context.Provider / Context.Consumer / Class.contextType
React Hooks
Pré-requisitos / Instalação / Quando usar / Regras / Hook State / Hook Effect / Customização
React Flux Concept
Introdução / Estrutura e fluxo de dados / Elementos flux / Instalação do Redux / Criar arquivos e pastas / Dispatcher / Stores / Views / Actions / Reducers / Root Component / Outros Components / React Flux x MVC
React Redux
Arquitetura Redux / Por que usar o React Redux? / Instalação do Redux
React Portals
Recursos / Instalação / Quando usar? / usando portals
Error Boundaries (limites de erro)
Como implementar / Onde colocar / Error Boundaries na classe / comportamento para erro não capturado / manipulador de eventos