ReactJS - Guia rápido

ReactJS é uma biblioteca JavaScript usada para construir componentes de IU reutilizáveis. De acordo com a documentação oficial do React, a seguir está a definição -

React é uma biblioteca para construir interfaces de usuário composíveis. Ele incentiva a criação de componentes de IU reutilizáveis, que apresentam dados que mudam com o tempo. Muitas pessoas usam React como o V no MVC. O React abstrai o DOM de você, oferecendo um modelo de programação mais simples e melhor desempenho. O React também pode renderizar no servidor usando o Node e pode alimentar aplicativos nativos usando o React Native. O React implementa o fluxo de dados reativo unilateral, o que reduz o boilerplate e é mais fácil de raciocinar do que a vinculação de dados tradicional.

Recursos de reação

• JSX- JSX é uma extensão de sintaxe JavaScript. Não é necessário usar JSX no desenvolvimento do React, mas é recomendado.

• Components- React tem tudo a ver com componentes. Você precisa pensar em tudo como um componente. Isso o ajudará a manter o código ao trabalhar em projetos de maior escala.

• Unidirectional data flow and Flux- React implementa fluxo de dados unilateral, o que torna mais fácil raciocinar sobre seu aplicativo. Flux é um padrão que ajuda a manter seus dados unidirecionais.

• License - React é licenciado pela Facebook Inc. A documentação é licenciada pela CC BY 4.0.

Vantagens do React

• Usa DOM virtual, que é um objeto JavaScript. Isso melhorará o desempenho dos aplicativos, já que o DOM virtual do JavaScript é mais rápido do que o DOM normal.

• Pode ser usado no lado do cliente e do servidor, bem como com outras estruturas.

• Os padrões de componentes e dados melhoram a legibilidade, o que ajuda a manter aplicativos maiores.

Limitações de reação

• Abrange apenas a camada de visualização do aplicativo, portanto, você ainda precisa escolher outras tecnologias para obter um conjunto completo de ferramentas para desenvolvimento.

• Usa modelos embutidos e JSX, o que pode parecer estranho para alguns desenvolvedores.

Neste capítulo, mostraremos como configurar um ambiente para o desenvolvimento bem-sucedido do React. Observe que há muitas etapas envolvidas, mas isso ajudará a acelerar o processo de desenvolvimento posteriormente. Nós vamos precisarNodeJS, então, se você não o tiver instalado, verifique o link da tabela a seguir.

Sr. Não.	Software e descrição
1	NodeJS and NPM NodeJS é a plataforma necessária para o desenvolvimento do ReactJS. Verifique nossa configuração de ambiente NodeJS .

Depois de instalar o NodeJS com sucesso, podemos começar a instalar o React nele usando o npm. Você pode instalar o ReactJS de duas maneiras

• Usando webpack e babel.

• Usando o create-react-app comando.

Instalando ReactJS usando webpack e babel

Webpacké um empacotador de módulos (gerencia e carrega módulos independentes). Ele pega módulos dependentes e os compila em um único pacote (arquivo). Você pode usar este pacote durante o desenvolvimento de aplicativos usando a linha de comando ou configurando-o usando o arquivo webpack.config.

Babel é um compilador e transpilador JavaScript. Ele é usado para converter um código-fonte em outro. Usando isso, você será capaz de usar os novos recursos do ES6 em seu código, onde o babel o converte em um antigo ES5 que pode ser executado em todos os navegadores.

Etapa 1 - Criar a pasta raiz

Crie uma pasta com o nome reactApp na área de trabalho para instalar todos os arquivos necessários, usando o comando mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Para criar qualquer módulo, é necessário gerar o package.jsonArquivo. Portanto, após criar a pasta, precisamos criar umpackage.jsonArquivo. Para fazer isso, você precisa executar onpm init comando no prompt de comando.

C:\Users\username\Desktop\reactApp>npm init

Este comando pede informações sobre o módulo, como nome do pacote, descrição, autor, etc., você pode pular esses usando a opção –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Etapa 2 - instalar React e react dom

Já que nossa principal tarefa é instalar o ReactJS, instale-o e seus pacotes dom, usando install react e react-domcomandos do npm respectivamente. Você pode adicionar os pacotes que instalamos, parapackage.json arquivo usando o --save opção.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Ou você pode instalar todos eles em um único comando como -

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Etapa 3 - Instale o webpack

