https://github.com/juanpablofuentes/JS/tree/master/redux-ejemplo
Tutoriales react y redux
Conceptos de Redux (puros)
https://code.tutsplus.com/es/tutorials/getting-started-with-redux-why-redux–cms-30349
Ejemplo de app de contactos (incompleta):
https://code.tutsplus.com/es/tutorials/getting-started-with-redux-learn-by-example–cms-30350
Un ejemplo extenso:
https://www.valentinog.com/blog/redux/
Otro tutorial sencillo:
https://daveceddia.com/redux-tutorial/
Página oficial:
Crear proyecto con React y Redux
npx create-react-app redux-counter
cd redux-counter
npm install –save redux react-redux
Creamos Counter.js:
import React from 'react'; class Counter extends React.Component { state = { count: 0 } increment = () => { this.setState({ count: this.state.count + 1 }); } decrement = () => { this.setState({ count: this.state.count - 1 }); } render() { return ( <div> <h2>Counter</h2> <div> <button onClick={this.decrement}>-</button> <span>{this.state.count}</span> <button onClick={this.increment}>+</button> </div> </div> ) } } export default Counter;
Después de modificarlo:
import React from 'react'; import { connect } from 'react-redux'; function mapStateToProps(state) { return { count: state.count }; } class Counter extends React.Component { //state = { count: 0 } increment = () => { this.props.dispatch({ type: "INCREMENT" }); } decrement = () => { this.props.dispatch({ type: "DECREMENT" }); } render() { return ( <div> <h2>Counter</h2> <div> <button onClick={this.decrement}>-</button> <span>{this.props.count}</span> <button onClick={this.increment}>+</button> </div> </div> ) } } export default connect(mapStateToProps)(Counter);
App
import React from 'react'; import logo from './logo.svg'; import './App.css'; import Counter from './Counter'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; const initialState = { count: 0 }; function reducer(state = initialState, action) { console.log('reducer', state, action); switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; case 'RESET': return { count: 0 }; default: return state; } } const store = createStore(reducer); function App() { return ( <Provider store={store}> <Counter /> </Provider> ); } export default App;
Redux
Documentación de 1400 APIs
Tutorial y demo de Git
La suma donde todos los lenguajes se equivocan
¿Cuanto es .1 + .2? Pues en casi todos los lenguajes de programación:
La explicación de esto puede verse muy bien aquí:
Eventos en JavaScript
Bien explicaditos y en castellano:
https://medium.com/@ger86/javascript-y-eventos-todo-lo-que-necesitas-saber-8b8ba4a2d4d4
Tutorial Web API
Como realizar una API paso a paso:
Ejercicio Partidas Rol
Vamos a crear un MVC para mantener una base de datos de partidas de rol y también una web API Rest y un frontend de React que hagan lo mismo.
La base de datos será así:
Jugador: Nombre, mail y alias
Partida: Nombre, juego, fecha y hora, dificultad
Todas las partidas tienen 1 creador.
Los jugadores pueden participar en varias partidas y una partida se compone de varios jugadores.
Tendremos que hacer:
1.- MVC con Code First (recordad en scaffolding)
2.- Web API Rest
3.- Probar API con Postman
4.- Diseñar el frontend, pantallas que tendrá, como se realizarán las acciones
5.- Construir el frontend en React: Crear las rutas, los componentes, hacer las llamadas a la api…