ReactJS - Guía rápida

ReactJS es una biblioteca de JavaScript que se utiliza para crear componentes de IU reutilizables. De acuerdo con la documentación oficial de React, la siguiente es la definición:

React es una biblioteca para crear interfaces de usuario componibles. Fomenta la creación de componentes de IU reutilizables, que presentan datos que cambian con el tiempo. Mucha gente usa React como la V en MVC. React abstrae el DOM de ti, ofreciendo un modelo de programación más simple y un mejor rendimiento. React también puede renderizar en el servidor usando Node, y puede impulsar aplicaciones nativas usando React Native. React implementa un flujo de datos reactivo unidireccional, lo que reduce la repetición y es más fácil de razonar que el enlace de datos tradicional.

Reaccionar características

JSX- JSX es una extensión de sintaxis de JavaScript. No es necesario utilizar JSX en el desarrollo de React, pero se recomienda.
Components- React tiene que ver con los componentes. Debe pensar en todo como un componente. Esto le ayudará a mantener el código cuando trabaje en proyectos de mayor escala.
Unidirectional data flow and Flux- React implementa un flujo de datos unidireccional que facilita el razonamiento sobre su aplicación. Flux es un patrón que ayuda a mantener sus datos unidireccionales.
License - React tiene licencia de Facebook Inc. La documentación tiene licencia CC BY 4.0.

Ventajas de React

Utiliza DOM virtual que es un objeto de JavaScript. Esto mejorará el rendimiento de las aplicaciones, ya que el DOM virtual de JavaScript es más rápido que el DOM normal.
Se puede utilizar en el lado del cliente y del servidor, así como con otros marcos.
Los patrones de componentes y datos mejoran la legibilidad, lo que ayuda a mantener aplicaciones más grandes.

Reaccionar Limitaciones

Cubre solo la capa de vista de la aplicación, por lo tanto, aún debe elegir otras tecnologías para obtener un conjunto completo de herramientas para el desarrollo.
Utiliza plantillas en línea y JSX, lo que puede parecer incómodo para algunos desarrolladores.

En este capítulo, le mostraremos cómo configurar un entorno para el desarrollo exitoso de React. Tenga en cuenta que hay muchos pasos involucrados, pero esto ayudará a acelerar el proceso de desarrollo más adelante. NecesitaremosNodeJS, así que si no lo tiene instalado, consulte el enlace de la siguiente tabla.

No Señor.	Software y descripción
1	NodeJS and NPM NodeJS es la plataforma necesaria para el desarrollo de ReactJS. Consulte nuestra configuración del entorno NodeJS .

Después de instalar con éxito NodeJS, podemos comenzar a instalar React usando npm. Puedes instalar ReactJS de dos formas

Usando webpack y babel.
Utilizando el create-react-app mando.

Instalación de ReactJS usando webpack y babel

Webpackes un paquete de módulos (gestiona y carga módulos independientes). Toma módulos dependientes y los compila en un solo paquete (archivo). Puede usar este paquete mientras desarrolla aplicaciones usando la línea de comando o configurándolo usando el archivo webpack.config.

Babel es un compilador y transpilador de JavaScript. Se utiliza para convertir un código fuente en otro. Al usar esto, podrá usar las nuevas funciones de ES6 en su código, donde babel lo convierte en el antiguo ES5 simple que se puede ejecutar en todos los navegadores.

Paso 1: cree la carpeta raíz

Crea una carpeta con nombre reactApp en el escritorio para instalar todos los archivos necesarios, utilizando el comando mkdir.

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

Para crear cualquier módulo, es necesario generar el package.jsonarchivo. Por lo tanto, después de crear la carpeta, necesitamos crear unpackage.jsonarchivo. Para hacerlo, debe ejecutar elnpm init comando desde el símbolo del sistema.

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

Este comando solicita información sobre el módulo, como el nombre del paquete, la descripción, el autor, etc. Puede omitirlos usando la opción –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"
}

Paso 2: instala React y react dom

Dado que nuestra tarea principal es instalar ReactJS, instálelo y sus paquetes dom, usando install react y react-domcomandos de npm respectivamente. Puede agregar los paquetes que instalamos, apackage.json archivo usando el --save opción.

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

O puede instalarlos todos con un solo comando como:

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

Paso 3: instala el paquete web

Dado que estamos usando webpack para generar paquetes de instalación de paquetes web, webpack-dev-server y 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

O puede instalarlos todos con un solo comando como:

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

Paso 4: instala babel

Instale babel y sus complementos babel-core, babel-loader, babel-preset-env, babel-preset-react y, 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

O puede instalarlos todos con un solo comando como:

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

Paso 5: crea los archivos

Para completar la instalación, necesitamos crear ciertos archivos, a saber, index.html, App.js, main.js, webpack.config.js y,.babelrc. Puede crear estos archivos manualmente o utilizandocommand 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

Paso 6: configurar el compilador, el servidor y los cargadores

Abierto webpack-config.jsarchivo y agregue el siguiente código. Estamos configurando el punto de entrada del paquete web para que sea main.js. La ruta de salida es el lugar donde se entregará la aplicación empaquetada. También estamos configurando el servidor de desarrollo para8001Puerto. Puede elegir el puerto que desee.

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'
      })
   ]
}

Abre el package.json y borrar "test" "echo \"Error: no test specified\" && exit 1" dentro "scripts"objeto. Estamos eliminando esta línea ya que no haremos ninguna prueba en este tutorial. Agreguemos elstart y build comandos en su lugar.

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

Paso 7: index.html

Esto es solo HTML normal. Estamos poniendodiv id = "app" como elemento raíz de nuestra aplicación y agregando index_bundle.js script, que es nuestro archivo de aplicación incluido.

<!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>

Paso 8: App.jsx y main.js

Este es el primer componente de React. Explicaremos los componentes de React en profundidad en un capítulo posterior. Este componente se renderizaráHello World.

App.js

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

Necesitamos importar este componente y renderizarlo en nuestra raíz. App elemento, para que podamos verlo en el navegador.

main.js

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

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

Note - Siempre que quiera usar algo, necesita importprimero. Si desea que el componente se pueda utilizar en otras partes de la aplicación, debeexport después de la creación e impórtelo en el archivo donde desea usarlo.

Crea un archivo con nombre .babelrc y copie el siguiente contenido.

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

Paso 9: ejecutar el servidor

La configuración está completa y podemos iniciar el servidor ejecutando el siguiente comando.

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

Mostrará el puerto que necesitamos abrir en el navegador. En nuestro caso, eshttp://localhost:8001/. Después de abrirlo, veremos el siguiente resultado.

Paso 10: generación del paquete

Finalmente, para generar el paquete, debe ejecutar el comando de compilación en el símbolo del sistema como:

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

Esto generará el paquete en la carpeta actual como se muestra a continuación.

Usando el comando create-react-app

En lugar de usar webpack y babel, puede instalar ReactJS más simplemente instalando create-react-app.

Paso 1: instale la aplicación create-react-app

Navegue por el escritorio e instale la aplicación Create React usando el símbolo del sistema como se muestra a continuación:

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

Esto creará una carpeta llamada my-app en el escritorio e instalará todos los archivos necesarios en ella.

Paso 2: elimina todos los archivos de origen

Navegue a través de la carpeta src en la carpeta my-app generada y elimine todos los archivos en ella como se muestra a continuación:

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

Paso 3: agregar archivos

Agregar archivos con nombres index.css y index.js en la carpeta src como -

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

En el archivo index.js agregue el siguiente código

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

Paso 4: ejecutar el proyecto

Finalmente, ejecute el proyecto usando el comando de inicio.

npm start

React usa JSX para crear plantillas en lugar de JavaScript normal. No es necesario usarlo, sin embargo, a continuación se presentan algunas ventajas que lo acompañan.

Es más rápido porque realiza la optimización al compilar código en JavaScript.
También es de tipo seguro y la mayoría de los errores se pueden detectar durante la compilación.
Hace que sea más fácil y rápido escribir plantillas, si está familiarizado con HTML.

Usando JSX

JSX parece un HTML normal en la mayoría de los casos. Ya lo usamos en el capítulo Configuración del entorno. Mira el código deApp.jsx donde volvemos div.

App.jsx

import React from 'react';

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

Aunque es similar a HTML, hay un par de cosas que debemos tener en cuenta al trabajar con JSX.

Elementos anidados

Si queremos devolver más elementos, debemos envolverlo con un elemento contenedor. Observe cómo estamos usandodiv como envoltorio para h1, h2 y 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 utilizar nuestros propios atributos personalizados además de las propiedades y atributos HTML habituales. Cuando queremos agregar un atributo personalizado, necesitamos usardata-prefijo. En el siguiente ejemplo, agregamosdata-myattribute como un 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;

Expresiones JavaScript

Las expresiones de JavaScript se pueden utilizar dentro de JSX. Solo necesitamos envolverlo con llaves.{}. El siguiente ejemplo representará2.

import React from 'react';

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

No podemos usar if else declaraciones dentro de JSX, en su lugar podemos usar conditional (ternary)Expresiones En el siguiente ejemplo, variablei igual a 1 para que el navegador renderice true, Si lo cambiamos a algún otro valor, representará 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;

Estilismo

React recomienda usar estilos en línea. Cuando queremos establecer estilos en línea, necesitamos usarcamelCasesintaxis. React también se agregará automáticamentepxdespués del valor numérico en elementos específicos. El siguiente ejemplo muestra cómo agregarmyStyle en línea 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;

Comentarios

Al escribir comentarios, debemos poner paréntesis. {}cuando queremos escribir un comentario dentro de la sección de niños de una etiqueta. Es una buena práctica usar siempre{} al escribir comentarios, ya que queremos ser coherentes al escribir la aplicación.

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;

Convenio de denominación

Las etiquetas HTML siempre usan lowercase nombres de etiquetas, mientras que los componentes de React comienzan con Uppercase.

Note - Deberías usar className y htmlFor como nombres de atributos XML en lugar de class y for.

Esto se explica en la página oficial de React como:

Dado que JSX es JavaScript, identificadores como class y forse desaconsejan como nombres de atributos XML. En cambio, los componentes de React DOM esperan nombres de propiedad DOM comoclassName y htmlFor, respectivamente.

En este capítulo, aprenderemos cómo combinar componentes para facilitar el mantenimiento de la aplicación. Este enfoque permite actualizar y cambiar sus componentes sin afectar el resto de la página.

Ejemplo sin estado

Nuestro primer componente en el siguiente ejemplo es App. Este componente es propietario deHeader y Content. Estamos creandoHeader y Content por separado y simplemente agregándolo dentro del árbol JSX en nuestro Appcomponente. SolamenteApp el componente necesita 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 poder representar esto en la página, necesitamos importarlo en main.js archivar y llamar reactDOM.render(). Ya hicimos esto mientras configuramos el entorno.

main.js

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

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

El código anterior generará el siguiente resultado.

Ejemplo con estado

En este ejemplo, estableceremos el estado del componente propietario (App). losHeaderEl componente simplemente se agrega como en el último ejemplo, ya que no necesita ningún estado. En lugar de etiqueta de contenido, estamos creandotable y tbody elementos, donde insertaremos dinámicamente TableRow para cada objeto del data formación.

Se puede ver que estamos usando la sintaxis de flecha de EcmaScript 2015 (=>) que se ve mucho más limpia que la antigua sintaxis de JavaScript. Esto nos ayudará a crear nuestros elementos con menos líneas de código. Es especialmente útil cuando necesitamos crear una lista con muchos elementos.

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 - Note que estamos usando key = {i} inside map()función. Esto ayudará a React a actualizar solo los elementos necesarios en lugar de volver a renderizar la lista completa cuando algo cambie. Es un gran impulso de rendimiento para una mayor cantidad de elementos creados dinámicamente.

