Explicar el propósito de render() en ReactJS

La biblioteca React.js tiene dos componentes:

• Componentes de clase
• Componentes funcionales

Los componentes de clase utilizan la función de representación. La función ReactDOM.render() toma dos argumentos, código HTML y un elemento HTML.

Propósito de render():

• React renderiza HTML en la página web usando una función llamada render().
• El propósito de la función es mostrar el código HTML especificado dentro del elemento HTML especificado.
• 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).

Entendamos la función render con un ejemplo.

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, muévase a ella con el siguiente comando.

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Ahora escriba el siguiente código en el archivo 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 utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida: