Gerenciador de Pacotes:
O NPM é o responsável por instalar e gerenciar as versões dos pacotes que utilizamos nas nossas aplicações. Podemos também utilizar o NPX para executar o comando de um pacote, sem instalá-lo diretamente.
- Para criarmos nossas aplicações React:
npx create-react-app nome-da-aplicacao
- Entrar na pasta
cd nome-da-aplicacao
- Script predefinido pelo React que inicia o servidor da sua aplicação.
npm start
CSS e Import
- Importar um arquivo que está dentro do próprio projeto ou que esteja em uma biblioteca externa:
import myImport from 'file';
- Importar algo que não seja a exportação default, necessário colocar o nome do que está sendo importado entre chaves.
import { myImport } from 'file';
Criando o primeiro componente React
Em um novo arquivo js:
- importar a biblioteca react com “import React from ‘react’”;
- criar a classe em javascript com “class NomeDaClasse”;
- embutir nas classes o código react com “extends React.Component”;
- exibir na tela o componente com a função “render()”;
- dentro de render, retornar o que deseja mostrar;
- exportar o componente ao final do arquivo com “export default NomeDaClasse”.
No arquivo App.js:
- importar a classe com “import NomeDaClasse from './NomeDoArquivo”;
- dentro da função App(): .
Exemplo:
import React from 'react';
class ReactClass extends React.Component {
render() {
return (
<h1>My first React Class Component!</h1>
)
}
}Obs: Expressões JSX devem retornar apenas um "elemento pai/mãe", que, se necessário, pode encapsular várias tags ou "elementos filhos".
Obs2: O export default é sempre utilizado quando queremos exportar apenas um elemento de um arquivo, seja uma função, um componente ou uma variável.
Obs3: Os nomes dos componentes React devem ser iniciados com letra maiúscula. O React trata os componentes que começam com letras minúsculas como tags HTML do DOM.
Obs4: Devemos fazer o uso das chaves para indicar código JavaScript e não texto.
Props
Devem ser passadas no arquivo principal App.js dentro do componente React:
<Componente propriedade={ variavel (ex: objeto.key) } />
Dentro do arquivo Componente.js, é possível acessar a propriedade no render() com:
const { propriedade } = this.props
PropTypes e checagem de tipos
- Importar o prop-types no componente:
import PropTypes from 'prop-types'; - Caso não tenha utilizado o create-react-app:
npm install --save-dev prop-types; - Executar a checagem de tipos no componente (adiciona-se a seguinte estrutura antes do export default):
Component.propTypes = {
prop1: PropTypes.string.isRequired,
prop2: PropTypes.number.isRequired,
};- É possível passar um valor default caso o Componente não receba o valor daquela propriedade:
Component.defaultProps = {
prop1: valorDefault
}- Tipos básicos do JS: .string, .number, .bool, .func, .object, .array
- Array de determinado tipo básico: .arrayOf(PropTypes.number)
- Objeto de determinado tipo básico: .objectOf(PropTypes.number)
- Objeto com forma específica: .shape({ prop1: PropTypes.string, prop2: PropTypes.number, })
Estados do componente
import React from 'react';
import './App.css';
class App extends React.Component {
constructor() {
super();
// Para definir um estado inicial ao componente, define-se um objeto à chave `state` do `this`, ou seja, ao `this.state`
this.state = {
numeroDeCliques: 0,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// Para atribuir um novo valor, utiliza-se o this.setState
this.setState({
numeroDeCliques: 1,
});
}
render() {
// Para LER o estado, utiliza-se o `this.state.chaveDoMeuEstado`
const { numeroDeCliques } = this.state;
return (
<button
type="button"
onClick={ this.handleClick }
>
{ numeroDeCliques }
</button>
);
}
}
export default App;Ou, com a Public Class Fields, Faz-se a declaração de um novo estado inicial fora do constructor mas dentro do class
state = {
numeroDeCliques: 0,
}Formulários no React: event handlers genéricos
- Dê a cada elemento um nome que seja igual à respectiva chave no estado do componente, com
name=”nomeDaChave”. - No handler, recupere a partir do parâmetro event o nome do componente que disparou o evento e o valor associado ao disparo, com
event.target.valuee.name; - Interpole o nome do componente como chave do estado:
this.setState({[name]: value, });
handleChange({ target }) {
const { name } = target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
[name]: value,
});
}Transmitindo informações entre componentes
- O componente pai detém o Estado e controla como ele será atualizado. Isso significa que as funções que manipularão o estado devem ser declaradas sempre nele.
- Quando algum componente filho deve passar alguma informação ao componente pai, ele deve receber como props a função que atualiza o estado do pai e dar a essa função, como parâmetro, a informação pedida (seja o target ou outra coisa).
- A informação transmitida dessa forma será inserida no estado do componente pai.
Ciclo de Vida de Componentes
- Montagem: quando o componente é inicializado e inserido no DOM;
- constructor - recebe as props e define o estado (executada durante a montagem do componente, porém antes da renderização do mesmo.);
- render - renderiza o componente, inserindo-o no DOM;
- componentDidMount - dispara uma ou mais ações após o componente ser inserido no DOM (ideal para requisições API);
- Atualização: quando as props ou estados do componente são alterados;
- shouldComponentUpdate(nextProps, nextState) - possibilita autorizar ou não o componente a atualizar;
- componentDidUpdate(prevProps, prevState) - dispara uma ou mais ações após o componente ser atualizado;
- Desmontagem: quando o componente morre, sumindo do DOM.
- componentWillUnmount - dispara uma ou mais ações antes de o componente ser desmontado.
React Router
Instalação:
npm install react-router-dom@v5
O componente BrowserRouter:
É o componente que encapsula a sua aplicação, de forma a possibilitar fazer uso de navegação.
import { BrowserRouter } from 'react-router-dom';
Pode-se encapsular os componentes diretamente no App.js (preferível) ou encapsular o próprio componente , no arquivo index.js.
O componente Route: Estabelece o mapeamento entre o caminho de URL declarado com o componente. Modos de declaração:
<Route path="/about" component={ About } /><Route exact path="/about" component={ About } /><Route path="/about" ><About /></Route>
O Componente Link:
Link é o componente a ser usado no lugar da tag a, de forma a disponibilizar navegação por URL na sua aplicação SPA sem o recarregamento de página que a tag a exige.
<Link to="/about" > About </Link>
Componentes Route com passagem de props:
- A prop render de Route é usada quando é necessário passar informações adicionais via props para o componente.
<Route path="/movies" render={(props) => <Movies {...props} movies={['Cars', 'Toy Story', 'The Hobbit']} />} />;
Componentes Route com passagem de parâmetro (rotas dinâmicas):
- Sintaxe
/:nome_do_parametrodentro da propriedade path.
<Route path="/movies/:movieId" render={(props) => <Movies {...props} />:
- Para acessar o parâmetro da URL, no componente utilizar a desestruturação
const { id } = this.props.match.params
Redirecionamentos
- Componente Redirect
<Switch>
<Route path="/dashboard" component={Dashboard} />
<Route exact path="/">
{logado ? <Redirect to="/dashboard" /> : <Login />}
</Route>
</Switch>- history.push()
import React from 'react';
class Home extends React.Component {
render() {
const { history } = this.props;
return (
<>
<h1>Home Page</h1>
<button
type="button"
onClick={ () => history.push('/welcome') }
>
Acesse a página de Boas-Vindas
</button>
</>
);
}
}
export default Home;Todos os direitos reservados à Trybe e às demais documentações citadas nos hyperlinks no arquivo, cujos materiais serviram de base para a construção deste gist.