Statees el lugar de donde provienen los datos. Siempre debemos intentar hacer nuestro estado lo más simple posible y minimizar el número de componentes con estado. Si tenemos, por ejemplo, diez componentes que necesitan datos del estado, deberíamos crear un componente contenedor que mantendrá el estado de todos ellos.

Usando el estado

El siguiente código de muestra muestra cómo crear un componente con estado utilizando la sintaxis 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'));

Esto producirá el siguiente resultado.

La principal diferencia entre el estado y los accesorios es que propsson inmutables. Esta es la razón por la que el componente contenedor debe definir el estado que se puede actualizar y cambiar, mientras que los componentes secundarios solo deben pasar datos del estado mediante accesorios.

Usando Props

Cuando necesitamos datos inmutables en nuestro componente, podemos simplemente agregar accesorios a reactDOM.render() funcionar en main.js y usarlo dentro de nuestro 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;

Esto producirá el siguiente resultado.

Accesorios predeterminados

También puede establecer valores de propiedad predeterminados directamente en el constructor del componente en lugar de agregarlo al 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'));

La salida es la misma que antes.

Estado y accesorios

El siguiente ejemplo muestra cómo combinar statey accesorios en tu aplicación. Estamos configurando el estado en nuestro componente principal y pasándolo por el árbol de componentes usandoprops. Dentro derender función, estamos configurando headerProp y contentProp utilizado en componentes secundarios.

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'));

El resultado volverá a ser el mismo que en los dos ejemplos anteriores, lo único que es diferente es la fuente de nuestros datos, que ahora proviene originalmente del state. Cuando queremos actualizarlo, solo necesitamos actualizar el estado y todos los componentes secundarios se actualizarán. Más sobre esto en el capítulo Eventos.

La validación de propiedades es una forma útil de forzar el uso correcto de los componentes. Esto ayudará durante el desarrollo a evitar errores y problemas futuros, una vez que la aplicación se vuelva más grande. También hace que el código sea más legible, ya que podemos ver cómo se debe usar cada componente.

Validación de apoyos

En este ejemplo, estamos creando App componente con todos los props que necesitamos. App.propTypesse utiliza para la validación de accesorios. Si algunos de los accesorios no usan el tipo correcto que asignamos, recibiremos una advertencia de consola. Después de especificar los patrones de validación, estableceremosApp.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'));

En este capítulo, explicaremos la API del componente React. Discutiremos tres métodos:setState(), forceUpdate y ReactDOM.findDOMNode(). En las nuevas clases de ES6, tenemos que vincular esto manualmente. Usaremosthis.method.bind(this) en los ejemplos.

Establecer estado

setState()El método se utiliza para actualizar el estado del componente. Este método no reemplazará el estado, solo agregará cambios al 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;

Comenzamos con una matriz vacía. Cada vez que hacemos clic en el botón, el estado se actualizará. Si hacemos clic cinco veces, obtendremos el siguiente resultado.

Forzar actualización

A veces, es posible que deseemos actualizar el componente manualmente. Esto se puede lograr utilizando elforceUpdate() 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 configurando un número aleatorio que se actualizará cada vez que se haga clic en el botón.

Buscar nodo Dom

Para la manipulación DOM, podemos usar ReactDOM.findDOMNode()método. Primero tenemos que 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;

El color de myDiv el elemento cambia a verde, una vez que se hace clic en el botón.

Note - Desde la actualización 0.14, la mayoría de los métodos de API de componentes más antiguos están obsoletos o eliminados para adaptarse a ES6.

En este capítulo, analizaremos los métodos del ciclo de vida de los componentes.

Métodos de ciclo de vida

componentWillMount se ejecuta antes de renderizar, tanto en el servidor como en el cliente.
componentDidMountse ejecuta después del primer renderizado solo en el lado del cliente. Aquí es donde deben ocurrir las solicitudes AJAX y DOM o actualizaciones de estado. Este método también se utiliza para la integración con otros marcos de JavaScript y cualquier función con ejecución retrasada, comosetTimeout o setInterval. Lo estamos usando para actualizar el estado para que podamos activar los otros métodos del ciclo de vida.
componentWillReceivePropsse invoca tan pronto como se actualizan los accesorios antes de que se llame a otro render. Lo activamos desdesetNewNumber cuando actualizamos el estado.
shouldComponentUpdate debería volver true o falsevalor. Esto determinará si el componente se actualizará o no. Esto está configurado paratruepor defecto. Si está seguro de que el componente no necesita renderizarse despuésstate o props están actualizados, puedes volver false valor.
componentWillUpdate se llama justo antes de renderizar.
componentDidUpdate se llama justo después de renderizar.
componentWillUnmountse llama después de que el componente se desmonta del dom. Estamos desmontando nuestro componente enmain.js.

En el siguiente ejemplo, estableceremos la inicial stateen la función constructora. lossetNewnumber se utiliza para actualizar el state. Todos los métodos del ciclo de vida están dentro del componente Contenido.

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);

Después del renderizado inicial, obtendremos la siguiente pantalla.

En este capítulo, aprenderemos cómo usar formularios en React.

Ejemplo simple

En el siguiente ejemplo, estableceremos un formulario de entrada con value = {this.state.data}. Esto permite actualizar el estado cada vez que cambia el valor de entrada. Estamos usandoonChange evento que observará los cambios de entrada y actualizará el estado en consecuencia.

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'));

Cuando cambie el valor del texto de entrada, el estado se actualizará.

Ejemplo complejo

