Etiqueta: react

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;

Getting started
Manejar arrays
Eventos y funciones

Lo básico

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'));

Para renderizar usamos:

ReactDOM.render(<p>Hola que tal</p>, document.getElementById('root'));

const elemento= (
  <table>
    <tr>
      <th>Nombre</th>
    </tr>
    <tr>
      <td>Eva</td>
    </tr>
    <tr>
      <td>Ana</td>
    </tr>
  </table>
);

ReactDOM.render(elemento, document.getElementById('root'));

Lo que se renderiza es JSX, HTML en JavaScript. Se pueden usar expresiones:

function App() {
    let a=5;
  return (
  
        <h1>React is {a + a} times better with JSX</h1>
      
  );
}

Tenemos dos maneras de ejecutar código en react. La más sencilla es incorporar los archivos a nuestra página con script:

 <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

La otra es instalar node y crear un archivo react:

https://nodejs.org/es/

Después instalar la posibilidad de react:

C:\Users\Your Name>npm install -g create-react-app

Y después crearla:

C:\Users\Your Name>npx create-react-app miappreact

Para ejecutar:

cd miappreact
npm start