Uma vez que estamos usando webpack para gerar bundler install webpack, webpack-dev-server e webpack-cli.

C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save

Ou você pode instalar todos eles em um único comando como -

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Passo 4 - Instale o babel

Instale o babel e seus plug-ins babel-core, babel-loader, babel-preset-env, babel-preset-react e, html-webpack-plugin

C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-dev

Ou você pode instalar todos eles em um único comando como -

C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
   babel-preset-react html-webpack-plugin --save-dev

Etapa 5 - Criar os arquivos

Para completar a instalação, precisamos criar certos arquivos, a saber, index.html, App.js, main.js, webpack.config.js e,.babelrc. Você pode criar esses arquivos manualmente ou, usandocommand prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Etapa 6 - Definir compilador, servidor e carregadores

Abrir webpack-config.jsarquivo e adicione o código a seguir. Estamos configurando o ponto de entrada do webpack como main.js. O caminho de saída é o local onde o aplicativo empacotado será servido. Também estamos configurando o servidor de desenvolvimento para8001porta. Você pode escolher qualquer porta que desejar.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Abra o package.json e deletar "test" "echo \"Error: no test specified\" && exit 1" dentro "scripts"objeto. Estamos excluindo esta linha, pois não faremos nenhum teste neste tutorial. Vamos adicionar ostart e build em vez disso.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Etapa 7 - index.html

Este é apenas um HTML normal. Estamos definindodiv id = "app" como um elemento raiz para nosso aplicativo e adicionar index_bundle.js script, que é nosso arquivo de aplicativo empacotado.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Etapa 8 - App.jsx e main.js

Este é o primeiro componente React. Explicaremos os componentes do React em detalhes em um capítulo subsequente. Este componente irá renderizarHello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Precisamos importar este componente e renderizá-lo em nossa raiz App elemento, para que possamos vê-lo no navegador.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Note - Sempre que você quiser usar algo, você precisa importprimeiro. Se você deseja tornar o componente utilizável em outras partes do aplicativo, você precisaexport após a criação e importe-o no arquivo onde deseja utilizá-lo.

Crie um arquivo com o nome .babelrc e copie o seguinte conteúdo para ele.

{
   "presets":["env", "react"]
}

Etapa 9 - Executando o servidor

A configuração está concluída e podemos iniciar o servidor executando o seguinte comando.

C:\Users\username\Desktop\reactApp>npm start

Ele mostrará a porta que precisamos abrir no navegador. No nosso caso, éhttp://localhost:8001/. Depois de abri-lo, veremos a seguinte saída.

Etapa 10 - Gerando o pacote

Finalmente, para gerar o pacote, você precisa executar o comando build no prompt de comando como -

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Isso irá gerar o pacote na pasta atual, conforme mostrado abaixo.

Usando o comando create-react-app

Em vez de usar webpack e babel, você pode instalar o ReactJS mais simplesmente instalando create-react-app.

Etapa 1 - instalar create-react-app

Navegue pela área de trabalho e instale o aplicativo Create React usando o prompt de comando conforme mostrado abaixo -

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Isso criará uma pasta chamada my-app na área de trabalho e instalará todos os arquivos necessários nela.

Etapa 2 - Excluir todos os arquivos de origem

Navegue pela pasta src na pasta my-app gerada e remova todos os arquivos como mostrado abaixo -

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Etapa 3 - Adicionar arquivos

Adicionar arquivos com nomes index.css e index.js na pasta src como -

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

No arquivo index.js, adicione o seguinte código

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Etapa 4 - Executar o projeto

Finalmente, execute o projeto usando o comando start.

npm start

React usa JSX para modelagem em vez de JavaScript normal. Não é necessário usá-lo, no entanto, a seguir estão alguns prós que vêm com ele.

• É mais rápido porque executa a otimização ao compilar o código em JavaScript.

• Também é seguro para tipos e a maioria dos erros pode ser detectada durante a compilação.

• Isso torna mais fácil e rápido escrever modelos, se você estiver familiarizado com HTML.

Usando JSX

JSX parece um HTML normal na maioria dos casos. Já o usamos no capítulo Configuração do ambiente. Olhe o código deApp.jsx para onde estamos voltando div.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Embora seja semelhante ao HTML, há algumas coisas que precisamos ter em mente ao trabalhar com JSX.

Elementos Aninhados

Se quisermos retornar mais elementos, precisamos envolvê-lo com um elemento contêiner. Observe como estamos usandodiv como um invólucro para h1, h2 e p elementos

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Atributos

Podemos usar nossos próprios atributos personalizados, além de propriedades e atributos HTML regulares. Quando queremos adicionar um atributo personalizado, precisamos usardata-prefixo. No exemplo a seguir, adicionamosdata-myattribute como um atributo de p elemento.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Expressões JavaScript

Expressões JavaScript podem ser usadas dentro do JSX. Só precisamos envolvê-lo com chaves{}. O exemplo a seguir irá renderizar2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

Não podemos usar if else declarações dentro do JSX, em vez disso, podemos usar conditional (ternary)expressões. No exemplo a seguir, variáveli igual a 1 então o navegador irá renderizar true, Se mudarmos para algum outro valor, ele irá renderizar false.

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Estilo

React recomenda o uso de estilos embutidos. Quando queremos definir estilos embutidos, precisamos usarcamelCasesintaxe. React também anexará automaticamentepxapós o valor numérico em elementos específicos. O exemplo a seguir mostra como adicionarmyStyle inline para h1 elemento.

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

Comentários

Ao escrever comentários, precisamos colocar chaves {}quando queremos escrever um comentário dentro da seção infantil de uma tag. É uma boa prática sempre usar{} ao escrever comentários, pois queremos ser consistentes ao escrever o aplicativo.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Convenção de nomes

Tags HTML sempre usam lowercase nomes de tag, enquanto os componentes React começam com Uppercase.

Note - Você deve usar className e htmlFor como nomes de atributos XML em vez de class e for.

Isso é explicado na página oficial do React como -

Como JSX é JavaScript, identificadores como class e forsão desencorajados como nomes de atributos XML. Em vez disso, os componentes React DOM esperam nomes de propriedade DOM, comoclassName e htmlFor, respectivamente.

Neste capítulo, aprenderemos como combinar componentes para tornar o aplicativo mais fácil de manter. Esta abordagem permite atualizar e alterar seus componentes sem afetar o resto da página.

Exemplo sem estado

Nosso primeiro componente no exemplo a seguir é App. Este componente é proprietário deHeader e Content. Estamos criandoHeader e Content separadamente e apenas adicionando-o dentro da árvore JSX em nosso Appcomponente. SomenteApp componente precisa ser exportado.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

Para ser capaz de renderizar isso na página, precisamos importá-lo em main.js arquivo e chamada reactDOM.render(). Já fizemos isso ao definir o ambiente.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

O código acima irá gerar o seguinte resultado.

Exemplo com estado

Neste exemplo, definiremos o estado do componente proprietário (App) oHeadercomponente é apenas adicionado como no último exemplo, pois não precisa de nenhum estado. Em vez de tag de conteúdo, estamos criandotable e tbody elementos, onde vamos inserir dinamicamente TableRow para cada objeto do data array.

Pode-se ver que estamos usando a sintaxe de seta EcmaScript 2015 (=>), que parece muito mais limpa do que a antiga sintaxe JavaScript. Isso nos ajudará a criar nossos elementos com menos linhas de código. É especialmente útil quando precisamos criar uma lista com muitos itens.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Note - Observe que estamos usando key = {i} inside map()função. Isso ajudará o React a atualizar apenas os elementos necessários, em vez de renderizar novamente a lista inteira quando algo mudar. É um grande aumento de desempenho para um grande número de elementos criados dinamicamente.

Stateé o local de onde vêm os dados. Devemos sempre tentar tornar nosso estado 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 de contêiner que manterá o estado de todos eles.

Usando estado

O código de exemplo a seguir mostra como criar um componente com monitoração de estado usando a sintaxe EcmaScript2016.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

Isso produzirá o seguinte resultado.

A principal diferença entre o estado e os adereços é que propssão imutáveis. É por isso que o componente do contêiner deve definir o estado que pode ser atualizado e alterado, enquanto os componentes filhos devem apenas passar dados do estado usando props.

Usando adereços

Quando precisamos de dados imutáveis ​​em nosso componente, podemos apenas adicionar adereços para reactDOM.render() função em main.js e usá-lo dentro do nosso componente.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Isso produzirá o seguinte resultado.

Acessórios padrão

Você também pode definir valores de propriedade padrão diretamente no construtor do componente, em vez de adicioná-lo ao reactDom.render() elemento.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

