¿Cuál es el significado del operador de propagación (…) en Reactjs?

La sintaxis de los tres puntos (…) es parte de ES6 y no de React en sí, y la utilizan dos operadores, es decir, los operadores Spread y Rest . El operador Spread le permite expandir un iterable como un objeto, una string o una array en sus elementos, mientras que el operador Rest hace lo contrario al reducir un conjunto de elementos en una array.

El operador de extensión es muy útil cuando desea hacer una copia exacta de una array existente, puede usar el operador de extensión para lograr esto rápidamente.

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2:  después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

Ejemplo:

• Aplicación.js:

  JavaScript

  import React, { Component } from 'react';    // Details is a component in same folder import Details from './Details';  class App extends React.Component {      render() {     var person = {       name: 'User',       age: 22     };        return (       <div>         {/* Details component which accepts props */}         <Details {...person} title='Dear' />       </div>     );   } }    export default App;

• Details.js (componente de detalles):

  JavaScript

  import React, { Component } from 'react';    class Details extends React.Component {   render() {     // To extract values in variables sent by parent component     const { name, age } = { ...this.props };     return (       <div>         <h3>Person Details: </h3>         <ul>           <li>name={this.props.title} {name}</li>           <li>age={age}</li>         </ul>       </div>     );   } }    export default Details;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start