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/
Charts and Console(1)UI Console and RESTful Client
猜你喜欢
转载自sillycat.iteye.com/blog/2391412
今日推荐
周排行