Artigo original: The Best React Examples
O React (também conhecido como React.js) é uma das bibliotecas de desenvolvimento para front-end em JavaScript mais populares. Aqui está uma coleção de sintaxe e uso do React que você pode usar como um guia prático ou referência.
Exemplo de componente do React
Os componentes são reutilizáveis no React.js. Você pode injetar valores nas props, conforme indicado abaixo:
function Welcome(props) {
return <h1>Olá, {props.name}</h1>;
}
const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
element,
document.getElementById('root')
);name="Faisal Arkan" será o valor passado por {props.name} a partir da função Welcome(props) e retornará um componente que recebeu o valor name="Faisal Arkan". Depois disso, o React renderizará o elemento em html.
Outras maneiras de se declarar componentes
Há muitas maneiras de se declarar componentes ao usar o React.js. Há dois tipos de componentes: componentes sem estado e componentes com estado.
Com estado
Componentes do tipo classe
class Cat extends React.Component {
constructor(props) {
super(props);
this.state = {
humor: 'feliz'
}
}
render() {
return(
<div>
<h1>{this.props.name}</h1>
<p>
{this.props.color}
</p>
</div>
);
}
}Sem estado
Componentes funcionais (arrow functions do ES6)
const Cat = props => {
return (
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;
);
};Componentes de retorno implícito
const Cat = props =>
<div>
<h1>{props.name}</h1>
<p>{props.color}</p>
</div>;Os fragmentos são uma forma de renderizar vários elementos sem usar um elemento wrapper. Ao tentar renderizar elementos sem tags envolvendo no JSX, você verá a mensagem de erro "Adjacent JSX elements must be wrapped in an enclosing tag" (Os elementos do JSX adjacentes devem ser envolvidos por tags). Isso ocorre porque, quando o JSX transpila, ele cria elementos com seus nomes de tag correspondentes e não sabe qual nome de tag usar se forem encontrados vários elementos.
No passado, uma solução frequente para isso era usar uma div wrapper para resolver esse problema. No entanto, a versão 16 do React trouxe a adição do Fragment, que faz com que isso não seja mais necessário.
O Fragment atua como um wrapper sem adicionar divs desnecessárias ao DOM. Você pode usá-lo diretamente da importação do React ou desconstruí-lo:
import React from 'react';
class MyComponent extends React.Component {
render(){
return (
<React.Fragment>
<div>Eu sou um elemento!</div>
<button>Eu sou outro elemento</button>
</React.Fragment>
);
}
}
export default MyComponent;// Descontruído
import React, { Component, Fragment } from 'react';
class MyComponent extends Component {
render(){
return (
<Fragment>
<div>Eu sou um elemento!</div>
<button>Eu sou outro elemento</button>
</Fragment>
);
}
}
export default MyComponent;A versão 16.2 do React simplificou ainda mais esse processo, permitindo que tags JSX vazias fossem interpretadas como fragmentos:
return (
<>
<div>Eu sou um elemento!</div>
<button>Eu sou outro elemento</button>
</>
);JSX
JSX é a abreviação de JavaScript XML.
JSX é uma expressão que usa instruções HTML válidas no JavaScript. Você pode atribuir essa expressão a uma variável e usá-la em outro lugar. Você pode combinar outras expressões válidas do JavaScript e JSX dentro dessas instruções HTML, colocando-as entre chaves ({}). O Babel também compila o JSX em um objeto do tipo React.createElement().
Expressões de uma linha e de várias linhas
As expressões de linha única são simples de usar.
const one = <h1>Olá mundo!</h1>;Quando precisar usar várias linhas em uma única expressão do JSX, escreva o código dentro de um único par de parênteses.
const two = (
<ul>
<li>Uma</li>
<li>Duas</li>
</ul>
);Usando apenas tags HTML
const greet = <h1>Olá mundo!</h1>;Combinação de expressões do JavaScript com tags HTML
Podemos usar variáveis do JavaScript entre chaves.
const who = "Quincy Larson";
const greet = <h1>Olá {who}!</h1>;Também podemos chamar outras funções do JavaScript entre chaves.
function who() {
return "mundo";
}
const greet = <h1>Olá {who()}!</h1>;Somente uma única tag pai é permitida
Uma expressão do JSX deve ter apenas uma tag pai. Podemos adicionar várias tags aninhadas somente no elemento pai.
// Isso é válido.
const tags = (
<ul>
<li>Uma vez</li>
<li>Duas vezes</li>
</ul>
);
// Isso não é válido.
const tags = (
<h1>Olá mundo!</h1>
<h3>Esta é minha lista especial:</h3>
<ul>
<li>Uma vez</li>
<li>Duas vezes</li>
</ul>
);Exemplo de state no React
O state (ou estado, em português) é o local de onde vêm os dados.
Devemos sempre tentar tornar nosso state o mais simples possível e minimizar o número de componentes com estado. Se tivermos, por exemplo, dez componentes que precisam de dados do estado, devemos criar um componente contêiner que manterá o estado de todos eles.
O state é, basicamente, como um objeto global que está disponível em todos os lugares em um componente.
Exemplo de um componente de classe com estado:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// Declaramos o estado conforme mostrado abaixo
this.state = {
x: "Este é o x do estado",
y: "Este é o y do estado"
}
}
render() {
return (
<div>
<h1>{this.state.x}</h1>
<h2>{this.state.y}</h2>
</div>
);
}
}
export default App;Outro exemplo:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// Declaramos o estado conforme mostrado abaixo
this.state = {
x: "Este é o x do estado",
y: "Este é o y do estado"
}
}
render() {
let x1 = this.state.x;
let y1 = this.state.y;
return (
<div>
<h1>{x1}</h1>
<h2>{y1}</h2>
</div>
);
}
}
export default App;Atualização do state
Você pode alterar os dados armazenados no state da sua aplicação usando o método setState do seu componente.
this.setState({ value: 1 });Lembre-se de que setState é assíncrono. Portanto, você deve ter cuidado ao usar o estado atual para definir um novo estado. Um bom exemplo disso seria se você quisesse incrementar um valor em seu state.
O caminho errado
this.setState({ value: this.state.value + 1 });Isso pode levar a um comportamento inesperado em sua aplicação se o código acima for chamado várias vezes no mesmo ciclo de atualização. Para evitar isso, você pode passar uma função de retorno de chamada do atualizador para setState em vez de um objeto.
O caminho certo
this.setState(prevState => ({ value: prevState.value + 1 }));A maneira mais limpa
this.setState(({ value }) => ({ value: value + 1 }));Quando apenas um número limitado de campos no objeto do state é necessário, a destruição do objeto pode ser usada para um código mais limpo.
Exemplo de state x props em React
Quando começamos a trabalhar com componentes do React, frequentemente ouvimos dois termos. Eles são state e props. Portanto, neste artigo, exploraremos o que são esses termos e como eles se diferenciam.
State:
- O state é algo que pertence a um componente. Ele pertence a esse componente específico em que é definido. Por exemplo, a idade de uma pessoa é um state (estado) dessa pessoa.
- O state é mutável, mas ele só pode ser alterado pelo componente que o possui. Assim como eu só posso alterar minha idade, ninguém mais pode.
- Você pode alterar um state usando
this.setState()
Veja o exemplo abaixo para ter uma ideia de state:
Person.js
import React from 'react';
class Person extends React.Component{
constructor(props) {
super(props);
this.state = {
age:0
this.incrementAge = this.incrementAge.bind(this)
}
incrementAge(){
this.setState({
age:this.state.age + 1;
});
}
render(){
return(
<div>
<label>My age is: {this.state.age}</label>
<button onClick={this.incrementAge}>Grow me older !!<button>
</div>
);
}
}
export default Person;No exemplo acima, age (idade) é o estado do componente Person (pessoa).
Props:
- As props são semelhantes aos argumentos de métodos. Elas são passadas para um componente onde esse componente é usado.
- As props são imutáveis. Elas são somente leitura.
- Veja o exemplo abaixo para ter uma ideia das props:
Person.js
import React from 'react';
class Person extends React.Component{
render(){
return(
<div>
<label>I am a {this.props.character} person.</label>
</div>
);
}
}
export default Person;
const person = <Person character = "good"></Person>No exemplo acima, const person = <Person character = "good"></Person>, estamos passando a prop character = "good" para o componente Person.
Ele dá como resultado "I am a good person" (em português, "sou uma boa pessoa" – o que é verdade).
Há muito mais a aprender sobre state e props. Muitas coisas podem ser aprendidas quando você realmente se dedica à programação. Portanto, coloque a mão na massa e saia programando.
Exemplo de componente de ordem superior do React
No React, um componente de ordem superior (do inglês, Higher-Order Component, ou HOC) é uma função que recebe um componente e retorna um novo componente. Os programadores usam HOCs para obter a reutilização da lógica do componente.
Se você já usou o Redux Connect, já trabalhou com componentes de ordem superior.
A ideia central é:
const EnhancedComponent = enhance(WrappedComponent);Onde:
enhanceé o componente de ordem superior;WrappedComponenté o componente que você deseja aprimorar; eEnhancedComponenté o componente criado.
Este poderia ser o corpo da HOC aprimorada:
function enhance(WrappedComponent) {
return class extends React.Component {
render() {
const extraProp = 'This is an injected prop!';
return (
<div className="Wrapper">
<WrappedComponent
{...this.props}
extraProp={extraProp}
/>
</div>
);
}
}
} Nesse caso, enhance retorna uma classe anônima, que estende React.Component. O novo componente está fazendo três coisas simples:
- Renderizar o
WrappedComponentem um elemento div; - Passar suas próprias props para
WrappedComponent; e - Injetar uma prop adicional a
WrappedComponent.
Os HOCs são apenas um padrão que usa o poder da natureza composicional do React. Eles adicionam recursos a um componente. Há muito mais coisas que você pode fazer com eles!