En el siguiente ejemplo, veremos cómo usar formularios del componente hijo. onChange El método activará la actualización del estado que se pasará a la entrada secundaria valuey renderizado en la pantalla. Se utiliza un ejemplo similar en el capítulo Eventos. Siempre que necesitemos actualizar el estado del componente secundario, debemos pasar la función que manejará la actualización (updateState) como accesorio (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'));

Esto producirá el siguiente resultado.

En este capítulo, aprenderemos a usar eventos.

Ejemplo simple

Este es un ejemplo simple en el que solo usaremos un componente. Solo estamos agregandoonClick evento que disparará updateState función una vez que se hace clic en el botón.

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'));

Esto producirá el siguiente resultado.

Eventos para niños

Cuando necesitamos actualizar el state del componente padre de su hijo, podemos crear un controlador de eventos (updateState) en el componente principal y pasarlo como prop (updateStateProp) al componente hijo donde podemos simplemente llamarlo.

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'));

Esto producirá el siguiente resultado.

los ref se utiliza para devolver una referencia al elemento. Refs deben evitarse en la mayoría de los casos, sin embargo, pueden ser útiles cuando necesitamos mediciones DOM o para agregar métodos a los componentes.

Usando Refs

El siguiente ejemplo muestra cómo utilizar las referencias para borrar el campo de entrada. ClearInput función busca elemento con ref = "myInput" valor, restablece el estado y le agrega foco después de hacer clic en el botón.

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'));

Una vez que se hace clic en el botón, input será despejado y enfocado.

Reaccionar keysson útiles cuando se trabaja con componentes creados dinámicamente o cuando los usuarios modifican sus listas. Establecer elkey value mantendrá sus componentes identificados de forma única después del cambio.

Usando claves

Creemos dinámicamente Contentelementos con índice único (i). losmap función creará tres elementos de nuestra dataformación. Desde elkey El valor debe ser único para cada elemento, asignaremos i como clave para cada elemento creado.

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'));

Obtendremos el siguiente resultado para los valores clave de cada elemento.

Si agregamos o eliminamos algunos elementos en el futuro o cambiamos el orden de los elementos creados dinámicamente, React usará el key valores para realizar un seguimiento de cada elemento.

En este capítulo, aprenderemos a configurar el enrutamiento para una aplicación.

Paso 1 - Instale un enrutador React

Una forma sencilla de instalar el react-router es ejecutar el siguiente fragmento de código en el command prompt ventana.

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

Paso 2: crear componentes

En este paso, crearemos cuatro componentes. losAppEl componente se utilizará como menú de pestañas. Los otros tres componentes(Home), (About) y (Contact) se renderizan una vez que la ruta ha cambiado.

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;

Paso 3: agregar un enrutador

Ahora, agregaremos rutas a la aplicación. En lugar de renderizarApp elemento como en el ejemplo anterior, esta vez el Routerserá renderizado. También configuraremos componentes para cada ruta.

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'))

Cuando se inicia la aplicación, veremos tres enlaces en los que se puede hacer clic que se pueden usar para cambiar la ruta.

Flux es un concepto de programación, donde los datos son uni-directional. Estos datos ingresan a la aplicación y fluyen a través de ella en una dirección hasta que se representan en la pantalla.

Elementos de flujo

A continuación se ofrece una explicación sencilla de la fluxconcepto. En el próximo capítulo, aprenderemos cómo implementar esto en la aplicación.

Actions - Se envían acciones al despachador para activar el flujo de datos.
Dispatcher- Este es un eje central de la aplicación. Todos los datos se envían y envían a las tiendas.
Store- Tienda es el lugar donde se mantienen el estado y la lógica de la aplicación. Cada tienda mantiene un estado particular y se actualizará cuando sea necesario.
View - el view recibirá datos de la tienda y volverá a renderizar la aplicación.

El flujo de datos se muestra en la siguiente imagen.

Pros de Flux

El flujo de datos unidireccional es fácil de entender.
La aplicación es más fácil de mantener.
Las partes de la aplicación están desacopladas.

En este capítulo, aprenderemos cómo implementar patrones de flujo en aplicaciones React. UsaremosReduxmarco de referencia. El objetivo de este capítulo es presentar el ejemplo más simple de cada pieza necesaria para conectarRedux y React.

Paso 1: instalar Redux

Instalaremos Redux a través del command prompt ventana.

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

Paso 2: crear archivos y carpetas

En este paso, crearemos carpetas y archivos para nuestro actions, reducersy components. Una vez que hayamos terminado, así es como se verá la estructura de la carpeta.

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

Paso 3 - Acciones

Las acciones son objetos de JavaScript que utilizan typepropiedad para informar sobre los datos que deben enviarse a la tienda. Estamos definiendoADD_TODOacción que se utilizará para agregar un nuevo elemento a nuestra lista. losaddTodo La función es un creador de acciones que devuelve nuestra acción y establece un id para cada artículo creado.

actions / actions.js

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0;

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

Paso 4 - Reductores

Si bien las acciones solo desencadenan cambios en la aplicación, el reducersespecificar esos cambios. Estamos usandoswitch declaración para buscar un ADD_TODOacción. El reductor es una función que toma dos parámetros (state y action) para calcular y devolver un estado actualizado.

La primera función se utilizará para crear un nuevo elemento, mientras que la segunda empujará ese elemento a la lista. Hacia el final, estamos usandocombineReducers función de ayuda donde podemos agregar nuevos reductores que podamos usar en el futuro.

reductores / reductores.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

Paso 5 - Almacenar

La tienda es un lugar que guarda el estado de la aplicación. Es muy fácil crear una tienda una vez que tienes reductores. Estamos pasando la propiedad de la tienda alprovider elemento, que envuelve nuestro componente de ruta.

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
)

Paso 6 - Componente raíz

los Appcomponente es el componente raíz de la aplicación. Solo el componente raíz debe ser consciente de un redux. La parte importante a tener en cuenta es laconnect función que se utiliza para conectar nuestro componente raíz App al store.

Esta función toma selectfuncionar como un argumento. La función de selección toma el estado de la tienda y devuelve los accesorios (visibleTodos) que podemos utilizar en nuestros 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);

Paso 7 - Otros componentes

Estos componentes no deben conocer 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>
      )
   }
}

Cuando iniciemos la aplicación, podremos agregar elementos a nuestra lista.

En este capítulo, aprenderemos cómo animar elementos usando React.

Paso 1 - Instale React CSS Transitions Group

Este es el complemento React que se utiliza para crear animaciones y transiciones CSS básicas. Lo instalaremos desde elcommand prompt ventana -

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

Paso 2: agrega un archivo CSS

