¿Cómo incrustar dos componentes en un componente?

En los componentes de ReactJS , es fácil crear una interfaz de usuario compleja de cualquier aplicación. Podemos dividir la interfaz de usuario de la aplicación en pequeños componentes y representar cada componente individualmente en la página web.

React nos permite renderizar un componente dentro de otro componente. Significa que podemos crear la relación padre-hijo entre los 2 o más componentes.

Requisitos previos: Los requisitos previos para este proyecto son:

• reaccionar conocimiento
• Componentes de clase

Creación de la aplicación: el siguiente comando lo ayudará a iniciar una nueva aplicación de reacción .

npx create-react-app testapp

A continuación, debe pasar a la carpeta del proyecto testapp desde la terminal.

cd testapp

Cree una nueva carpeta de componentes dentro de la carpeta src y cree dos componentes llamados archivos child1.jsx y child2.jsx dentro de ella.

Directorio del proyecto: Debería verse así.

Ejemplo: Anote los siguientes códigos en los archivos respectivos.

import React, { Component } from 'react';
   
class Child1 extends Component {
  render() {
    return (
      <li>
        This is child1 component.
      </li>
    );
  }
}
   
export default Child1;

import React, { Component } from 'react';
   
class Child2 extends Component {
  render() {
    return (
      <li>
        This is Child2 component.
      </li>        
    );
  }
}
   
export default Child2;

Ahora, cambiaremos el código predeterminado del archivo del componente App.js. Además, incrustaremos los componentes child1 y child2 dentro del componente App.

import React, { Component } from 'react';
import Child1 from './components/child1';
import Child2 from './components/child2';
   
class App extends Component {
  render() {
    return (
      <div>
        <div>This is a parent component</div>
        <Child1 />
        <Child2 />
      </div>
    );
  }
}
   
export default App;

Pasos para ejecutar: para iniciar la aplicación de reacción, ejecute el siguiente comando en su terminal y verifique que la aplicación de reacción funcione correctamente.

npm start

Salida: verá que la aplicación de reacción se inicia en localhost: 3000 sin ninguna dificultad. Aquí, el componente de la aplicación es un componente principal de los componentes child1 y child2.