import React, { Component } from 'react' class Asterisco extends React.Component { constructor(props){ console.log("Entro en el constructor"); super(props) this.state = { cadena: '*' }; } incrementar = () => { this.setState({cadena:this.state.cadena+'*'}) }; decrementar = () => { let a=this.state.cadena if (a.length>0){ this.setState({cadena:a.slice(0,-1)}) } }; reset=()=>{ this.setState({cadena:'*'}) } shouldComponentUpdate() { if (this.state.cadena.length%2==0){ return false; } else{ return true; } } render() { console.log("Entro en el renderizado"); return ( <div> <h2>{this.state.cadena}</h2> <h3>El fabuloso programa de jugar con los asteriscos</h3> <p>En este momento tienes {this.state.cadena.length} asteriscos</p> <button onClick={this.decrementar}>Decrementar</button> <button onClick={this.incrementar}>Incrementar</button> <button onClick={this.reset}>Reset</button> </div> ); } componentDidMount(){ console.log("Componente montado y listo para funcionar"); } componentDidUpdate(){ console.log("El componente se ha actualizado"); } } export default function App() { return <Asterisco/>; }
Ejercicio React
Crear un componente con un h1 en el que vamos a tener un asterisco:
*
También un botón que al pulsarlo nos añada otro asterisco:
[Añadir]
***
Otro botón [Quitar] Que nos quite un asterisco
import React, { Component } from 'react' class Asterisco extends React.Component { constructor(props){ super(props) this.state = { cadena: '*' }; } incrementar = () => { this.setState({cadena:this.state.cadena+'*'}) }; decrementar = () => { let a=this.state.cadena if (a.length>0){ this.setState({cadena:a.slice(0,-1)}) } }; reset=()=>{ this.setState({cadena:'*'}) } render() { return ( <div> <h2>{this.state.cadena}</h2> <h3>El fabuloso programa de jugar con los asteriscos</h3> <p>En este momento tienes {this.state.cadena.length} asteriscos</p> <button onClick={this.decrementar}>Decrementar</button> <button onClick={this.incrementar}>Incrementar</button> <button onClick={this.reset}>Reset</button> </div> ); } } export default function App() { return <Asterisco/>; }
Contador v.2
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" />; }