Soy nuevo en React.js y estoy tratando de usarlo para crear un sitio web. Lo que intento hacer es anidar un componente secundario dentro de un componente principal; el componente principal debe representarse en la página principal con el componente secundario anidado dentro. He incluido un ejemplo a continuación de mi intento.

Mi enfoque hasta ahora ha sido

1. Cree el componente secundario en 'childComponent.js'
2. Exporte ese componente secundario como 'childComponent'
3. Importar 'childComponent' al componente principal
4. Render 'childComponent' en ese componente principal
5. Exporte ese componente principal como 'parentComponent'
6. Importar 'parentComponent' a 'index.js'
7. Representar 'parentComponent' en 'index.js'

El problema aquí es que 'childComponent' nunca está visible en mi aplicación React. ¿Estoy tomando el enfoque equivocado aquí? ¿Hay alguna mecánica fundamental que no estoy entendiendo?

¡¡Gracias por adelantado!!

--

El componente secundario (childComponent.js):

 import React, { Component } from 'react'; import './childComponent.css'; class childComponent extends Component { render() { return ( <div className="child-component"> <span>Hello World</span> </div> ); } } export default childComponent

childComponent.css:

 .child-component { width: 100vw; height: 300pt; background-color: #F4F4F4; display: flex block; justify-content: center; align-items: center; align-content: center; }

El componente principal (parentComponent.js):

 import React, { Component } from 'react'; import childComponent from './childComponent.js'; import './parentComponent.css'; class parentComponent extends Component { render() { return ( <div className="parent-component"> <childComponent></childComponent> </div> ); } } export default parentComponent;

La página principal (index.js):

 import React from 'react'; import ReactDOM from 'react-dom'; import parentComponent from './parentComponent'; import './index.css'; ReactDOM.render( <parentComponent/>, document.getElementById('root') );