sejas/react-intro-bootcamp-2018.md

Introducción a React - Bootcamp 2018

Bootcamp Intro

My name is Antonio Sejas, I am a React Trainer and this is my intro for 20h bootcamp in 2018

<a href="https://sejas.es" target="_blank"><strong>FullStack &amp; Mobile Remote Developer</strong></a>, Ingeniero Superior en Informática (UPM), Mongo Developer Certified (MongoDB University) y mentor de <a href="https://reactjs.org/" target="_blank"><strong>React</strong></a> de los estudiantes de Udacity.
Con más de 10 años de experiencia, he desarrollado software para grandes marcas como Telefónica, BlackBerry, Randstad, General Electric, Udacity y Pernod Ricard.
Apasionado de la educación, me encanta aprender y compartir conocimientos a través del <a href="https://github.es" target="_blank"><strong>open source</strong></a>.

01 Scripts y div #root

Introducción a React - 01 Scripts y div #root

<!DOCTYPE html>
<!-- https://github.com/reactspain/curso-introduccion-react/blob/01-scripts-div-root/index.html -->
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mi primera aplicación de React by JSSchool</title>
    <!-- Scripts -->
    <!-- 0.- Librería React -->
    <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"> </script>
    <!-- 1.- Librería Auxiliar React para renderizar Dom -->
    <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"> </script>
    <!-- 2.- Traductor de JSX y ES6 -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <!-- /End Scripts -->
</head>
<body>
    <!-- 3.- Etiqueta Raíz donde se renderizará nuestra app -->
    <div id="root"></div>
    <!-- 4.- Código de nuestra app React -->
    <script src="index.jsx" type="text/babel"> </script>
</body>
</html>

02 Primer componente Hola Mundo

Introducción a React - 02 Primer componente Hola Mundo

//https://github.com/reactspain/curso-introduccion-react/blob/02-primer-componente/index.jsx
'use strict'
// 0.- Nuestro primer componente
class Hola extends React.Component {
    render() {
        return <h1>¡Hola Mundo!</h1>;
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    <Hola />,
    document.getElementById("root")
)

03 Props o Propiedades

Introducción a React - 03 Props o Propiedades

//https://github.com/reactspain/curso-introduccion-react/blob/03-props/index.jsx
'use strict'
// 0.- Nuestro primer componente
class Hola extends React.Component {
    render() {
        // 2.- mostrar la propiedad `quien`
        return <h1>¡Hola {this.props.quien}!</h1>;
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    // 3.- Pasar un mensaje en la propiedad `quien`
    <Hola quien="Universo React" />,
    document.getElementById("root")
)

04 Props o Propiedades

Introducción a React - 04 Props o Propiedades

'use strict'
// 0.- Nuestro primer componente
class Hola extends React.Component {
    render() {
        // 2.- mostrar la propiedad `quien`
        return <h1>¡Hola {this.props.quien}!</h1>;
    }
}
// 4.- Definimos un componente que renderiza otro componente
class App extends React.Component {
    render() {
        return <Hola quien="Universo React" />;
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    // 3.- Pasar un mensaje en la propiedad `quien`
    <App />,
    document.getElementById("root")
)

05 State o Estado

Introducción a React - 05 State o Estado

'use strict'
// 0.- Nuestro primer componente
class Hola extends React.Component {
    // 5.- Añadimos la propiedad state
    state = {
        emoticono: '😎'
    }
    render() {
        // 2.- mostrar la propiedad `quien`
        return <h1>¡Hola {this.props.quien} {this.state.emoticono}!</h1>;
    }
}
// 4.- Definimos un componente que renderiza otro componente
class App extends React.Component {
    render() {
        return <Hola quien="Universo React" />;
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    // 3.- Pasar un mensaje en la propiedad `quien`
    <App />,
    document.getElementById("root")
)

06 setState para cambiar el valor del estado

Introducción a React - 06 setState para cambiar el valor del estado

'use strict'
// 0.- Nuestro primer componente
class Hola extends React.Component {
    // 5.- Añadimos la propiedad state
    state = {
        emoticono: '😎'
    }
    // 6.- Método donde utilizamos la funcion `setState`
    cambiarEmoticono() {
        let emoticono = '🤩'
        if (emoticono === this.state.emoticono){
            emoticono = '😎'
        }
        this.setState({emoticono})
    }
    render() {
        // 2.- mostrar la propiedad `quien`
        return <h1>¡Hola {this.props.quien} {this.state.emoticono}!</h1>;
    }
}
// 4.- Definimos un componente que renderiza otro componente
class App extends React.Component {
    render() {
        return <Hola quien="Universo React" />;
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    // 3.- Pasar un mensaje en la propiedad `quien`
    <App />,
    document.getElementById("root")
)

07 onClick interacciones con el usuario

Introducción a React - 07 onClick interacciones con el usuario

'use strict'
// 0.- Nuestro primer componente
class Hola extends React.Component {
    // 5.- Añadimos la propiedad state
    state = {
        emoticono: '😎'
    }
    // 6.- Método donde utilizamos la funcion `setState`
    cambiarEmoticono = () => {
        let emoticono = '🤩'
        if (emoticono === this.state.emoticono){
            emoticono = '😎'
        }
        this.setState({emoticono})
    }
    render() {
        // 2.- mostrar la propiedad `quien`
        // 7.- añadimos un botón con el atributo onClick
        return  <div>
                    <h1>¡Hola {this.props.quien} {this.state.emoticono}!</h1>
                    <button onClick={this.cambiarEmoticono}>Cambiar estado</button>
                </div>;
    }
}
// 4.- Definimos un componente que renderiza otro componente
class App extends React.Component {
    render() {
        return <Hola quien="Universo React" />;
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    // 3.- Pasar un mensaje en la propiedad `quien`
    <App />,
    document.getElementById("root")
)

Ejercicio Básico Presidentes

Ejercicio Basico Presidentes React

class Presidentes extends React.Component {
    presidentes = [
        { nombre: "Rajoy", status: "funcionario" },
        { nombre: "Felipe González", status: "retirado" },
        { nombre: "Aznar", status: "retirado" },
        { nombre: "Pedro Sanchez", status: "presidente" },
    ]
    render() {
        return this.presidentes
            .filter(p => "presidente" !== p.status)
            .map(p => (<div key={p.nombre}>{p.nombre}</div>))
    }
}
// 1.- Renderizar nuestra App
ReactDOM.render(
    // 3.- Pasar un mensaje en la propiedad `quien`
    <Presidentes />,
    document.getElementById("root")
)

Ejemplos de ejercicios

Ejemplos de ejercicios

extend.jsx

class Hola {
    render() {
        return <h1>¡Hola {this.props.mundo}!</h1>;
    }
}

filter-map.jsx

class Prueba extends React.Component {
    contactos = [
        { nombre: "Rajoy", status: "funcionario" },
        { nombre: "Felipe González", status: "retirado" },
        { nombre: "Aznar", status: "retirado" },
        { nombre: "Pedro Sanchez", status: "presidente" },
    ]
    render() {
        return this.contactos
            .filter(c => "presidente" !== c.status)
            .map(c => (<div key={c.nombre}>{c.nombre}</div>))
    }
}

sejas/react-intro-bootcamp-2018.md

Select an option

No results found

Select an option

No results found

Introducción a React - Bootcamp 2018

Bootcamp Intro

01 Scripts y div #root

02 Primer componente Hola Mundo

03 Props o Propiedades

04 Props o Propiedades

05 State o Estado

06 setState para cambiar el valor del estado

07 onClick interacciones con el usuario

Ejercicio Básico Presidentes

Ejemplos de ejercicios