Ejercicios React

Paso 1:
Vamos a crear una ficha de empleado que consiste en un h1 con el nombre y un h2 con el cargo

Crear un componente ‘Empleado’ que incorpore esos elementos. Ponemos valores de ejemplo

Ese componente lo devolvemos en App

Paso 2:
Lo mismo que antes pero el nombre y el cargo lo pasamos como propiedad

Paso 3: Ponemos tres empleados con diferentes nombres y cargos en la App

Paso 4: (Para valientes) ponemos una foto que se pasa como propiedad

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'

class Empleado extends React.Component {
  render () {
    return (
      <div>
        <h1>{this.props.nombre}</h1>
        <h2>{this.props.cargo}</h2>
        <img src={this.props.foto} width='200' />
      </div>
    )
  }
}

export default function App () {
  return (
    <div style={{ display: 'flex' }}>
      <Empleado nombre='Ana' cargo='CEO' foto='/img/gato1.jpg' />
      <Empleado nombre='EVA' cargo='CTO' foto='/img/gato2.jpg' />
      <Empleado nombre='Pep' cargo='Becario' foto='/logo512.png' />
    </div>
  )
}