Le Mois Du JS
@XebiaFr @a_bachar #moisdujs
Abdelhakim BacharDéveloppeur full-stack
Twitter -> a_bachar [email protected] Github -> abachar
React / Redux
La stack tendance, efficace et performante
Sources -> https://github.com/xebia-france/moisdujs-react
@XebiaFr @a_bachar #moisdujs
MVW
Model
Mutation
Y a-t-il une autre façon ?
React
React est une librairie qui permet de créer des interfaces utilisateurs
@XebiaFr
React
● Pas un framework● Librairie UI● Vue déclarative● Binding unidirectionnel● DOM Virtuel
@a_bachar #moisdujs
@XebiaFr
Exemple de composant React
import React from 'react';import ReactDOM from 'react-dom';
class Bonjour extends React.Component { render() { return ( <h1 className='titre'> Bonjour {this.props.user} </h1> ); }}
ReactDOM.render( <Bonjour user='Abdelhakim'/>, document.getElementById('root'));
@a_bachar #moisdujs
@XebiaFr
Stateless Function Component
@a_bachar #moisdujs
import ReactDOM from 'react-dom';
const Bonjour = ({user}) => {
return (
<h1 className='titre'>
Bonjour {user}
</h1>
);
};
ReactDOM.render( <Bonjour user='Abdelhakim'/>, document.getElementById('root'));
@XebiaFr
// JSX<Bonjour user='Abdelhakim' />;
// JavascriptReact.createElement('Bonjour', { user: 'Abdelhakim'});
JSX
@a_bachar #moisdujs
Javascript Syntax eXtension
@XebiaFr
Binding unidirectionnel
@a_bachar #moisdujs
@XebiaFr
DOM Virtuel
@a_bachar #moisdujs
Action Store View
Action
Dispatcher
@XebiaFr
Quelques implémentations :
● Redux par Dan Abramov 753k/mois
● Flux par Facebook 242k/mois
● Alt par Josh Perez 46k/mois
● Reflux par Mikael Brassman 62k/mois
● Relay par Facebook 26k/mois
@a_bachar #moisdujs
@XebiaFr
Pourquoi Redux
● Plus grande simplicité par rapport à Flux● Store unique et non mutable● Reducers à la place des Stores● Écosystème d’outils et de bibliothèques
complémentaires.
@a_bachar #moisdujs
Vous pouvez utilisez Redux avec : React, Angular, Angular 2, Backbone...
@XebiaFr
Principe de base
(previousState, action) => newState
@a_bachar #moisdujs
Action Reducer Store View
Action
@XebiaFr
Action
const action = { type: 'ADD_SLOT', slot: { group: 'Les 4 fantastiques', name: 'React / Redux' }}
@a_bachar #moisdujs
@XebiaFr
Action Creator
function addSlot(group, slotName) { const slot = { group: group, name: slotName } return { type: 'ADD_SLOT', slot: slot }}
@a_bachar #moisdujs
@XebiaFr
Reducer
function slots(state = {}, action) { switch (action.type) { case 'ADD_SLOT': const newSlot = action.slot; const existingSlots = state[newSlot.group];
return { ...state, [newSlot.group]: [ ...existingSlots, newSlot.name ] };
default: return state; }}
@a_bachar #moisdujs
@XebiaFr
Store
import {createStore} from 'redux'import slotReducer from './reducers'import addSlot from './actions'
const store = createStore(slotReducer)
store.subscribe(() => { console.log('State :', store.getState())})
store.dispatch( addSlot('Les 4 fantastiques', 'React / Redux'))
@a_bachar #moisdujs
Action Reducer Store View
Action
Provider connect
@XebiaFr
Store -> Provider
import {createStore} from 'redux';import {Provider} from 'react-redux';import ReactDOM from 'react-dom';import App from './containers/App';
const store = createStore(slotReducer);
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'))
@a_bachar #moisdujs
@XebiaFr
connect -> View
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {addSlot} from './actions'
const mapStateToProps = (state) =>
({ slots: state.slots });
const mapDispatchToProps = (dispatch) =>
bindActionCreators({ addSlot }, dispatch)
const SlotComponent = ({slots, addSlot}) => { /* ... */ };
export default connect
(mapStateToProps, mapDispatchToProps)(SlotComponent)
@a_bachar #moisdujs
@XebiaFr
Redux Ecosystem
@a_bachar #moisdujs
Bindings Middleware DevTools ...
react-reduxng-reduxng2-reduxbackbone-redux...
redux-thunkredux-promiseredux-axios-middlewareredux-rx redux-loggerredux-immutable-state-invariantredux-unhandled-action...
Redux DevToolsLog MonitorDock Monitor...
redux-formredux-actions redux-mock-store ...
Regardons le code
@XebiaFr
Take away
● Composants réutilisables● Stateless Function Components● Code Prévisible● Historique des actions● Performance et légèreté
@a_bachar #moisdujs
@XebiaFr
Merci
@a_bachar #moisdujs
Questions ?
Sources :
https://github.com/xebia-france/moisdujs-react
The philosophy of small, composable, single-purpose tools
never goes out of style.
Unix philosophy
Top Related