La biblioteca React.js consiste en dividir la aplicación en varios componentes. Cada componente tiene su propio ciclo de vida. React nos proporciona algunos métodos integrados que podemos anular en etapas particulares del ciclo de vida del componente.
En los componentes basados en clases , el método render() es el único método requerido y el más importante de todos los ganchos/métodos de ciclo de vida integrados. En el método render(), podemos leer accesorios y estados y devolver nuestro código JSX al componente raíz de nuestra aplicación. En el método render(), no podemos cambiar el estado y no podemos causar efectos secundarios (como hacer una solicitud HTTP al servidor web).
Creación de la aplicación React e instalación del módulo:
-
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
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.
App.js
import React, { Component } from 'react'; export default class App extends Component { state = { PawriDays: [ { id: '123s', Day: 'Monday' }, { id: '234r', Day: 'Saturday' }, { id: '12d5', Day: 'Sunday' } ] } render() { const PartyDays = this.state.PawriDays.length const style = { 'textAlign': 'center', 'color': 'green' } // Return JSX code return ( <div style={style}> <h1>I am User</h1> <p> We party: {PartyDays} days a week </p> </div> ); } }
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por sugamgoyal123 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA