import React from 'react';
import ReactDOM from 'react-dom';

class Example2_1 extends React.Component {
    render() {
        return (
            <p>Hello world</p>
        );
    }
};

ReactDOM.render(
    <Example2_1 />,
    document.querySelector('.js-react-example2-1')
);
                
            

                
import React from 'react';
import ReactDOM from 'react-dom';

const Example2_2 = () => (
    <p>Hello world</p>
);

ReactDOM.render(
    <Example2_2 />,
    document.querySelector('.js-react-example2-2')
);
                
            

                
class Example3_1 extends React.Component {
    render() {
        return (
            <p>{this.props.text}</p>
        );
    }
};

ReactDOM.render(
    <Example3_1
        text="Petit poney"
        />,
    document.querySelector('.js-react-example3-1')
);
                
            

                
const Example3_2 = (props) => (
    <p>{props.text}</p>
);

ReactDOM.render(
    <Example3_2
        text="Petit poney"
        />,
    document.querySelector('.js-react-example3-2')
);

                
            

                
const Example3_2 = (props) => (
    <p
        onClick={props.coucou}>
        {props.text}
        </p>
);

ReactDOM.render(
    <Example3_2
        text="Petit poney"
        coucou={() => alert('coucou');} />,
    document.querySelector('.js-react-example3-2')
);

                
            

                
/**
 * @param {Object} props.poney
    { id: 1, emoji: '🐴', color: 'red',
        checked: false }
 * @param {Function} props.toggle
 */
const Item = ({ poney, toggle }) => {
    return (<li>
        <input
            type="checkbox"
            defaultChecked={poney.get('checked')}
            onClick={() => toggle(poney)} />
        <label>
            { poney.get('emoji') }
        </label>
    </li>);
};
                
            

                
const List = ({ poneys, togglePoney }) => {
    const items = poneys.map((p, i) => (
        <Item key={i} poney={p}
            toggle={togglePoney} />
    ));
    return (<div>
        <p>Famille Poney :</p>
        <ul>{ items }</ul>
    </div>);
};
                
            

                
const Summary = ({ poneys }) => {
    const n = poneys.reduce((count, p) => (
        p.get('checked') ? count + 1 : count
    ), 0);
    return (<p>
        { n }
        { n > 1
            ? 'poneys sélectionnés'
            : 'poney sélectionné' }
    </p>);
};
                
            

                
const App = (props) => (<div>
    <List {...props} />
    <Summary poneys={props.poneys} />
</div>);
                
            

                
const togglePoney = (poney) => {
    return {
        type: 'TOGGLE_PONEY',
        poney,
    };
};
                
            

Reducer: (state, action) ⟼ state

                
import { Map } from 'immutable';

/**
 * @param  {Object} state
 * @param  {Object} action
 *
 * @return {Object}         New state
 */
const reducer = (state = Map(), action) => {
    switch(action.type) {
        ...
        default:
            return state;
            break;
    }
};
                
            

                
import { Map, fromJS } from 'immutable';

const reducer = (state = Map(), action) => {
    switch(action.type) {
        case 'INIT':
            return fromJS(action.state);
            break;
        default:
            return state;
            break;
    }
};
                
            

                
import { Map, fromJS } from 'immutable';

const reducer = (state = Map(), action) => {
    switch(action.type) {
        ...
        case 'TOGGLE_PONEY':
            const poneyIndex = state
                .get('poneys')
                .findIndex((p) =>
                    p.get('id') === action.poney.get('id')
                );

            return state.setIn(
                ['poneys', poneyIndex, 'checked'],
                !action.poney.checked
            );
            break;
        ...
    }
};
                
            

                
import { createStore } from 'redux';

const store = createStore(reducer);

store.dispatch({
    type:  'INIT',
    state: {
        poneys: [{
            id:      1,
            emoji:   '🐴',
            checked: false
        }, ... ],
    },
});
                
            

                
import { connect, Provider } from 'react-redux';

import App from './components/App.jsx';
import togglePoney from './actions";

const mapStateToProps = (state) => ({
    poneys: state.get('poneys'),
});

const AppContainer = connect(
    mapStateToProps, //map store et props
    { togglePoney }  //map actions et props
)(App);

ReactDOM.render(
    <Provider store={store}>
        <AppContainer />
    </Provider>,
    document.querySelector('.js-redux-example2')
);
                
            

                
.
├── sass/
├── js/
|   ├── utils/
|   ├── components/
|   |   ├── App.jsx
|   |   ├── Graph.jsx
|   |   ├── Box.jsx
|   |   └── Button.jsx
|   ├── services/
|   |   ├── Stats.js
|   |   └── Auth.js
|   ├── actions/
|   |   ├── graph_actions.js
|   |   └── button_actions.js
|   ├── test/
|   |   ├── Stats.js
|   |   └── App.jsx
|   ├── reducer.js
|   └── index.js
└── index.html
                
            

                
.
├── sass/
├── js/
|   ├── stats/
|   |   ├── components/
|   |   ├── services/
|   |   ├── actions/
|   |   ├── test/
|   |   ├── reducer.js
|   |   └── index.js
|   ├── catalog/
|   |   ├── components/
|   |   ├── services/
|   |   ├── actions/
|   |   ├── test/
|   |   ├── reducer.js
|   |   └── index.js
└── index.html
                
            

                
// .eslintrc.json
{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "extends": "airbnb",
    "rules": {
        "semi":   ["error", "always"],
        "quotes": ["error", "simple"],
        ...
    },
}
                
            

(ESLint branché sur un gulp watch)

                
import reducer from '../reducer';

describe('reducer', () => {

    it('handles INIT', () => {
        ...
    });

    it('handles TOGGLE_PONEY', () => {
        ...
    });

});
                
            

                
import { expect } from 'chai';
import Api from '../services/api';

describe('API service', () => {

    //if synchronous
    it('returns 2 with returns2()', () => {
        expect(Api.returns2()).to.equal(2);
    });

});
                
            

                
import { expect } from 'chai';
import Api from '../services/api';

//mock with fetch-mock here

const poneys = [{ emoji: '🐴', color: 'red' }, ... ];

describe('API service', () => {

    it(
        'returns poneys with getPoneys()',
        function (done) {
            Api.getPoneys()
                .then((result) => {
                    expect(result).to.deep.equal(poneys)
                    done();
                })
                .catch(done);
        }
    );

});
                
            

                
import React from 'react';
import { expect } from 'chai';
import { shallow } from 'enzyme';

import Item from '../components/Item';

describe('Item', () => {

    it('renders an item', () => {
        const TEXT = 'Poney';
        const wrapper = shallow(
            <Item text={TEXT} />
        );

        expect(wrapper.find('li')).to.have.length(1);
        expect(wrapper.find('label').text()).to.equal(TEXT);
    });

});
                
            

                
import React from 'react';
import { expect } from 'chai';
import { shallow, render } from 'enzyme';

import Item from '../components/Item';

describe('Item', () => {

    it(
        'invokes callback when the poney is clicked',
        function (done) {
            const PONEY = { ... };
            const checkCb = (poney) => {
                expect(poney).to.equal(PONEY)
                done();
            };

            const wrapper = shallow(
                <Item poney={PONEY} toggleItem={checkCb}/>
            );

            wrapper.find('input').simulate('click');
        }
    );

});
                
            

mocha