Método React.js render()

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.

Estructura del proyecto

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. 

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: