- Instala os package do React localmente no projeto
npm install --save react react-dom- Instala o Babel.js (necessário para interpretar ES6 e JSX)
npm install --save-dev babel-cli babel-preset-env- Instala o pacote
create-react-appglobalmente
npm install -g create-react-app- Exibe a versão do pacote
create-react-appinstalada
create-react-app --version- Cria um projeto chamado
projeto-react
create-react-app projeto-react
cd projeto-react- Executa a aplicação em
http://localhost:3000
npm start- Executa os testes
npm test- Compila a aplicação para produção
npm run build- Executar
npm startna aplicação e visitar a página no navegador - Executar o script interativo
npm test - Explore e conheça melhor a estrutura criada na pasta do projeto
- Explore e conheça melhor o código dos arquivos criados
- Leia mais sobre o pacote
create-react-app no Github
- Ver referência no repositório Aprenda ES6 (JavaScript)
- Por quê elas fazem sentido em React e no seu eco-sistema?
ReactDOM.render()espera 2 argumentos:- um JSX que será renderizado.
- o lugar onde o React renderizá dentro do HTML.
Exemplo:
ReactDOM.render(<App />, document.getElementById('root'));-
Evitar carregamento da página quando realiza alteração no código.
-
Mantém o log no developer console.
-
Mantém o estado da aplicação.
-
Inserir código abaixo no final do entry-point
index.js
if (module.hot){
module.hot.accept()
}- Conceitos de Javascript por trás do React
Object.assign() Object.freeze() spread operator (...this.state.object)
Component and PureComponent
setState()
Arrays são Objects
Evitar métodos mutáveis de arrays: push, pop, shift, unshift, splice, sort, reverse
Usar métodos imutáveis de array que retornam um novo array ou novo objeto: map, filter, reduce, every, some, slice
key field para renderizar arrays no DOM
Evitar efeitos colaterais com operadores: ++, -- e delete
Pure functions - render() method and functional components
Nome de Componente começa com maiúscula
Expressões ternárias
Short circuit && e ||
!! transforma para o equivalete booleano
Context(this) bind methods
Components: stateful and stateless (o ideal é que os componentes sejam stateless)