A saída é a mesma de antes.

Estado e adereços

O exemplo a seguir mostra como combinar statee adereços em seu aplicativo. Estamos definindo o estado em nosso componente pai e passando-o para baixo na árvore de componentes usandoprops. Dentro derender função, estamos definindo headerProp e contentProp usado em componentes filhos.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

O resultado será novamente o mesmo que nos dois exemplos anteriores, a única coisa que é diferente é a fonte de nossos dados, que agora vem originalmente do state. Quando quisermos atualizá-lo, precisamos apenas atualizar o estado, e todos os componentes filhos serão atualizados. Mais sobre isso no capítulo Eventos.

A validação de propriedades é uma forma útil de forçar o uso correto dos componentes. Isso ajudará durante o desenvolvimento para evitar bugs e problemas futuros, uma vez que o aplicativo se tornar maior. Também torna o código mais legível, pois podemos ver como cada componente deve ser usado.

Validando adereços

Neste exemplo, estamos criando App componente com todos os props que precisamos. App.propTypesé usado para validação de adereços. Se alguns dos adereços não estiverem usando o tipo correto que atribuímos, receberemos um aviso do console. Depois de especificar os padrões de validação, iremos definirApp.defaultProps.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h3>Array: {this.props.propArray}</h3>
            <h3>Bool: {this.props.propBool ? "True..." : "False..."}</h3>
            <h3>Func: {this.props.propFunc(3)}</h3>
            <h3>Number: {this.props.propNumber}</h3>
            <h3>String: {this.props.propString}</h3>
            <h3>Object: {this.props.propObject.objectName1}</h3>
            <h3>Object: {this.props.propObject.objectName2}</h3>
            <h3>Object: {this.props.propObject.objectName3}</h3>
         </div>
      );
   }
}

App.propTypes = {
   propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object
}

