create-react-app搭建环境+Less+element+router+flux状态管理这两天在学习react

这两天在学习react的状态管理，看了facebook的flux，自己弄了个简单的示例。有兴趣的朋友可以瞧瞧。

本示例没什么实际作用，纯粹是为了试验flux的一些特性而随便弄的，还请不要笑话，哈哈！

项目demo地址

https://github.com/wangpq/react-flux-facebook-demo.git

项目如何一步步搭建的呢？

一、安装create-react-app并创建项目

window+R 打开控制台，输入cmd

安装 create-react-app

npm install -g create-react-app

创建一个应用程序

create-react-app react-flux-facebook-demo

进入项目

cd react-flux-facebook-demo

运行

npm start

或者

yarn start

会自动打开http://localhost:3000/

看下你的页面,是不是出来啦

二、让项目支持Less

create-react-app创建的项目默认支持css，不支持less，sass，stylus等。

所以如果需用到less等，需要手动修改配置文件。

现在create-react-app创建的配置文件默认是没有显示的，所以我们要看到，还得先把配置文件暴露出来，使用下面命令：

npm run eject

安装less-loader 和 less

npm install less-loader less --save-dev

安装后修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

test: /\.css$/ 改为 /\.(css|less)$/

test: /\.css$/ 的 use 数组配置增加 less-loader

并新增一个loader，与 postcss-loader并列。

{  
   loader: require.resolve('less-loader'),
}

然后把src 里面的App.css 文件改成App.less文件里面使用less写测试下效果

*{margin:0;padding:0;}body{  background-color: #f8f8f8;}header{  display: flex;  flex-direction: row;  background-color: rgba(215,215,215,1);  .item:not(:first-of-type){    display: flex;    flex-direction: row;    align-items: center;    justify-content:center;  }  .item:first-of-type{    flex:1;    img{      height:48px;      animation: App-logo-spin infinite 20s linear;     }  }  .item:nth-of-type(2){    flex:3;  }  .item:last-of-type{    flex:1;  }}
footer{  background-color: rgba(215,215,215,1);  position: fixed;  bottom:0;  left:0;  right:0;  ul{    display: flex;    flex-direction: row;    list-style:none;    li{      flex :1;      text-align: center;      a,a:visited{        text-decoration: none;        padding:12px 0;        display: block;        color:#333;        font-size:18px;        border-right: 1px solid #eee;        transition: all 0.4s;      }      a:hover,a:active{        background-color: #e8e8e8;      }      .active{        color:#f00;      }    }  }}
@keyframes App-logo-spin {  from { transform: rotate(0deg); }  to { transform: rotate(360deg); }}
.about{  margin:8px;  padding:8px;  border-radius:6px;  background-color: #fff;}

三、让项目CSS分离打包

注意：这个功能在目前的create-react-app创建的项目的配置文件webpack.config.dev.js中没有设置，但是webpack.config.prod.js中是已经配置好了的，所以这一步没必要在设置啦。

我们看到，所有的文件都是打包到一个js文件里面我们现在把css文件分离出来使用 extract-text-webpack-plugin

安装extract-text-webpack-plugin

npm install extract-text-webpack-plugin --save

有3处需要添加的，您添加后可以通过ExtractTextPlugin 搜索查询下是否都添加好

第一处：const ExtractTextPlugin=require("extract-text-webpack-plugin")

第二处：

第三处：

修改后你会发现现在css单独打包了

四、项目使用饿了么组件

element-react官网：

https://elemefe.github.io/element-react/#/zh-CN/

配置过程可参照 element 的官网提示。

npm install element-react element-theme-default --save

使用element

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'element-react';
import 'element-theme-default';
ReactDOM.render(<Button type="primary">Hello</Button>, document.getElementById('app'));

五、flux管理项目状态

安装flux

npm install flux --save

六、项目路由

安装react-router-dom

npm install react-router-dom --save

如何运行本项目？

使用git或者直接下载本项目到本地，cmd控制台cd 进入项目文件夹，

下载项目依赖：

npm install

然后输入运行命令，

npm run start

OK啦！