create-react-app脚手架创建

技术栈选型：react+materialui+sass+echart

1.如果之前通过npm install -g create-react-app全局安装过，建议使用npm uninstall -g create-react-app卸载，以确保npx始终使用最新版本。

2.创建： npx create-react-app my-app    或者   npm init react-app my-app   (my-app为项目文件夹名字，可变)

cd my-app 

npm run eject 显示webpack等隐藏配置，此过程不可逆，是webpack把控制权交给用户，所以生产环境别这么干

npm start 启动项目

3.直接npm run build打开build文件夹里面的index.html会有报错，需要修改config/path.js下面servedUrl 后面路劲加 "." ==>  (publicUrl ? url.parse(publicUrl).pathname : './') 

然后再build就可以直接打开build里面的index.html

4.route

react-router: 实现了路由的核心功能

react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom'; 等同于写成 import {Switch, Route, Router} from 'react-router'; import {HashHistory, Link} from 'react-router-dom';

5.export default AA ===>import AA from 'xx'    

    export  AA ===>import {AA} from 'xx'

    一个文件只能有一个export default，可以有多个export， export default时候可以不加“{}”import，并且AA可以随意取名，总会es6的模块化总会解析到默认暴露的东西，但是没有default时候只能加“{}”，并且名字AA不能更改

6.sass    （ npm install sass-loader node-sass --save-dev）

create-react-app内置已经有了sass，只需将样式文件后缀修改为.scss

7.echart  npm install echarts-for-react echarts --save

8.配置eslint：

npm run eject之后虽然有了eslint的依赖配置，还需要npm install -g eslint（使用在单个项目上也可以npm install eslint --save-dev）

然后再eslint --init（可以在任何目录下init），之后所在目录会生成  .eslintrc.js文件

9.默认情况下redux只能dispatch一个plain object，例如：

dispatch({

    type: 'SOME_ACTION_TYPE',

    data: 'xxxx'

});

使用 redux-thunk 之后，可以dispatch一个函数了，这个函数会接收dispatch, getState作为参数，在这个函数里你就可以干你想干的事情，在任何地方随意dispatch了，例如下面这个ajax请求：

dispatch(function (dispatch) {

    $.get('/api/users', function(users) {

        dispatch({

            type: 'FETCH_USERS_SUCCESS',

            users: users,

        });

    });

});