-
lesson-01
-
Renderização (pasta renderization)
-
Componentes (pasta components)
-
Ciclo de Vida (pasta lifecycle)
-
Configurar um projeto do zero
-
Passos descritos abaixo em "Criar projeto do zero"
-
exemplo (by me) pasta 'my-first-project'
-
outro exemplo projeto inicial na pasta 'configuration'. Rodar direto os comandos:
npm install npm start
-
-
-
Exemplo JSX (pasta jsx)
-
-
lesson-02
- webpack-config (Como configurar Webpack + ESLint)
-
lesson-03
- Renderização condicional (pasta conditional-renderization)
- Listas e chaves (pasta list-and-keys)
- Manipulando eventos (pasta events-manipulation)
- Dicas para pensar do jeito ReactJS (pasta thinking-react)
- Acessar a pasta com o assunto a visualizar
$ cd lesson-01/renderization/- Executar os comandos
$ npm install
$ npm start
OU
$ npm run start"The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.
By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on."
- Extensão do Chrome
- Exibe atualização na tela (tela "pisca" quando ocorre atualização)
- Highlight updates when components render
- Exibe hierarquia, props, children
- Exibe o state
- Exibe atualização na tela (tela "pisca" quando ocorre atualização)
Artigo sobre Métodos do ciclo de vida de componentes ReactJS — Um mergulho profundo!
- Inicialização
- props e state
- Montagem
- componentWillMount (versão 17 removido)
- render
- componentDidMount
- Atualização
- props
- componetWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
- state
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
- props
- Desmontagem
- componentWillUnmount
-> Cuidar com gargalo de performance: atualização de cada "pedaço", renderização demasiada (muito "re-render"), por não saber usar corretamente shouldComponentUpdate, componentWillUpdate e componentDidUpdate.
-
React Create App
-
React Scripts
-
Task Runners e Bundler Sizers
$ mkdir my-first-project
$ cd my-first-project
$ npm init
vários enters...
$ yes
$ npm install --save [email protected] [email protected] [email protected]
-> react-scripts : monta um servidor, não precisa configurar
Alterar no arquivo "package.json":
- incluir respectivos scripts em "scripts"
- "main": "src/index.js"
- inclur "devDependencies" com "typescript"
Na raiz, criar pasta "public"
Dentro da pasta "public", criar um arquivo "index.html" "basicão"
- Dentro do "body" deve conter "div" com id="root"
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Na raiz, criar pasta "src"
Dentro da pasta "src", criar dois arquivos: "index.js" e "styles.css"
// **** index.js ****
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const App = () => {
return <div className="App">Hello World</div>;
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
// **** styles.css ****
* {
margin: 0;
padding: 0;
}
body {
font-size: 22px;
}
$ npm start
- Não é obrigatório utilizar JSX
- Sintax Suggar para React.createElement
- Browser nao interpreta JSX... necessário transpilador (exemplo, o Babel)
-
Modulo bundler: empacotador de módulos para aplicações js
-
Entry
-
Output
-
Loaders
-
Plugins
-
Mode
- Production
- Development
- None
-
Projeto exemplo em 'lesson-02\webpack-config'
source-map ajuda no debug (ao visualizar na ferramenta do desenvolvedor no navegador)
// lesson-03 \ conditional-renderization Executar 'npm run build' para webpack em modo produção Executar 'npm run dev' para webpack em modo desenvolvimento Executar 'npm run start' para subir servidor em modo desenvolvimento Executar 'npm run eslint' para executar o eslint
"build": "webpack --mode production", "dev": "webpack --mode development", "start": "webpack-dev-server --open --hot --mode development", "eslint": "eslint ./src/*.js"Dependência para gerar servidor: webpack-dev-server -> localhost:8080
$ npm run eslint- qualidade
- manter padrão de desenvolvimento
Loaders - É uma configuração que permite que o webpack gerencie arquivos que não são JavaScript.
Babel - É um compilador e transpilador de JS.
Tipos de suporte do webpack: Fontes, CSS, Imagens, HTML, JS e Plugins.
Entry na configuração do webpack: É o ponto de entrada para o webpack buscar todos os módulos e dependências.
O que é webpack? É um module bundlers (um empacotador de módulos para aplicações JS).
Funcionalidade do Eslint: Validação de código.
Principais conceitos do webpack: Entry, Output, Loaders, Plugins e Mode.
Output na configuração do webpack: É para determinar quais são os bundlers que o webpack irá emitir.
Através de qual dependência é possível criar um servidor de desenvolvimento local? webpack-dev-server.
Tipos de modes existentes por padrão no webpack: Production, Development e None.