Professional Documents
Culture Documents
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
BIENVENID@!
Hola! Muchas gracias por descargarte esta gua con la que espero sea tu
primera andadura con React.js
React es solo la puerta de entrada y quiero abrirte paso a este mundo con
esta gua.
Vamos a ello!
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
Por tanto, nuestro fichero HTML tendr que incluir los siguientes scripts
antes del cierre del </body> incluyendo las libreras que estarn alojadas en
un CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"/>
Adems debemos incluir al menos un <div> con un ID, para poderlo llamar
despus con React-DOM
<div id="app"></div>
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mi primera App React</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"/>
<script type="text/babel" src="app.js"></script>
</body>
</html>
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
Creamos una clase de ES2015 con el nombre App y que hereda o extiende
de React.Component. Antiguamente se utilizaba la funcin
React.createClass para crear componentes, pero con la nueva versin de
JavaScript, es ms correcto y cmodo utilizar la sintaxis de Clase.
Dentro del mtodo render de la clase, estamos escribiendo cdigo JSX, muy
parecido a HTML pero no lo es. Esto simplemente indica que representacin
visual tendr ste componente en el DOM.
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
Lo nico que hacemos es devolver un tag <ul> (una lista) y con el mtodo
map de JavaScript recorremos un array this.props.empleados, es decir un
array empleados que vamos a recibir por las propiedades desde el padre
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
Para ello vamos a hacer uso del estado de los componentes en React.
Por tanto, vamos a modificar un poco el componente App.js para que tenga
estado y su estado inicial contenga el array de objetos empleado.
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
render () {
return (
<ListaEmpleados empleados={this.state.empleados} />
);
}
}
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
Al contrario que los datos, que fluyen de padres a hijos a travs de las
propiedades, los eventos fluyen hacia arriba. Son disparados por un hijo y el
padre puede recogerlo y as modificar lo que sea necesario.
Por tanto, lo que toca ahora es modificar el componente <App> para que
recoja ese evento, lo maneje y cambie el estado:
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
handleOnAddEmployee (event) {
event.preventDefault();
let empleado = {
nombre: event.target.nombre.value,
email: event.target.email.value
};
this.setState({
empleados: this.state.empleados.concat([empleado])
});
}
Cuando esto ocurra, como hemos dicho, llamar al mtodo render y volver
a renderizar el componente <ListaEmpleados> con el nuevo empleado.
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
handleOnAddEmployee (event) {
event.preventDefault();
let empleado = {
nombre: event.target.nombre.value,
email: event.target.email.value
};
this.setState({
empleados: this.state.empleados.concat([empleado])
});
}
Cuando esto ocurra, como hemos dicho, llamar al mtodo render y volver
a renderizar el componente <ListaEmpleados> con el nuevo empleado.
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
CUNTAME TU OPININ!
Qu te ha parecido? ya conoces el funcionamiento bsico de React y te sirve
como punto de partida para empezar a profundizar con esta librera.
No te preocupes si no entiendes mucho de esta gua, como todo inicio con una
nueva librera, framework o lenguaje, los comienzos cuestan. En los prximos
das recibirs algunos emails extra en los que te voy a seguir explicando cosas
del mundo React.
Si has recibido esta gua por otro medio, te recomiendo que te suscribas a mi
lista para recibir los artculos extra.
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
Un saludo,
Carlos
@carlosazaustre
CARLOSAZAUSTRE.ES
Tu primera webapp con React en 10 minutos
Twitalo
CARLOSAZAUSTRE.ES