简单的建一个react项目

第一步，先全局安装react脚手架

npm i -g create-react-app

判断是否下载过脚手架

npm root -g

第二步、装好脚手架以后开始用脚手架件项目

1. 使用 create-react-app 项目名称
   例如：

//创建一个demo
create-react-app demo

在react项目中会遇到点击时会延迟0.3秒的bug我们可以通过一个插件处理，在蚂蚁金服UI中有 在开始
首先下载蚂蚁金服UI

npm install antd-mobile --save

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>

然后我们还需要下载less@2.7.3和less-loader，因为蚂蚁金服UI用的是less样式

npm i less@2.7.3 less-loader --save-dev
//不要问我为什么，因为就less@2.7.3可以

第三步开始配置路由

1、下载路由

npm i react-router-dom --save

2、创建一个router文件 新建一个index.js并配置

import React from 'react';
import {HashRouter, Switch, Route,Redirect} from 'react-router-dom';

import Main from '../views/main/main';
import Cart from '../views/cart/cart';
import My from '../views/my/my';

const Router = () => (
    <HashRouter>
<Switch>
    <Route path='/main' component={Main}></Route>
    <Route path='/my' component={My}></Route>
    <Route path='/cart' component={Cart}></Route>
    <Redirect to='/main'></Redirect>//重定向写在最后面
</Switch>
</HashRouter>
);

export default Router; 

在index.js入口文件中导入，并挂载到页面上

import Router from './router/index';

ReactDOM.render(<Router />, document.getElementById('root'));

三 、路由弄好以后，我们开始配置redux

• 下载redux 依赖包

npm i --save redux@3.7.2 react-redux redux-thunk
npm i --save-dev redux-devtools-extension