Este documento presenta una introducción a ReactJS y Redux. Explica que ReactJS es una biblioteca JavaScript para desarrollar interfaces basadas en componentes y que mantiene el contenido actualizado. También describe la instalación de ReactJS, los conceptos básicos como componentes, props, estado y ciclo de vida, y cómo conectar una aplicación React con Redux para gestionar el estado de forma predecible. Finalmente, incluye enlaces de referencia sobre estas tecnologías.

1. ReactJS + Redux
Introducción a
Querétaro Software Development Meetup

2. Miguel Mendoza
Desarrollador de Aplicaciones Frontend en P/S/L Group
mmendoza000@gmail.com
LinkedIN | Twitter | Github: @mmendoza000
Facebook: @mmendoza0
Web Platform: www.saefy.com
Presentador

3. Javascript
- Según datos de la firma de análisis Vision Mobile, más del 50% de las aplicaciones móviles
utilizan HTML5 junto a JavaScript y CSS.

4. React JS
“Es una librería de Javascript para desarrollar interfaces”.
- React.js es una librería open source de JavaScript, patrocina por facebook.
- Se basa en componentes.
- Mantiene Contenido actualizado en todo momento.
- Utiliza JSX (Azúcar sintáctico) para escribir componentes HTML en JS.
- React native permite desarrollar aplicaciones nativas en ReactJS para Dispositivos Móviles.

5. Instalación
Con Yarn
Yarn init
Yarn add react react-dom
Con NPM
npm init
npm install --save react react-dom
Activar ES6 y JSX
Se recomienda usare react con Babel para usar ES6 y JSX y webpack 2 para
empaquetar la aplicación.
npm install --save-dev babel-cli babel-core babel-loader babe-
preset-env babel-preset-stage-1 babel-preset-stage-2 babel-
preset-react webpack

6. Webpack (empaquetador de módulos)

7. Hola Mundo con ReactJS
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Dev Meetup Qro" />,
mountNode
);

8. Cada elemento de JSX ejecuta
React.createElement(component, props, ...children)
Que seria:
React.createElement('h1', {className: 'title'}, 'Hello, world!')
Con JSX:
const element = <h1 className="title">Hello, world!</h1>;
JSX

9. function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
Renderizado y renderizado condicional
Se agrega un div en el archivo html, que será el nodo de la aplicación:
<div id="root"></div>
Y se pasa el elemento React y el elemento nodo como parámetros a ReactDOM.render():

10. Componentes basados en clases ES6:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Componentes funcionales
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
Componentes y Props

11. Lifecycle::
● Iniciaizacion
○ getDefaultProps
○ getInitialState
○ componentWillMount
○ render
○ componentDidMount
● Cambia de State
○ shouldComponentUpdate
○ componentWillUpdate
○ render
○ componentDidUpdate
● Cambio en props
○ componentWillReceiveProps
○ shouldComponentUpdate
○ componentWillUpdate
○ render
○ componentDidUpdate
● Desmontado
○ componentWillUnmount
State y Lifecycle
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

12. Listas Forms y Eventos
Listado
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
mountNode
);
Fomulario
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value}
onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

13. Redux
“Redux es un contenedor predecible del estado de
aplicaciones JavaScript”
Redux te ayuda a escribir aplicaciones que se comportan de manera consistente, corren en distintos
ambientes (cliente, servidor y nativo), y son fáciles de probar.
Existen muchas librerías creadas para integrar Redux como react-redux para React y ngRx para
Angular. Los conceptos de implementación siempre son los mismos.

14. Para instalar la versión estable
npm install --save -S redux
Connexion con react y herramientas de desarrollo
npm install --save react-redux redux-devtools
Instalación de Redux

15. El store de la aplicación es de solo lectura. Solo puede ser cambiado despachando
acciones.
"No nos preocupamos por factores externos que puedan modificar el state"
Estado inmutable
store.dispatch({
type: 'INCREMENT'
});

16. “
Una función es impura cuando hace
sentido ejecutarla sin utilizar su valor
retornado

17. “Los cambios de estado son realizados por Pure functions”
Se utiliza un reducer para crear el siguiente estado de la aplicación. Un reducer es un "pure function"
Pure function: es una función que:
- Dada la misma entrada siempre regresará la misma salida.
- No produce efectos colaterales.
Ventajas de su uso:
- Fácil de realizar pruebas unitarias.
- Hace tu aplicacion más flexible y adaptable a cambios.
- Son completamente independientes del estado de tu aplicación.
- Son inmunes a bugs relacionados con state mutable compartido.
- Sigue el principio KISS (Keep It Simple, Stupid) o (Keep it stupid simple)
Pure functions

18. // index.js
const reducer = (state = 0, action) => {
switch(action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default: return state;
}
Reducer
Que es un reducer?
El reducer es una función pura que toma el estado anterior y una acción, y devuelve en
nuevo estado.
Al mantenerse pura no contaminar el estado.

19. Flujo de redux

20. import { createStore } from 'redux'
let store = createStore(todos)
function addTodo(text) {
return {
type: 'ADD_TODO',
text
}
}
store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))
Store
Que es el store?
El store contiene todo el árbol de estado de tu aplicación. La única forma de cambiar el
estado que contiene es despachando una acción store.dispatch.
El store no es una clase. Es solo un objeto con unos pocos métodos. Para crearlo, pasa tu
principal función reductora a createStore.

21. store.getState()
store.dispatch(action)
store.subscribe(listener)
store.replaceReducer(nextReducer)
getState(): Devuelve todo el estado.
dispatch(action): Despacha la acción. La única forma de alterar cambiar el estado.
subscribe(listener): Agrega una función que escucha los cambios.
replaceReducer(nextReducer): Devuelve todo el estado.
Métodos del Store

22. import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
default: return state;
}
}
const store = createStore(reducer);
const Counter = ({value}) => {
return (
<div className='centeredComponent'>
<h3>Counter con React + Redux</h3>
<button className="btn btn-success" onClick={() => store.dispatch({ type: 'INCREMENT'})}> +
</button>
{' '}
<button className="btn btn-danger" onClick={() => store.dispatch({ type: 'DECREMENT'})}> -
</button>
<h3>{value}</h3>
</div>
)
}
const render = () => {
ReactDOM.render(
<Counter value={store.getState()} />,
document.getElementById('root')
)
}
store.subscribe(render);
render();
export default Counter
Todo unido

23. React Redux en Acción

24. http://redux.js.org/
https://reactjs.org/
https://webpack.js.org/
https://babeljs.io/
http://es6-features.org/
Repositorio de ejemplo:
https://github.com/mmendoza000/react-redux-tutorial
Enlaces:

25. Gracias!
Sección de Preguntas