Charts and Console(1)UI Console and RESTful Client

Charts and Console(1)UI Console and RESTful Client

Redux Introduction
http://www.jianshu.com/p/53faad8a152a
http://www.alloyteam.com/2015/09/react-redux/
https://zhuanlan.zhihu.com/p/21337964
Redux —> Action, Reducer, Store
Action -
         function addTodo(text){
            return {
                type: ‘ADD_TODO’,
                text
            }
        }

Reducer - deal with action, update state
Store -
    import { createStore } from ‘redux’
    import todoApp from ‘./reducers’
    let store = createStore( todoApp, window.STATE_FROM_SERVER)
   
    dispatch(addTodo(text))
    dispatch(completeTodo(index))

http://sillycat.iteye.com/blog/2377442
http://sillycat.iteye.com/blog/2377580
http://sillycat.iteye.com/blog/2377592
http://sillycat.iteye.com/blog/2377909
http://sillycat.iteye.com/blog/2377910
http://www.chartjs.org/docs/latest/notes/comparison.html
https://github.com/jackhutu/jackblog-react
http://www.alloyteam.com/2015/09/react-redux/
https://zhuanlan.zhihu.com/p/21337964

Add “Redux DevTools” from this Link https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

ReactJS
Simple CRUD Demo https://github.com/ariesmcrae/reactjs-crud-boilerplate

https://github.com/facebookincubator/create-react-app

I create a demo project called monitor-console. It is using bootstrap.

How to talk to the backend is as follow:
https://github.com/jackhutu/jackblog-react/blob/master/src/api/resources.js
Check package axios
https://github.com/mzabriskie/axios
http://coderlt.coding.me/2017/03/21/axios-api-md/


Google OAuth
http://sillycat.iteye.com/blog/2239827
http://sillycat.iteye.com/blog/2236954
http://sillycat.iteye.com/blog/2232877
http://sillycat.iteye.com/blog/2232889
http://sillycat.iteye.com/blog/2227060
http://sillycat.iteye.com/blog/1848592

Mock server
http://sillycat.iteye.com/blog/2194907
https://github.com/mrak/stubby4node

Set up the Mock Server
>sudo npm install -g stubby

Start the mock server as follow:
>stubby -d mock_server/monitor.json -w -l 0.0.0.0 -s 9000

The format of the file will be similar in https://github.com/mrak/stubby4node#installation

The axios is a very simple and useful API library.

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:9000';
axios.defaults.headers.post['Content-Type'] = 'application/json';


class CourseApi {
    static getAllCourses() {
        return axios.get('/courses');
    }

    static saveCourse(course) {
        course = Object.assign({}, course); // to avoid manipulating object passed in.        const json = "{\n" +
            "    \"id\": \"react-flux-building-applications\",\n" +
            "    \"title\": \"Building Applications in React and Flux\",\n" +
            "    \"watchHref\": \"http://www.pluralsight.com/courses/react-flux-building-applications\",\n" +
            "    \"authorId\": \"cory-house\",\n" +
            "    \"length\": \"5:08\",\n" +
            "    \"category\": \"JavaScript\"\n" +
            "}";
        return axios.post('/courses', json);
    }

    static deleteCourse(courseId) {
        const query = "react-flux-building-applications";
        return axios.delete('/courses/' + query);
    }


    static getCourse(courseId) {
        const query = "react-flux-building-applications";
        return axios.get('/courses/' + query);
    }

}

export default CourseApi;

The sample code and project will be in monitor-console

References:
https://github.com/jackhutu/jackblog-react
http://www.chartjs.org/docs/latest/notes/comparison.html

ReactJS
http://sillycat.iteye.com/blog/2377442
http://sillycat.iteye.com/blog/2377580
http://sillycat.iteye.com/blog/2377592
http://sillycat.iteye.com/blog/2377909
http://sillycat.iteye.com/blog/2377910

Connect to Backend
https://github.com/mzabriskie/axios
http://www.opendigg.com/p/axios
http://www.10tiao.com/html/496/201606/2652401931/1.html
https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/