React.js EcoSystem

Breathe! It’s web development, Things move fast

You don’t need to master everything and there will always be that brand new technology that the cool kids will gonna want to use. [*]

Let's look at some useful libraries and packages

in React EcoSystem

Create-React-App

• It is a CLI utility for React to quickly set up a new project start a development server and create a bundle
• It uses Jest, a relatively new test runner from Facebook, for unit testing
• See https://www.sitepoint.com/create-react-app/

Create-React-App

• Your environment will have everything you need to build a modern React app:
  • React, JSX, ES6, and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • A dev server that lints for common errors.
  • Import CSS and image files directly from JavaScript.
  • Autoprefixed CSS, so you don’t need -webkit or other prefixes.
  • A build script to bundle JS, CSS, and images for production, with sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

React-Router

• React Router is a collection of navigational components that compose declaratively with your application.

const App = () => (
    <BrowserRouter>
        {/* here's a div */}
        <div>
            {/* here's a Route */}
            <Route path="/tacos" component={Tacos}/>
        </div>
    </BrowserRouter>
)

Axios

• A Promise based HTTP client for the browser and node.js

axios.get('/user',
    {params:
        { ID: 12345 }
    }
).then(
    function (response) {
        console.log(response);
    }
).catch(
    function (error) {
        console.log(error);
    }
);

Material-UI

• A set of React components that implement Google's Material Design specification.

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import injectTapEventPlugin from 'react-tap-event-plugin';

injectTapEventPlugin();

const App = () => (
    <MuiThemeProvider>
        <RaisedButton label="Default" />
    </MuiThemeProvider>
);

React-Notification-System

Expect

• expect lets you write better assertions.

expect([ 1, 2, 3 ]).toInclude(3)
expect({ a: 1, b: 2 }).toInclude({ b: 2 })
expect({ a: 1, b: 2, c: { d: 3 } })
    .toInclude({ b: 2, c: { d: 3 } })
expect('hello world').toInclude('world')

Jest

• Easy unit-testing library for JavaScript

function sum(a, b) {
    return a + b;
}

test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
});

React-Native

• React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
    render() {
        return (
            <View>
                <Text>
                    You just use native components like 'View' and 'Text',
                    instead of web components like 'div' and 'span'.
                </Text>
            </View>
        );
    }
}

And more important libraries

Redux

• Redux is a library that helps manage state changes in a clear manner.
  • Key idea: application is represented by a single object (mutated by reducers)
  • Reducers themselves are pure functions and are implemented separately from the components. This enables better separation of concerns and testability.
• Redux will help achieve a clear structure for your project.
• Look at https://egghead.io/courses/getting-started-with-redux
• Redux keeps the state in a single immutable store.
  • MobX, another state managing library for React, encourages storing only the minimal required state and derive the rest from it.

Redux Principles

1. The whole state of the application is represented in a single JS Object
2. State is read-only. Changes are done through dispatching actions, only requirement for an action is it needs to have a "type" !
3. React: View layer is most predictable, when it is described as a "pure function" of the application state

• Redux: the state mutations in app need to be described as a pure function of previous state and the action to return the next state (as a new Object [not modifying the previous object])
• This function is called the reducer

Redux Store

const createStore = (reducer) => {
    let state;
    let listeners = [];

    const getState = () => state;

    const dispatch = (action) => {
        state = reducer(state, action);
        listeners.forEach(listener => listener());
    }

    const subscribe = (listener) => {
        listeners.push(listener);
        return () => {
            listeners = listeners.filter(l !== listener);
        }
    }

    dispatch({});

    return { getState, dispatch, subscribe };
};

• Lets run React counter example at
  • https://egghead.io/lessons/javascript-redux-react-counter-example
• Using https://jsbin.com/?html,js,output

Flux

• An application architecture for React utilizing a unidirectional data flow

Flux Implementations

• Flux Comparision (https://github.com/voronianski/flux-comparison)
• RefluxJS (https://github.com/reflux/refluxjs)
• Fluxxor (https://github.com/BinaryMuse/fluxxor)
• Marty (https://github.com/martyjs/marty)
• McFly (https://github.com/kenwheeler/mcfly)
• Alt (https://github.com/goatslacker/alt)
• Fluxible (https://github.com/yahoo/fluxible)
• NuclearJS (https://github.com/optimizely/nuclear-js)
• Flummox (https://github.com/acdlite/flummox)

Reflux

• A simple library for unidirectional dataflow architecture inspired by ReactJS Flux
  • Also said to be one of the implementations of the Flux architecture
  • The 3 main concepts to know are:
    • creating actions
    • creating stores
    • hooking stores to React components
  • A very good architecture for implementing the authentication mechanism

Reflux: Authentication-Flow

Create Actions

import Reflux from 'reflux';

export default Reflux.createActions({
    login: {children: ['completed', 'failed']},
    logout: {}
});

Create Stores

export default class StatusStore extends Reflux.Store {
    constructor() {
        super();
        this.state = {...}; // set the state vars
    },

    onLogin (email, password) {
        // send data to backend and authenticate
    },

    onLoginCompleted (authResponse) {
        // set the validated token and redirect to the requested page
    },

    onLogout () {
        // perform the right actions and remove the valid token
    }
}

Hook the Store to React Component

import AuthStore from '../stores/AuthStore';
import AuthActions from '../actions/AuthActions';

export default class Login extends React.Component {
    mixins: [
        Reflux.connect(AuthStore,"rkey"),
        Reflux.ListenerMixin
    ],

    componentDidMount () {this.listenTo(AuthStore, this._onAuthChange);},

    _onAuthChange(auth) {/* set the proper states and redirect */},

    _handleLogin(event) {AuthActions.login(entered_email, entered_password);},

    render() { return (/* form content to get login info, call _handleLogin() */);}
};

Router

module.exports = (
    <Route>
        <Route handler={Login} name="Login" path="Login"/>
        <Route handler={LoginRequired}>
            <Route handler={Master}>
                <DefaultRoute handler={Home} name="Home"/>
                <Route handler={Admin} name="Admin" path="admin">
            </Route>
        </Route>
    </Route>
);

There exist many more libraries listed in

https://github.com/enaqx/awesome-react

[highly recommend to check them out]