Ejercicio componentes React

Crear un componente al que le pasemos como props un numero y nos muestre la tabla de multiplicar de ese número.

Crear un componente al que le pasemos como props un ancho y un alto y nos cree una tabla de ese ancho y ese alto con números consecutivos. Ej ancho 3, alto 2:

1 2 3
4 5 6

Crear un componente al que le pasemos un nombre y nos pinte el nombre al revés.

Para practicar: Ejercicios React

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

React, the beginning

Para empezar:

https://www.w3schools.com/react/default.asp

https://ibaslogic.com/react-tutorial-for-beginners/

https://leanpub.com/reactjsforthevisuallearner/read#leanpub-auto-chapter-1–what-is-this-all-about

Para seguir:

https://fullstackopen.com/es/about

Hooks:

https://css-tricks.com/react-hooks-the-deep-cuts/

https://usehooks.com/

https://www.freecodecamp.org/news/react-hooks-fundamentals/

Ebook:

Reactjs_Succinctly