App.defaultProps = {
   propArray: [1,2,3,4,5],
   propBool: true,
   propFunc: function(e){return e},
   propNumber: 1,
   propString: "String value...",
   
   propObject: {
      objectName1:"objectValue1",
      objectName2: "objectValue2",
      objectName3: "objectValue3"
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Neste capítulo, explicaremos a API do componente React. Discutiremos três métodos:setState(), forceUpdate e ReactDOM.findDOMNode(). Em novas classes ES6, temos que vincular isso manualmente. Nós vamos usarthis.method.bind(this) nos exemplos.

Definir estado

setState()método é usado para atualizar o estado do componente. Este método não substituirá o estado, mas apenas adicionará alterações ao estado original.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
	
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

Começamos com uma matriz vazia. Cada vez que clicarmos no botão, o estado será atualizado. Se clicarmos cinco vezes, obteremos a seguinte saída.

Forçar atualização

Às vezes, podemos querer atualizar o componente manualmente. Isso pode ser alcançado usando oforceUpdate() método.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Estamos definindo um número aleatório que será atualizado toda vez que o botão for clicado.

Encontre o Nó Dom

Para manipulação DOM, podemos usar ReactDOM.findDOMNode()método. Primeiro precisamos importarreact-dom.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

A cor de myDiv elemento muda para verde, uma vez que o botão é clicado.

Note - Desde a atualização 0.14, a maioria dos métodos API de componentes mais antigos foram descontinuados ou removidos para acomodar o ES6.

Neste capítulo, discutiremos os métodos de ciclo de vida do componente.

Métodos de Ciclo de Vida

• componentWillMount é executado antes da renderização, tanto no servidor quanto no cliente.

• componentDidMounté executado após a primeira renderização apenas no lado do cliente. É aqui que as solicitações AJAX e as atualizações de DOM ou de estado devem ocorrer. Este método também é usado para integração com outras estruturas JavaScript e quaisquer funções com execução atrasada, comosetTimeout ou setInterval. Estamos usando isso para atualizar o estado para que possamos acionar os outros métodos de ciclo de vida.

• componentWillReceivePropsé invocado assim que os adereços são atualizados antes que outro render seja chamado. Nós o acionamos desetNewNumber quando atualizamos o estado.

• shouldComponentUpdate deveria retornar true ou falsevalor. Isso determinará se o componente será atualizado ou não. Isso está definido paratruepor padrão. Se você tiver certeza de que o componente não precisa ser renderizado apósstate ou props estão atualizados, você pode retornar false valor.

• componentWillUpdate é chamado antes da renderização.

• componentDidUpdate é chamado logo após a renderização.

• componentWillUnmounté chamado depois que o componente é desmontado do dom. Estamos desmontando nosso componente emmain.js.

No exemplo a seguir, definiremos o statena função construtora. osetNewnumber é usado para atualizar o state. Todos os métodos de ciclo de vida estão dentro do componente Conteúdo.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Após a renderização inicial, obteremos a tela a seguir.

Neste capítulo, aprenderemos como usar formulários no React.

Exemplo Simples

No exemplo a seguir, definiremos um formulário de entrada com value = {this.state.data}. Isso permite atualizar o estado sempre que o valor de entrada muda. Nós estamos usandoonChange evento que observará as alterações de entrada e atualizará o estado de acordo.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Quando o valor do texto de entrada muda, o estado é atualizado.

Exemplo Complexo

No exemplo a seguir, veremos como usar formulários do componente filho. onChange método irá disparar a atualização de estado que será passada para a entrada filha valuee renderizados na tela. Um exemplo semelhante é usado no capítulo Eventos. Sempre que precisamos atualizar o estado do componente filho, precisamos passar a função que irá lidar com a atualização (updateState) como um suporte (updateStateProp)

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Isso produzirá o seguinte resultado.

Neste capítulo, aprenderemos como usar eventos.

Exemplo Simples

Este é um exemplo simples em que usaremos apenas um componente. Estamos apenas adicionandoonClick evento que irá desencadear updateState função uma vez que o botão é clicado.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated...'})
   }
   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Isso produzirá o seguinte resultado.

Eventos Infantis

Quando precisamos atualizar o state do componente pai de seu filho, podemos criar um manipulador de eventos (updateState) no componente pai e passá-lo como um suporte (updateStateProp) para o componente filho, onde podemos apenas chamá-lo.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState() {
      this.setState({data: 'Data updated from the child component...'})
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <button onClick = {this.props.updateStateProp}>CLICK</button>
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Isso produzirá o seguinte resultado.

o ref é usado para retornar uma referência ao elemento. Refs devem ser evitados na maioria dos casos, no entanto, eles podem ser úteis quando precisamos de medições DOM ou para adicionar métodos aos componentes.

Usando Refs

O exemplo a seguir mostra como usar refs para limpar o campo de entrada. ClearInput função procura por elemento com ref = "myInput" valor, redefine o estado e adiciona foco a ele depois que o botão é clicado.

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         data: ''
      }
      this.updateState = this.updateState.bind(this);
      this.clearInput = this.clearInput.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   clearInput() {
      this.setState({data: ''});
      ReactDOM.findDOMNode(this.refs.myInput).focus();
   }
   render() {
      return (
         <div>
            <input value = {this.state.data} onChange = {this.updateState} 
               ref = "myInput"></input>
            <button onClick = {this.clearInput}>CLEAR</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Depois que o botão é clicado, o input será limpo e focado.

Reagir keyssão úteis ao trabalhar com componentes criados dinamicamente ou quando suas listas são alteradas pelos usuários. Configurando okey valor manterá seus componentes identificados de forma única após a mudança.

Usando Chaves

Vamos criar dinamicamente Contentelementos com índice único (i). omap função irá criar três elementos de nosso dataarray. Desde okey valor precisa ser único para cada elemento, iremos atribuir i como uma chave para cada elemento criado.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Obteremos o seguinte resultado para os valores-chave de cada elemento.

Se adicionarmos ou removermos alguns elementos no futuro ou alterarmos a ordem dos elementos criados dinamicamente, o React usará o key valores para acompanhar cada elemento.

Neste capítulo, aprenderemos como configurar o roteamento para um aplicativo.

Etapa 1 - instalar um roteador React

Uma maneira simples de instalar o react-router é executar o seguinte trecho de código no command prompt janela.

C:\Users\username\Desktop\reactApp>npm install react-router

Etapa 2 - Criar componentes

Nesta etapa, criaremos quatro componentes. oAppcomponente será usado como um menu de guias. Os outros três componentes(Home), (About) e (Contact) são renderizados quando a rota é alterada.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
            </ul>
            {this.props.children}
         </div>
      )
   }
}
export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}
export default Home;

class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}
export default About;

