使用create-react-app 创建 react项目

一.在cmd命令行执行 npx create-react-app myapp（项目名）

二.等下载完之后 cd myapp进入到项目路径 执行 npm start测试是否可以运行

三.然后引入 Ant Design 组件库

1. 首先 命令行执行 yarn add antd 下载antd 的依赖
2. 然后 为了实现按需打包 还需要添加几个工具的依赖
   yarn add react-app-rewired customize-cra babel-plugin-import
3. 这样就可以使用antd组件了，从官网上去找到自己要用的组件，然后在自己页面上引用

import {Button} from 'antd';  
 function App() {
  return (
    <div className="App">
     <Button type='primary' > 测试</Button>
    </div>
  );
}
export default App;     

这样测试会不显示button的样式，因为在项目中没有引入css样式，这样有两个解决方式：

1. 在index.js中添加

import 'antd/dist/antd.css'

这样可以引入antd所有的css样式，但是不推荐这种方式，因为会打包所有的antd 的css样式，加载会比较慢。

2. 按需打包：刚才已经 使用yarn 添加了需要的三个依赖工具，然后需要在项目的根路径下创建一个配置文件 config-overrides.js

const {override,fixBabelImports} = require("customize-cra");

module.exports = override(

    //通过 import 针对 antd 实现按需打包
    fixBabelImports('import',      //根据import打包 使用之前下载的工具（babel-plugin-import）
        {
            libraryName:'antd',   //针对antd
            libraryDirectory:'es',
            style:'css'     //打包相关的css样式
        }
    ),
);

然后在package.json文件中用以下 代码替代原有的scripts值

"scripts": {
    "start": "react-app-rewired start ",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

这样就可以在项目中运行 npm start 来正常运行项目了。

还有less依赖可以添加，添加之后，less类似css，less是css的预处理文件，less可以更加结构化。
添加依赖的命令 yarn add less less-loader, 下面是对less的解释，

四.如果需要使用路由的话还需要添加路由的依赖
建议添加 react-router-dom ，他的功能更全，
react-router 只是封装了路由的一些核心API，不推荐

1. 首先下载依赖
   yarn add react-router-dom
2. 等待路由的依赖下载完毕，然后在App.js中引入编写路由的配置

import {NavLink,Route,BrowserRouter,Switch} from 'react-router-dom'

function App() {


return (
 <div className="App">
     <BrowserRouter>
         <NavLink to='/login' >去登陆</NavLink>
         <NavLink to='/main' >主页 </NavLink>
         <NavLink to='/admin' >管理页</NavLink>

         <Switch>
             <Route path='/' component={Login} />
             <Route path='/main' component={Main} />
             <Route path='/admin' component={Admin} />
         </Switch>
     </BrowserRouter>
 </div>
);
}
export default App;

3. 用解构的方式 引入 react-route-dom的上面那几种组件（NavLink,Route,BrowserRouter,Switch），记住路由的外层一定要用包裹，或者用包裹（如果用HashRouter一定不要忘记引入）。也可以选择在index.js中渲染App标签时把App包裹起来，如图
   

4. 包裹好之后就可以配置路由了，在App.js中配置一级路由
   
   以上我自定义了三个组件，分别是Login、Main、Admin，用Route标签的component属性进行绑定（上面不要忘记引入啊），凡是自定义的资源，引入路径一定要加 ‘ ./ ’，否则可能获取不到，然后使用Route的path属性设置路由的访问路径。

5. 然后这样就可以在浏览器上通过不同的访问路径，跳转不同的组件了。

6. 使用NavLink或者Link标签可以通过点击去访问不同的路由，to属性绑定你要访问的路径，NavLink与Link的区别是：NavLink在跳转到对应组件时，他会在对应的那个NavLink标签上添加一个class，这样我们可以通过添加那个class的样式来区别我们当前访问的组件时是哪个
   
   
   如图所示，使用NavLink的话，访问的当前组件会多出两个属性 aria-current=‘page’ 和 class=‘active’

7. 如果配置的路由路径有重复 部分，正常会只要匹配到自己本身就会都跳转，例如我上面配置的path=‘/’ 与path=‘/main’，当我跳转’/main’时，’/‘对应的路由组件也会匹配到，这时候如果只想访问一个组件，可以’/‘对应的Route标签中 添加一个 属性 exact 例如
   添加这个属性的意思是进行精准匹配，只有访问路径’/‘时才会匹配’/'对应的组件。

8. 除了exact处理方法之外也可以 使用 Switch标签，他的意思是只会匹配一个组件，默认从上面开始匹配。

最后 提一下简单的项目结构
api ： 存放访问后端接口的各种方法，与ajax，或者封装ajax的axios有关，
assets ：存放各种静态资源，一般存放图片等。
components：存放设计的各种公共组件。
config：存放各种配置文件
pages：存放路由组件
utils：存放一些工具类