react工程创建

1、安装react脚手架create-react-app

npm install -g create-react-app

2、创建一个名为demo的工程

create-react-app demo

3、因为创建时并没有显示webpack配置文件，根据命令提示，安装所需配置文件，执行以下命令

yarn eject

4、可将package.json里面的start换成dev，这样启动命令就会成为 # npm run dev

     （如若不换，可用 #npm start 进行启动）

    npm run dev

5、将src里面的文件全部删掉，剩下index.js

6、在index.js里面写入代码，并且可将根路由和页面当中牵扯到的跳转写在里面，就可渲染页面

****注意：

        1>当你想用@自动定位到src目录，需要在webpack里面进行配置，在alias里面加入

               '@': path.join(__dirname, '..', 'src’)

               然后重新启动之后就可以了

7、若用antd这个UI框架，但是通过官网的步骤

  1> yarn add antd

  2>yarn add babel-plugin-import

  在package.json中引入这个

"plugins": [

        [

            "import",

            {

              "libraryName": "antd",

               "libraryDirectory": "es",

              "style": true

         }

     ]

]

当你引入样式还是没有效果

这时需要在webpack的配置中加入：

{

      test: /\.less$/,

     use: [{

          loader: require.resolve('style-loader'), // creates style nodes from JS strings

       }, {

         loader: require.resolve('css-loader'), // translates CSS into CommonJS

      }, {

        loader: require.resolve('less-loader'), // compiles Less to CSS

     }]

   },

这样刷新时，就可以有效果了！

7、学习react所需内容如下

1>React  http://react.css88.com/.  ( https://react.docschina.org/ )

2> Redux, react-redux.( mobx, mobx-react )  http://cn.mobx.js.org/

3> ES6.  http://es6.ruanyifeng.com/

4> React-router v4.0 https://reacttraining.com/react-router/web/guides/philosophy