Trifulcas

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;

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;

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;

https://blog.usejournal.com/arrow-functions-are-disrupting-react-components-63662d35f97b

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