class Contact extends React.Component {
   render() {
      return (
         <div>
            <h1>Contact...</h1>
         </div>
      )
   }
}
export default Contact;

Etapa 3 - Adicionar um roteador

Agora, vamos adicionar rotas ao aplicativo. Em vez de renderizarApp elemento como no exemplo anterior, desta vez o Routerserá processado. Também definiremos componentes para cada rota.

main.js

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>
), document.getElementById('app'))

Quando o aplicativo for iniciado, veremos três links clicáveis ​​que podem ser usados ​​para alterar a rota.

Flux é um conceito de programação, onde os dados estão uni-directional. Esses dados entram no aplicativo e fluem por ele em uma direção até serem renderizados na tela.

Elementos de fluxo

A seguir está uma explicação simples do fluxconceito. No próximo capítulo, aprenderemos como implementar isso no aplicativo.

• Actions - As ações são enviadas ao despachante para acionar o fluxo de dados.

• Dispatcher- Este é um hub central do aplicativo. Todos os dados são despachados e enviados para as lojas.

• Store- Store é o local onde o estado e a lógica do aplicativo são mantidos. Cada loja está mantendo um determinado estado e será atualizado quando necessário.

• View - o view receberá dados da loja e renderizará novamente o aplicativo.

O fluxo de dados é ilustrado na imagem a seguir.

Flux Pros

• O fluxo de dados direcional único é fácil de entender.
• O aplicativo é mais fácil de manter.
• As partes do aplicativo são desacopladas.

Neste capítulo, aprenderemos como implementar o padrão de fluxo em aplicações React. Nós vamos usarReduxestrutura. O objetivo deste capítulo é apresentar o exemplo mais simples de cada peça necessária para conectarRedux e React.

Etapa 1 - Instalar Redux

Vamos instalar o Redux através do command prompt janela.

C:\Users\username\Desktop\reactApp>npm install --save react-redux

Etapa 2 - Criar arquivos e pastas

Nesta etapa, criaremos pastas e arquivos para nosso actions, reducers, e components. Depois que terminarmos com isso, é assim que a estrutura de pastas ficará.

C:\Users\Tutorialspoint\Desktop\reactApp>mkdir actions
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir components
C:\Users\Tutorialspoint\Desktop\reactApp>mkdir reducers
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > actions/actions.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > reducers/reducers.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/AddTodo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/Todo.js
C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/TodoList.js

Etapa 3 - Ações

Ações são objetos JavaScript que usam typepropriedade para informar sobre os dados que devem ser enviados para a loja. Estamos definindoADD_TODOação que será usada para adicionar um novo item à nossa lista. oaddTodo função é um criador de ação que retorna nossa ação e define um id para cada item criado.

actions / actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

export function addTodo(text) {
   return {
      type: ADD_TODO,
      id: nextTodoId++,
      text
   };
}

Etapa 4 - Redutores

Embora as ações apenas acionem mudanças no aplicativo, o reducersespecificar essas mudanças. Nós estamos usandoswitch declaração para procurar um ADD_TODOaçao. O redutor é uma função que leva dois parâmetros (state e action) para calcular e retornar um estado atualizado.

A primeira função será usada para criar um novo item, enquanto a segunda irá empurrar esse item para a lista. No final, estamos usandocombineReducers função auxiliar onde podemos adicionar quaisquer novos redutores que possamos usar no futuro.

reducers / reducers.js

import { combineReducers } from 'redux'
import { ADD_TODO } from '../actions/actions'

function todo(state, action) {
   switch (action.type) {
      case ADD_TODO:
         return {
            id: action.id,
            text: action.text,
         }
      default:
         return state
   }
}
function todos(state = [], action) {
   switch (action.type) {
      case ADD_TODO:
         return [
            ...state,
            todo(undefined, action)
         ]
      default:
         return state
   }
}
const todoApp = combineReducers({
   todos
})
export default todoApp

Etapa 5 - Armazenar

A loja é um local que mantém o estado do aplicativo. É muito fácil criar uma loja depois de ter redutores. Estamos passando a propriedade da loja para oprovider elemento, que envolve nosso componente de rota.

main.js

import React from 'react'

import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import App from './App.jsx'
import todoApp from './reducers/reducers'

let store = createStore(todoApp)
let rootElement = document.getElementById('app')

render(
   <Provider store = {store}>
      <App />
   </Provider>,
	
   rootElement
)

