Ejemplo de componentes

Lista.js

const Lista = ({ items }) => items.map(x => <li key={x}>{x}</li>)

export default Lista

App2.js

const App = ({ nombre, apellido, edad }) => {
  return (
    <p>
      Ola {nombre} {apellido} k ase con esos {edad} añazos que tienes'??
    </p>
  )
}

export default App

App.js

import logo from './logo.svg'
import './App.css'
import App2 from './App2'
import Lista from './Lista'

const App = () => {
  let year = new Date().getFullYear()
  let nacimiento = 1980
  let alumnos = ['Ana', 'Juan', 'Eva']
  return (
    <div className='App'>
      <header className='App-header'>
        <img src={logo} className='App-logo' alt='logo' />
        <p>Hola que tal, yo bien</p>
 
        <App2 nombre='Ana' apellido='Pi' edad={year - nacimiento} />
        <ul>
          <Lista items={alumnos} />
        </ul>
      </header>
    </div>
  )
}

export default App