React.js: crear componentes

Para tenerlo todo bien organizado lo mejor es crear una carpeta components en src y una subcarpeta para cada uno de los componentes.

Por ejemplo para crear el header sería:

src/components/header/Header.js

Los componentes SIEMPRE tienen que estar capitalizados.

Header.js:

import React from 'react';

export default function Header({titulo, parrafo}) {

    return(

        <div className="jumbotron text-center" style={{marginBottom:0}}>

            <h1>{titulo}</h1>

            <p>{parrafo}</p> 

        </div>

    ) 

}

Y luego en el App.js:

import Header from './components/header/Header';

...

let objHeader = {

titulo:"Mi primer sitio en Bootstrap 4",

parrafo:"y encima este sitio es reponsive"

}; 

return (

    <div>

      <Header 

        titulo={objHeader.titulo} 

        parrafo={objHeader.parrafo}

      />

</div>

)