yarn create react-app
yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier babel-eslint -D
yarn eslint --init
Install it following the order:
- To check syntax, find problems, and enforce code style
- JavaScript modules (import/export)
- React
- Only the Browser must be checked
- Use a popular style guide
- Airbnb (https://github.com/airbnb/javascript)
- JavaScript
- And Yes/Y for everything else.
yarn
{
"singleQuote": true,
"trailingComma": "es5"
}
module.exports = {
env: {
browser: true,
es6: true,
},
-> extends: [
'airbnb', 'prettier', 'prettier/react'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
-> parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
-> 'prettier',
],
-> rules: {
'prettier/prettier': 'error',
'react/jsx-filename-extension': [
'warn', {
extensions: ['.jsx','.js'],
},
],
'import/prefer-default-export': 'off',
'no-param-reassign': 'off',
'no-console': ["error", {allow: [ "tron" ] }]
},
};
root = true
[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
yarn add react-router-dom styled-components react-icons axios prop-types polished
yarn add eslint-plugin-react-hooks -D
plugins: [
'react',
'prettier',
-> 'react-hooks',
rules: {
'prettier/prettier': 'error',
'react/jsx-filename-extension': [
'warn', {
extensions: ['.jsx','.js'],
},
],
'import/prefer-default-export': 'off',
'no-param-reassign': 'off',
'no-console': ['error', {allow: [ 'tron' ] }],
-> 'react-hooks/rules-of-hooks': 'error',
-> 'react-hooks/exhaustive-deps': 'warn',
Diminuir verbosidade para compartilhar informações entre componentes (Redux, Apollo para GraphQL)
useState:
Pertence a uma função para criar estados sem que seja necessario escrever em formato de classe
- Criar estados dentro da propria função
- Pode usar a
Const
- Estados separados para cada useCase
- useState retorna array:
-
- Primeira posição retorna o estado em si
-
- Segunda posição, uma função para atualizar as informações do estado
-
-
- Antes: this.setState
-
-
-
- Agora: dentro de uma funcao 'handleAdd' usa-se: função([...estado, 'algo a ser adicionado']), exemplo:
-
import React, { useState } from 'react';
function App() {
const [tech, setTech] = useState(['reactJS', 'React Native']);
function handleAdd() {
setTech([...tech, 'Node.js']);
}
return (
<>
<ul>
{tech.map(t => (
<li key={t}>{t}</li>
))}
</ul>
<button type="button" onClick={handleAdd}>
Adicionar
</button>
</>
);
}
export default App;
Outro exemplo, onde usa-se 2 estados:
import React, { useState } from 'react';
function App() {
const [tech, setTech] = useState(['reactJS', 'React Native']);
const [newTech, setNewTech] = useState('');
function handleAdd() {
setTech([...tech, newTech]);
setNewTech('');
}
return (
<>
<ul>
{tech.map(t => (
<li key={t}>{t}</li>
))}
</ul>
<input
type="text"
value={newTech}
onChange={e => setNewTech(e.target.value)}
/>
<button type="button" onClick={handleAdd}>
Adicionar
</button>
</>
);
}
export default App;
useEffect:
Sobrepoe os metodos do ciclo de vida da aplicação (componentDidMount, componentDidUpdate, componentWillMount, componentWillUnMount, etc)
useEffect(função, monitoraMudançaDeEstado) => useEffect(() => {função faz algo}, [estado a ser monitorado])
- Pode ser usado em formato de função, sendo:
-
- Primeiro parametro a funcao a ser executada
-
- Segundo parametro quando a ser executada a funcao
"componentDidUpdate"
useEffect(() => {
localStorage.setItem('tech', JSON.stringify(tech));
}, [tech]); <- Estado sendo monitorado
- Exemplo para quando você não precisar monitorar algum estado:
"componentDidMount"
useEffect(() => {
const getTech = localStorage.getItem('tech');
if (getTech) {
setTech(JSON.parse(getTech));
}
}, []); <- Vazio
- exemplo para quando você precisa retornar algo assim que o componente deixa de ser montado, como faziamos no componentWillUnMount, no caso de um EventListener ou monta-lo com componentWillMount.
"componentWillUnMount"
useEffect(() => {
const getTech = localStorage.getItem('tech');
if (getTech) {
setTech(JSON.parse(getTech));
}
return () => {}; <- Retorno de função
}, []);
"componentWillMount"
useEffect(() => {
localStorage.setItem('tech', JSON.stringify(tech));
return () => {}; <- Retorno de função
}, [tech]);
E caso tenhamos algo no localStorage ele vai carregar os dados na <li></li>
import React, { useState, useEffect } from 'react';
function App() {
const [tech, setTech] = useState([]);
const [newTech, setNewTech] = useState('');
function handleAdd() {
setTech([...tech, newTech]);
setNewTech('');
}
useEffect(() => {
const getTech = localStorage.getItem('tech');
if (getTech) {
setTech(JSON.parse(getTech));
}
}, []);
useEffect(() => {
localStorage.setItem('tech', JSON.stringify(tech));
}, [tech]);
return (
<>
<ul>
{tech.map(t => (
<li key={t}>{t}</li>
))}
</ul>
<input
type="text"
value={newTech}
onChange={e => setNewTech(e.target.value)}
/>
<button type="button" onClick={handleAdd}>
Adicionar
</button>
</>
);
}
export default App;
useMemo:
Para ser usado quando se precisa contabilizar algo e para que não seja contabilizado sempre que a pagina for renderizada, mas sim so quando a informação for realmente alterada
const techSize = useMemo(() => valor, [Baseado na mudança desse estado]);
:
const techSize = useMemo(() => tech.length, [tech]);
Usando ela no codigo:
<strong>Você tem {techSize} tecnologias</strong>
useCallBack:
Similar ao useMemo, mas ao inves de retornar um unico valor, ele retorna uma função.
- Serve para funções, parecida com a
handleAdd
do nosso codigo - serve para substituir functions sendo chamadas dentro de outra function
- a function padrão é montada toda vez que um valor do estado mudar, isso poderá usar muito recurso e não é viavel
Alterar:
function handleAdd() {
setTech([...tech, newTech]);
setNewTech('');
}
Para:
const handleAdd = useCallBack( () => {
setTech([...tech, newTech]);
setNewTech('');
}, [newTech, tech] );