import React, { Component } from 'react' import logo from './logo.svg' import './App.css' class Counter extends React.Component { constructor(props){ super(props) this.state = { value: 0 }; } incrementar = () => { if (this.state.value<this.props.maximo){ this.setState({value:this.state.value+1}) } }; decrementar = () => { if (this.state.value>0){ this.setState({value:this.state.value-1}) } }; reset=()=>{ this.setState({value:0}) } multiplicar=()=>{ this.setState({value:this.state.value*200}) } render() { return ( <div> <h2>{this.state.value}</h2> <button onClick={this.decrementar}>Decrementar</button> <button onClick={this.incrementar}>Incrementar</button> <button onClick={this.reset}>Reset</button> <button onClick={this.multiplicar}>Multiplicar</button> </div> ); } } export default function App() { return <Counter maximo="20"/>; }
React con eventos
import React, { Component } from 'react' class Counter extends React.Component { constructor(){ super() this.state = { value: 0 }; } incrementar = () => { this.setState({value:this.state.value+1}) }; decrementar = () => { this.setState({value:this.state.value-1}) }; render() { return ( <div> <h2>{this.state.value}</h2> <button onClick={this.decrementar}>Decrementar</button> <button onClick={this.incrementar}>Incrementar</button> </div> ); } } export default function App() { return <Counter />; }
Ejemplo Estado
import React from "react"; class Alumno extends React.Component { constructor(props) { super(props); this.state={nota:"Por determinar"} } cambiarNota=()=>{ this.setState({nota:10}) } render() { return ( <div> <h1>{this.props.nombre}</h1> <h2>{this.state.nota}</h2> <button type="button" onClick={this.cambiarNota} >Ver nota</button> </div> ); } } export default function App() { return ( <div> <Alumno nombre="Ana"/> <Alumno nombre="Eva"/> </div> ); }
State en React
import React from "react"; class Alumno extends React.Component { constructor(props) { super(props); this.state={nota:"Por determinar"} } render() { return ( <div> <h1>{this.props.nombre}</h1> <h2>{this.state.nota}</h2> </div> ); } } export default function App() { return ( <div> <Alumno nombre="Ana"/> <Alumno nombre="Eva"/> </div> ); }
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> ) }
Ejemplo de crear componentes con React
import React from 'react' class Imagen extends React.Component { render () { return ( <div className='gallery'> <a target='_blank' href={this.props.foto}> <img src={this.props.foto} alt={this.props.descripcion} width='600' height='400' /> </a> <div className='desc'>{this.props.descripcion}</div> </div> ) } } export default function App () { return ( <div> <Imagen foto='gato1.jpg' descripcion='Esto son dos lindos gatitos' /> <Imagen foto='gato2.jpg' descripcion='Me encanta su lindura' /> </div> ) }
Anidación de componentes
import React from "react"; class Habitante extends React.Component { render() { return <h2>{this.props.nombre}</h2>; } } class FondoBikini extends React.Component { render() { return ( <div> <h1>¿Quién vive en la piña debajo del {this.props.sitio}?</h1> <Habitante nombre="Bob Esponja" /> <Habitante nombre="Calamardo" /> <Habitante nombre="Patricio" /> </div> ); } } export default function App() { return ( <div> <FondoBikini sitio="mar" /> <FondoBikini sitio="subsuelo" /> <FondoBikini sitio="alcantarillado" /> </div> ); }
Ejercicio React con propiedades
Vamos a crear un componente ‘Suma’ al que le pasaremos dos propiedades llamadas num1 y num2 y nos mostrará:
La suma de num1 + num2 es igual a total
Me mostrará:
La suma de 4 y 5 es igual a 9
import React from "react"; class Suma extends React.Component { render() { let num1 = parseFloat(this.props.num1); let num2 = parseFloat(this.props.num2); let suma=num1+num2 return ( <h2> Suma de {num1} y {num2} es igual a {suma} </h2> ); } } export default function App() { return <Suma num1="14" num2="57" />; }
Otro ejemplo:
import React from "react"; class Suma extends React.Component { render() { let suma = 0; for (i = 1; i <= this.props.hasta; i++) { suma += i; } return ( <h2> La suma de todos los numeros hasta el {this.props.hasta} es {suma} </h2> ); } } export default function App() { return <Suma hasta="10" />; }
import React from "react"; class Suma extends React.Component { render() { // Asignamos las variobles con destructuring let {num1,num2}=this.props let suma=parseFloat(num1)+parseFloat(num2) return ( <h2> Suma de {num1} y {num2} es igual a {suma} </h2> ); } } export default function App() { return <Suma num1="14" num2="57" />; }
Ejemplos propiedades en Componentes
import React from "react"; class Alumno extends React.Component { constructor(){ super() } render() { return <h2>Me llamo {this.props.nombre}</h2>; } } export default function App() { return ( <article> <Alumno nombre="Ralph"/> <Alumno nombre="Lisa"/> </article> ); }
Varias propiedades:
import React from "react"; class Alumno extends React.Component { constructor(){ super() } render() { return ( <div> <h2>Me llamo {this.props.nombre}</h2> <h3>Y me gusta la asignatura de {this.props.asignatura}</h3> </div> ); } } export default function App() { return ( <article> <Alumno nombre="Ralph" asignatura="canicas"/> <Alumno nombre="Lisa" asignatura="Música"/> </article> ); }
Propiedades en la clase
class Alumno extends React.Component { render () { return <h2 className="{this.props.clase}">Me llamo Ralph</h2> } } function App () { return ( <div className='App bg-primary'> <Alumno clase="bg-success" /> </div> ) }
Propiedades en JS:
import React from "react"; class Alumnos extends React.Component { render () { const alumnos = [] for (let i = 0; i < this.props.cantidad; i++) { alumnos.push(<p key={i}>Alumno {i + 1}</p>) } return <div>{alumnos}</div> } } export default function App() { return ( <Alumnos cantidad="10"/> ); }
En este ejemplo y en el anterior creamos una tabla para agrupar diferentes elementos. Los elementos, como están repetidos, incluyen un ‘key’ que es algo que pide el React, pero que funciona si no lo ponemos y a lo que no le vamos a prestar atención.
class Tabla extends React.Component { render() { const tabla = []; for (let i = 1; i <= 10; i++) { tabla.push( <p key={i}> {this.props.numero} x {i} = {this.props.numero * i} </p> ); } return <div>{tabla}</div>; } } export default function App() { return <Tabla numero="7" />; }
Ejemplo React estático
import './App.css' import React from 'react' class Alumno extends React.Component { render () { return <h2>Me llamo Ralph</h2> } } function Cabecera () { return ( <header> <h1>Hola ¿Qué tal estamos?</h1> <p>Yo bien.</p> </header> ) } function Barra () { return ( <aside> <ul> <li>Opción 1</li> <li>Opción 2</li> <li>Opción 3</li> <li>Opción 4</li> </ul> </aside> ) } function Footer () { return ( <footer>Pie de pagina</footer> ) } function App () { return ( <div className='App'> <Cabecera /> <Alumno /> <Barra /> <Footer /> </div> ) } export default App