Creemos un nuevo archivo style.css.

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

Para poder usarlo en la aplicación, necesitamos vincularlo al elemento head en 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>

Paso 3 - Aparece la animación

Crearemos un componente React básico. losReactCSSTransitionGroupEl elemento se utilizará como envoltorio del componente que queremos animar. UsarátransitionAppear y transitionAppearTimeout, mientras transitionEnter y transitionLeave son falsas.

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'));

La animación CSS es muy sencilla.

css / style.css

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

Una vez que iniciamos la aplicación, el elemento se desvanecerá.

Paso 4 - Ingrese y salga de animaciones

Las animaciones de entrada y salida se pueden utilizar cuando queremos añadir o eliminar elementos de la 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;
}

Cuando iniciamos la aplicación y hacemos clic en el Add Item , aparecerá el mensaje.

Una vez que ingresamos el nombre y presionamos OK, el nuevo elemento se desvanecerá.

Ahora podemos eliminar algunos de los elementos (Item 3...) haciendo clic en él. Este elemento desaparecerá de la lista.

Los componentes de orden superior son funciones de JavaScript que se utilizan para agregar funcionalidades adicionales al componente existente. Estas funciones sonpure, lo que significa que están recibiendo datos y devolviendo valores de acuerdo con esos datos. Si los datos cambian, las funciones de orden superior se vuelven a ejecutar con una entrada de datos diferente. Si queremos actualizar nuestro componente de retorno, no tenemos que cambiar el HOC. Todo lo que tenemos que hacer es cambiar los datos que utiliza nuestra función.

Higher Order Component(HOC) envuelve el componente "normal" y proporciona una entrada de datos adicional. En realidad, es una función que toma un componente y devuelve otro componente que envuelve el original.

Echemos un vistazo a un ejemplo sencillo para comprender fácilmente cómo funciona este concepto. losMyHOC es una función de orden superior que se utiliza solo para pasar datos a MyComponent. Esta función tomaMyComponent, lo realza con newData y devuelve el componente mejorado que se renderizará en la pantalla.

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);

Si ejecutamos la aplicación, veremos que los datos se pasan a MyComponent.

Note- Los componentes de orden superior se pueden utilizar para diferentes funcionalidades. Estas funciones puras son la esencia de la programación funcional. Una vez que esté acostumbrado, notará cómo su aplicación se vuelve más fácil de mantener o actualizar.

En este capítulo, enumeraremos las mejores prácticas, métodos y técnicas de React que nos ayudarán a mantener la coherencia durante el desarrollo de la aplicación.

State- El estado debe evitarse tanto como sea posible. Es una buena práctica centralizar el estado y pasarlo al árbol de componentes como accesorios. Siempre que tengamos un grupo de componentes que necesiten los mismos datos, deberíamos establecer un elemento contenedor alrededor de ellos que mantendrá el estado. El patrón de flujo es una buena forma de manejar el estado en las aplicaciones React.
PropTypes- Los PropTypes siempre deben estar definidos. Esto ayudará a rastrear todos los accesorios en la aplicación y también será útil para cualquier desarrollador que trabaje en el mismo proyecto.
Render- La mayor parte de la lógica de la aplicación debe moverse dentro del método de render. Deberíamos intentar minimizar la lógica en los métodos del ciclo de vida de los componentes y mover esa lógica en el método de representación. Cuanto menos estado y accesorios usemos, más limpio será el código. Siempre debemos hacer que el estado sea lo más simple posible. Si necesitamos calcular algo a partir del estado o los accesorios, podemos hacerlo dentro del método render.
Composition- React team sugiere utilizar un principio de responsabilidad única. Esto significa que un componente solo debe ser responsable de una funcionalidad. Si algunos de los componentes tienen más de una funcionalidad, debemos refactorizar y crear un nuevo componente para cada funcionalidad.
Higher Order Components (HOC)- Las versiones anteriores de React ofrecían mixins para manejar funcionalidades reutilizables. Dado que los mixins ahora están en desuso, una de las soluciones es utilizar HOC.

↰ Previous page