import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class Form extends Component { constructor(props) { super(props) this.initialState = { nombre: '', nota: '', } this.state = this.initialState; } cambio = event => { const {name, value} = event.target; console.log(name + "|" + value); this.setState({ [name]: value }) } enviar = () => { this.props.mas(this.state.nombre, this.state.nota); this.setState(this.initialState); } render() { return ( <form> <label>Nombre</label> <input type="text" name="nombre" value={this.state.nombre} onChange={this.cambio} /> <label>Nota</label> <input type="text" name="nota" value={this.state.nota} onChange={this.cambio} /> <input type="button" onClick={this.enviar} value="Añadir"/> </form> ); } } class Cabecera extends Component { render() { return ( <tr><th>Alumno</th><th>Nota</th></tr> ); } } ; class Fila extends Component { eliminar=(e)=>{ e.stopPropagation(); this.props.menos(this.props.indice); } render() { return ( <tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}> <td>{this.props.nombre}</td><td>{this.props.nota}</td> <td><input type="button" value="Borrar" onClick={this.eliminar}/></td> </tr> ); } } ; class Tabla extends Component { constructor(props) { super(props); this.state = { alumnos: this.props.alumnos, cont: 0 }; this.mas = this.mas.bind(this); } mas(nombre, nota) { this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]}); } menos = (index) => { this.setState({ alumnos: this.state.alumnos.filter((alumno, i) => i != index) }); } render() { const filas = this.state.alumnos.map((fila, index) => { return (<Fila key={index} indice={index} nombre={fila.nombre} nota={fila.nota} menos={this.menos} mas={this.mas}/>); } ); return ( <div> <Form mas={this.mas}/> <button onClick={() => this.mas("Ana", 6)}>Añadir</button> <button onClick={() => this.menos(0)}>Quitar</button> <table> <thead> <Cabecera/></thead> <tbody> {filas} </tbody> </table> </div> ); } } ; class App extends Component { render() { const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}, {nombre: "Eva", nota: 8}, {nombre: "Ot", nota: 7}]; return ( <Tabla alumnos={alumnos}/> ); } } ; export default App;
Categoría: JavaScript
Quitar elementos
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class Cabecera extends Component { render() { return ( <tr><th>Alumno</th><th>Nota</th></tr> ); } } ; class Fila extends Component { render() { return ( <tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}> <td>{this.props.nombre}</td><td>{this.props.nota}</td> </tr> ); } } ; class Tabla extends Component { constructor(props) { super(props); this.state = { alumnos: this.props.alumnos, cont: 0 }; this.mas = this.mas.bind(this); } mas(nombre, nota) { this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]}); } menos=(index)=>{ this.setState({ alumnos:this.state.alumnos.filter((alumno,i)=>i!=index) }); } render() { const filas = this.state.alumnos.map((fila, index) => { return (<Fila key={index} nombre={fila.nombre} nota={fila.nota} mas={this.mas}/>); } ); return ( <div> <button onClick={() => this.mas("Ana", 6)}>Añadir</button> <button onClick={() => this.menos(0)}>Quitar</button> <table> <thead> <Cabecera/></thead> <tbody> [ {filas} </tbody> </table> </div> ); } } ; class App extends Component { render() { const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}, {nombre: "Eva", nota: 8}, {nombre: "Ot", nota: 7}]; return ( <Tabla alumnos={alumnos}/> ); } } ; export default App;
Pasar funciones a componentes hijos
Un ejemplo:
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class Cabecera extends Component { render() { return ( <tr><th>Alumno</th><th>Nota</th></tr> ); } } ; class Fila extends Component { render() { return ( <tr onClick={() => this.props.mas(this.props.nombre, this.props.nota)}> <td>{this.props.nombre}</td><td>{this.props.nota}</td> </tr> ); } } ; class Tabla extends Component { constructor(props) { super(props); this.state = { alumnos: this.props.alumnos, cont: 0 }; this.mas = this.mas.bind(this); } mas(nombre, nota) { this.setState({alumnos: [...this.state.alumnos, {nombre: nombre, nota: nota}]}); } render() { const filas = this.state.alumnos.map((fila, index) => { return (<Fila key={index} nombre={fila.nombre} nota={fila.nota} mas={this.mas}/>); } ); return ( <div> <button onClick={() => this.mas("Ana", 6)}>Añadir</button> <table> <thead> <Cabecera/></thead> <tbody> {filas} </tbody> </table> </div> ); } } ; class App extends Component { render() { const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}]; return ( <Tabla alumnos={alumnos}/> ); } } ; export default App;
Ver círculo (II)
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class Circulo extends React.Component { render() { var circuloStyle = { padding: 10, margin: 20, display: "inline-block", backgroundColor: this.props.bgColor, borderRadius: "50%", width: 100, height: 100, }; return ( <div style={circuloStyle}> </div> ); } } function verCirculo(num) { let colores = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#FF2178","#e5d8bf","#00818a","#f54291","#ff0000"]; let circulos = []; for (let i = 0; i < num; i++) { let ran = Math.floor(Math.random() * colores.length); circulos.push(<Circulo key={i} bgColor={colores[ran]} />); } return circulos; } class VerCirculo extends React.Component { render() { return verCirculo(this.props.num); } } class App extends Component { constructor(props){ super(props); this.state={cont:0}; } foo=()=>{ this.setState({cont:this.state.cont+1}); } render() { return ( <div onClick={this.foo}> <VerCirculo num="3"/> {verCirculo(this.state.cont)} </div> ); } } export default App;
Ver Círculo (I)
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class Circulo extends React.Component { render() { var circuloStyle = { padding: 10, margin: 20, display: "inline-block", backgroundColor: this.props.bgColor, borderRadius: "50%", width: 100, height: 100 }; return ( <div style={circuloStyle}> </div> ); } } function verCirculo() { let colores = ["#393E41", "#E94F37", "#1C89BF", "#A1D363"]; let ran = Math.floor(Math.random() * colores.length); return <Circulo bgColor={colores[ran]} />; } class App extends Component { render() { return ( <div> {verCirculo()}{verCirculo()}{verCirculo()} </div> ); } } export default App;
Diferencias entre usar funciones con bind o arrow functions
Librerías JS para juegos
Ejemplo estado Tabla
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class Cabecera extends Component { render() { return ( <tr><th>Alumno</th><th>Nota</th></tr> ); } } ; class Fila extends Component { render() { return ( <tr ><td>{this.props.nombre}</td><td>{this.props.nota}</td></tr> ); } } ; class Tabla extends Component { constructor(props) { super(props); this.state = { alumnos: this.props.alumnos, cont: 0 }; //this.mas = this.mas.bind(this); } mas=()=> { this.setState({alumnos: [...this.state.alumnos, {nombre: "Ana", nota: 6}]}); } render() { const filas = this.state.alumnos.map((fila, index) => { return (<Fila key={index} nombre={fila.nombre} nota={fila.nota}/>); } ); return ( <div> <button onClick={this.mas}>Añadir</button> <table> <thead> <Cabecera/></thead> <tbody> {filas} </tbody> </table> </div> ); } } ; class App extends Component { render() { const alumnos = [{nombre: "Ana", nota: 6}, {nombre: "Pep", nota: 4}]; return ( <Tabla alumnos={alumnos}/> ); } }; export default App;
Enlaces React
Componentes
Podemos encapsular diferentes códigos y propiedades dentro de componentes. Un ejemplo sencillo:
class Componente extends React.Component { render() { return <h2>Soy un componente to chulo</h2>; } } ReactDOM.render(<Componente />, document.getElementById('root'));
Los componentes pueden tener constructores:
class Componente extends React.Component { constructor() { super(); this.adjetivo ="to chulo"; } render() { return <h2>Soy un componente {this.adjetivo}</h2>; } }
Y propiedades que podemos pasar desde la renderización:
class Componente extends React.Component { constructor(props) { super(props); } render() { return <h2>Soy un componente {this.props.adjetivo}</h2>; } } ReactDOM.render(<Componente adjetivo="to guapo"/>, document.getElementById('root'));
Otro ejemplo accediendo a la propiedad children:
class Componente extends React.Component { constructor(props) { super(props); } render() { return <h2>Soy un componente {this.props.children} {this.props.children}</h2>; } } ReactDOM.render(<Componente>to guapo</Componente>, document.getElementById('root'));
Con estilos:
class Componente extends React.Component { constructor(props) { super(props); } render() { const componenteStyle={ color:this.props.color }; return <h2 style={componenteStyle}>Soy un componente {this.props.children} {this.props.children}</h2>; } } ReactDOM.render(<Componente color="yellow">to guapo</Componente>, document.getElementById('root'));
Propiedades por defecto:
class Componente extends React.Component { constructor(props) { super(props); } render() { const componenteStyle = { color: this.props.color }; return <h2 style={componenteStyle}>Soy un componente {this.props.children} {this.props.children}</h2>; } } Componente.defaultProps = { color: 'red' }; ReactDOM.render(<Componente >to guapo</Componente>, document.getElementById('root'));
Componentes anidados:
class Square extends React.Component { render() { var squareStyle = { height: 150, backgroundColor: this.props.color }; return ( <div style={squareStyle}> </div> ); } } class Label extends React.Component { render() { var labelStyle = { fontFamily: "sans-serif", fontWeight: "bold", padding: 13, margin: 0 }; return ( <p style={labelStyle}>{this.props.color}</p> ); } } class Card extends React.Component { render() { var cardStyle = { height: 200, width: 150, padding: 0, backgroundColor: "#FFF", boxShadow: "0px 0px 5px #666" }; return ( <div style={cardStyle}> <Square color={this.props.color}/> <Label color={this.props.color}/> </div> ); } } ReactDOM.render(<Card color="#FE0056"/>, document.getElementById('root'));