Ejemplo React

import logo from './logo.svg';
import './App.css';
// Componente importado desde un archivo
import Despedida from './Despedida';

// Componente dentro del componente
const Saludo = (props) => {
  return <h1>Hola, {props.nombre}!</h1>;
}


// Componente Más o menos una función que nos devuelve una mezcla de HTML y JS
function App() {
  // Creo un array de nombres
  const alumnos=["Ana","Juan","Rosa","Eva"];
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Hola ¿Qué tal?
        </p>
        <a
          className="App-link"
          href="https://trifulcas.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Visita trifulcas
        </a>
        {/* Utilizo una expresión {} para recorrer el array y dibujar un componente por cada elemento*/}
        {alumnos.map((nombre,i)=>(
          <Saludo nombre={nombre} key={i}/>
        ))}
        <Despedida nombre="Juan"/>
      </header>
    </div>
   
  );
}

// Exportamos APP (y lo renderizamos en index.js)
export default App;