Etapa 6 - Componente Raiz

o Appcomponente é o componente raiz do aplicativo. Apenas o componente raiz deve estar ciente de um redux. A parte importante a notar é oconnect função que é usada para conectar nosso componente raiz App ao store.

Esta função leva selectfuncionar como um argumento. A função de seleção pega o estado da loja e retorna os adereços (visibleTodos) que podemos usar em nossos componentes.

App.jsx

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { addTodo } from './actions/actions'

import AddTodo from './components/AddTodo.js'
import TodoList from './components/TodoList.js'

class App extends Component {
   render() {
      const { dispatch, visibleTodos } = this.props
      
      return (
         <div>
            <AddTodo onAddClick = {text =>dispatch(addTodo(text))} />
            <TodoList todos = {visibleTodos}/>
         </div>
      )
   }
}
function select(state) {
   return {
      visibleTodos: state.todos
   }
}
export default connect(select)(App);

Etapa 7 - Outros componentes

Esses componentes não devem estar cientes do redux.

componentes / AddTodo.js

import React, { Component, PropTypes } from 'react'

export default class AddTodo extends Component {
   render() {
      return (
         <div>
            <input type = 'text' ref = 'input' />
				
            <button onClick = {(e) => this.handleClick(e)}>
               Add
            </button>
         </div>
      )
   }
   handleClick(e) {
      const node = this.refs.input
      const text = node.value.trim()
      this.props.onAddClick(text)
      node.value = ''
   }
}

componentes / Todo.js

import React, { Component, PropTypes } from 'react'

export default class Todo extends Component {
   render() {
      return (
         <li>
            {this.props.text}
         </li>
      )
   }
}

componentes / TodoList.js

import React, { Component, PropTypes } from 'react'
import Todo from './Todo.js'

export default class TodoList extends Component {
   render() {
      return (
         <ul>
            {this.props.todos.map(todo =>
               <Todo
                  key = {todo.id}
                  {...todo}
               />
            )}
         </ul>
      )
   }
}

Quando iniciarmos o aplicativo, seremos capazes de adicionar itens à nossa lista.

Neste capítulo, aprenderemos como animar elementos usando React.

Etapa 1 - Instalar Grupo de Transições React CSS

Este é o complemento React usado para criar transições e animações CSS básicas. Vamos instalá-lo a partir docommand prompt janela -

C:\Users\username\Desktop\reactApp>npm install react-addons-css-transition-group

Etapa 2 - Adicionar um arquivo CSS

Vamos criar um novo arquivo style.css.

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > css/style.css

Para poder usá-lo no aplicativo, precisamos vinculá-lo ao elemento head em index.html.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <link rel = "stylesheet" type = "text/css" href = "./style.css">
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Etapa 3 - Aparecer animação

