React Documentation
Components are self-contained reusable building blocks of web application.
React components are basically just idempotent functions (same input produces same output).
They describe your UI at any point in time, just like a server-rendered app.
var React = require('react'),
SimpleView = React.createClass({
render: function () {
return <h1><strong>Example 1:</strong> A simple component</h1>;
}
});
React.renderComponent(SimpleView(), document.getElementById('example'));
return <div>
<AnotherComponent foo={someProp} model={this.props.model} />
</div>;
}
http://slides.com/alexanderfarennikov/react-js-fundamentals/fullscreen#/20
Tricks
this.props.onSearchTermChange(term);
Why React ?
- Need flexibility
- Prefer big ecosystems
- Do not want to bother with choosing among various packages
- Are fond of JS
- Work with a medium-sized team, but it might grow
- Like Vue.js but its ecosystem is too limited for your project.
Tutos
With JSBIN: https://github.com/mikechau/react-primer-draft
Prez
(state, action) => state
Redux Tutoriel Simple
Les props envoyées à StudentsList permettent la connexion à Redux.
A chaque changement d'état à appliquer, une fonction embarquée dans une propriété est déclenchée depuis un composant (Student par exemple). Le lien entre cette fonction à appeler et cette propriété est faite dans le container. Le container permet donc le dispatch vers l'action adéquate, action présente dans le fichier actions.js. Cette action contient un type (qui doit être unique). Redux appelle les reducers attachés au store. Le reducer contenant le même type que l'action appelée va exécuter sa fonction pure correspondante. Le changement d'état va déclencher un affichage dans la vue. C'est le fameux one-way data binding de Redux.
Simples Examples of Redux
The whole state of your app is stored in an object tree inside a single store.
The only way to change the state tree is to emit an action, an object describing what happened.
To specify how the actions transform the state tree, you write pure reducers.
That's it!
/**
* This is a reducer, a pure function with (state, action) => state signature.
* It describes how an action transforms the state into the next state.
*
* The shape of the state is up to you: it can be a primitive, an array, an object,
* or even an Immutable.js data structure. The only important part is that you should
* not mutate the state object, but return a new object if the state changes.
*
* In this example, we use a `switch` statement and strings, but you can use a helper that
* follows a different convention (such as function maps) if it makes sense for your
* project.
*/
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// Create a Redux store holding the state of your app. // Its API is { subscribe, dispatch, getState }. let store = createStore(counter)
// You can use subscribe() to update the UI in response to state changes. However it can also be handy to persist the current state in the localStorage. store.subscribe(() => console.log(store.getState()) )
// The actions can be serialized, logged or stored and later replayed. store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1
Free Video 30
Containers
Le container est le dernier aspect pour lier les composants et Redux. Le composant StudentsList étant le parent des autres composants de gestion des élèves (Student et StudentForm), c'est lui qui sera lié à Redux. Dans ce cas, Student est un composant de présentation, c'est-à-dire qu'il ne fera qu'afficher des informations transmises par un conteneur. Ce conteneur, sous-entendu conteneur de composant de présentation, sera StudentsList, le seul à être lié directement à Redux.
+
Que fait ce conteneur ? Il possède deux fonctions Redux :
Dans une application web moderne, nous gérons des tas d'éléments comme :
Ces éléments sont contenus dans des objets au sein d'une application React. Comment savoir dans toutes les pages de l'application si :
Cette architecture est structurée ainsi:
const reducers = {
reducer,
form: formReducer,
}
const reduc = combineReducers(reducers);
const store = createStore(reduc);
Les deux dernières lignes sont nécessaires pour que Redux fonctionne : avec plusieurs reducers, il est nécessaire de les combiner. Ensuite, quelque soit le nombre de reducers, il faut créer un store, ce qui va conserver l'état des objets au sein de l'application (tant que le navigateur est ouvert en tout cas, à moins de gérer la persistance mais cela va au-delà de notre sujet).
+
On utilise ici la bibliothèque Immutable.js pour respecter la philosophie Redux qui ne modifie pas un enregistrement à chaque fois mais le recrée permettant des comparaisons très rapides entre objets puisqu'elle se fera sur la référence de l'objet plutôt que sur l'objet lui-même
Cela devient intéressant sur de gros objets avec plusieurs niveaux d'imbrication. Ce n'est donc pas obligatoire pour notre simple application. Mais c'est un concept important à connaître.
import Immutable, { List, Map } from 'immutable';
export const students = List([
Map({ id: 1465171631163, firstName: 'Jean', lastName: 'Borotra', level: '6e', average: '10', isVisible: false, isUpdated: false }),
Map({ id: 1465171646328, firstName: 'Jacques', lastName: 'Brugnon', level: '5e', average: '19', isVisible: false, isUpdated: false }),
Map({ id: 1465171723584, firstName: 'Henri', lastName: 'Cochet', level: '3e', average: '14', isVisible: false, isUpdated: false }),
Map({ id: 1465171659936, firstName: 'René', lastName: 'Lacoste', level: '6e', average: '8', isVisible: false, isUpdated: false }),
Map({ id: 1465171707368, firstName: 'Suzanne', lastName: 'Lenglen', level: '6e', average: '15', isVisible: false, isUpdated: false }),
]);
Le principe du reducer est de réagir à des actions pour produire un nouvel état dans l'application. Ce seront donc des fonctions pures, sans effet de bord (side effect, par exemple des appels à une API externe) et qui vont aussi utiliser l'immutabilité pour recréer un état plutôt que de modifier celui existant. D'où l'intérêt d'utiliser Immutable.js (même si non obligatoire comme précisé plus haut).
+
Text
React Simple Starter
https://github.com/ReactJSResources/react-webpack-babel
Redux Simple Starter https://github.com/StephenGrider/ReduxSimpleStarter