React学习笔记（一）：先把项目跑起来

版权声明：本文为博主原创文章，转载请放上原文链接。 https://blog.csdn.net/brand2014/article/details/79060854

本来自己还是更喜欢学习Vue的（学起来相比Angular和React都容易一些），但是公司最近突然想用react（主要用 Ant-Disign 这个UI框架）重构之前的项目，所以暂时只有把Vue放一边了，开始学习React~~

前言

需要自己先安装好node和npm（或者cnpm）

按照官方文档，把项目跑起来吧

先放文档地址：React文档英文版 ；React文档中文版

安装 React.js

使用 React.js不管在开发阶段生产阶段都需要一堆工具和库辅助，编译阶段你需要借助 Babel；需要Redux等第三方的状态管理工具来组织代码；如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。React官方推荐的工具是***create-react-app***，

1.安装 create-react-app构建项目并启动项目

cnpm install -g create-react-app
create-react-app my-demo
cd my-demo
cnpm start

2.引入react-router和ant design（ant-design是我的项目所需）

Ant-DesignUI库PC端官网

Ant-DesignUI库移动端官网

cnpm install react-router-dom --save
cnpm install antd --save

此时的目录结构如图：

3.以目前的项目结构配置，运行ant design的组件时，会加载ant design全部代码，为了能够提高性能，做到按需加载，需要进行配置。

cnpm run eject //可将所有内建的配置暴露出来，做自定义配置

此时的目录结构如图：

4.引入一个按需加载的组件

cnpm install babel-plugin-import --save-dev

//如果没有使用按需加载，使用组件的方式为：
import Button from 'antd/lib/button';
@import '~antd/dist/antd.css';//在css文件顶部引入样式

5。修改配置，使按需加载生效

我目前知道的有两种方式：一种是ant-design光放文档中的方式，这是地址，请自行阅读：使按需加载生效，另一种方式感觉比较简单一点，修改package.json文件

在package.json文件中的“bable”下加入如下代码：

"plugins": [
    ["import",{"libraryName":"antd-mobile","style": "css"}]
    //注意使用双引号
]

然后将修改代码中的组件引入方式：

import ｛Button｝ from 'antd';
//不需要再单独引入css

到此刻，使用Ant-Design这个UI框架的环境搭建完成了，接下来就可以进行前端其他的开发工作了！