Criaremos um componente básico do React. oReactCSSTransitionGroupO elemento será usado como um invólucro do componente que queremos animar. Vai usartransitionAppear e transitionAppearTimeout, enquanto transitionEnter e transitionLeave são falsos.

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   render() {
      return (
         <div>
            <ReactCSSTransitionGroup transitionName = "example"
               transitionAppear = {true} transitionAppearTimeout = {500}
               transitionEnter = {false} transitionLeave = {false}>
					
               <h1>My Element...</h1>
            </ReactCSSTransitionGroup>
         </div>      
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

A animação CSS é muito simples.

css / style.css

.example-appear {
   opacity: 0.04;
}
.example-appear.example-appear-active {
   opacity: 2;
   transition: opacity 50s ease-in;
}

Assim que iniciarmos o aplicativo, o elemento aparecerá gradualmente.

Etapa 4 - entrar e sair das animações

As animações de entrada e saída podem ser usadas quando queremos adicionar ou remover elementos da lista.

App.jsx

import React from 'react';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         items: ['Item 1...', 'Item 2...', 'Item 3...', 'Item 4...']
      }
      this.handleAdd = this.handleAdd.bind(this);
   };
   handleAdd() {
      var newItems = this.state.items.concat([prompt('Create New Item')]);
      this.setState({items: newItems});
   }
   handleRemove(i) {
      var newItems = this.state.items.slice();
      newItems.splice(i, 1);
      this.setState({items: newItems});
   }
   render() {
      var items = this.state.items.map(function(item, i) {
         return (
            <div key = {item} onClick = {this.handleRemove.bind(this, i)}>
               {item}
            </div>
         );
      }.bind(this));
      
      return (
         <div>      
            <button onClick = {this.handleAdd}>Add Item</button>
				
            <ReactCSSTransitionGroup transitionName = "example" 
               transitionEnterTimeout = {500} transitionLeaveTimeout = {500}>
               {items}
            </ReactCSSTransitionGroup>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react'
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

css / style.css

.example-enter {
   opacity: 0.04;
}
.example-enter.example-enter-active {
   opacity: 5;
   transition: opacity 50s ease-in;
}
.example-leave {
   opacity: 1;
}
.example-leave.example-leave-active {
   opacity: 0.04;
   transition: opacity 50s ease-in;
}

Quando iniciamos o aplicativo e clicamos no Add Item botão, o prompt aparecerá.

Assim que inserirmos o nome e pressionarmos OK, o novo elemento aparecerá gradualmente.

Agora podemos excluir alguns dos itens (Item 3...) clicando nele. Este item desaparecerá da lista.

Componentes de ordem superior são funções JavaScript usadas para adicionar funcionalidades adicionais ao componente existente. Essas funções sãopure, o que significa que eles estão recebendo dados e retornando valores de acordo com esses dados. Se os dados mudarem, as funções de ordem superior serão executadas novamente com entrada de dados diferente. Se quisermos atualizar nosso componente de retorno, não precisamos alterar o HOC. Tudo o que precisamos fazer é alterar os dados que nossa função está usando.

Higher Order Component(HOC) envolve o componente "normal" e fornece entrada de dados adicionais. Na verdade, é uma função que pega um componente e retorna outro componente que envolve o original.

Vamos dar uma olhada em um exemplo simples para entender facilmente como esse conceito funciona. oMyHOC é uma função de ordem superior que é usada apenas para passar dados para MyComponent. Esta função levaMyComponent, aumenta com newData e retorna o componente aprimorado que será renderizado na tela.

import React from 'react';

var newData = {
   data: 'Data from HOC...',
}

var MyHOC = ComposedComponent => class extends React.Component {
   componentDidMount() {
      this.setState({
         data: newData.data
      });
   }
   render() {
      return <ComposedComponent {...this.props} {...this.state} />;
   }
};
class MyComponent extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.data}</h1>
         </div>
      )
   }
}

export default MyHOC(MyComponent);

Se executarmos o aplicativo, veremos que os dados são passados ​​para MyComponent.

Note- Componentes de ordem superior podem ser usados ​​para diferentes funcionalidades. Essas funções puras são a essência da programação funcional. Depois de se acostumar, você notará como seu aplicativo está se tornando mais fácil de manter ou atualizar.

Neste capítulo, listaremos as melhores práticas, métodos e técnicas do React que nos ajudarão a permanecer consistentes durante o desenvolvimento do aplicativo.

• State- O estado deve ser evitado tanto quanto possível. É uma boa prática centralizar o estado e passá-lo para baixo na árvore de componentes como suportes. Sempre que temos um grupo de componentes que precisam dos mesmos dados, devemos definir um elemento de contêiner em torno deles que manterá o estado. O padrão de fluxo é uma boa maneira de lidar com o estado em aplicativos React.

• PropTypes- Os PropTypes devem sempre ser definidos. Isso ajudará a rastrear todos os adereços no aplicativo e também será útil para qualquer desenvolvedor que esteja trabalhando no mesmo projeto.

• Render- A maior parte da lógica do aplicativo deve ser movida dentro do método de renderização. Devemos tentar minimizar a lógica nos métodos de ciclo de vida do componente e mover essa lógica no método de renderização. Quanto menos estado e adereços usarmos, mais limpo será o código. Devemos sempre tornar o estado o mais simples possível. Se precisarmos calcular algo a partir do estado ou adereços, podemos fazer isso dentro do método de renderização.

• Composition- A equipe React sugere o uso de um único princípio de responsabilidade. Isso significa que um componente deve ser responsável apenas por uma funcionalidade. Se alguns dos componentes tiverem mais de uma funcionalidade, devemos refatorar e criar um novo componente para cada funcionalidade.

• Higher Order Components (HOC)- Versões anteriores do React ofereciam mixins para lidar com funcionalidades reutilizáveis. Como os mixins agora estão obsoletos, uma das soluções é usar o HOC.