1、前提基础

• 学习react之前需要掌握基本的js、css、html基础知识
• node.js、git、webpack基础知识
• 对jsx语法（js的一种语法糖）有一定的了解

2、开发环境

1. 安装node.js（要求版本:node>=6,npm>=5.2）,直接去下载安装包即可，安装完成以后可以打开cmd/git,通过node -v/npm -v 查看版本。

2. 全局安装webpack

npm install -g webpack复制代码

3. 安装git(用于代码管理)，直接百度下载安装包即可。

3、创建一个新的 React APP

1. 这里使用官方推荐的脚手架（Create React App）来初始化项目。首先全局安装create-react-app

npm install -g create-react-app复制代码

2. 初始化一个项目

npx create-react-app my-app (npxs是npm 5.2+ 附带的包运行工具)cd my-appnpm start复制代码

到此我们的react项目就搭建起来了

3. 打开package.json，我们发现很多安装的依赖并没有显示在package.json中

npm run eject复制代码

将会把所有内建的配置暴露出来。

4、开始开发

• 规划项目结构，在src下新建pages,layout,components文件夹，将组件划分为页面组件、布局组件、功能组件。
• 安装react-router, 这里我们使用react-router-dom（react-router-dom会安装自己的依赖，其中就包括react-router）

cnpm i -S react-router-dom复制代码

• 现在我们来完成一个简单的布局。如下图所示，它由一个公共的头部、底部组件和主体部分组成：

1. 在conponents下创建common文件夹，分别建立header和footer组件，在pages下创建home组件。在src下创建router文件夹，创建路由文件。

2. 启动项目之后，发现页面直接重定向到了‘/home’，和我们效果图看到的一样。

• less配置，查看webpack.config.js，发现只有scss（sass）的配置，如果你使用的sass，直接安装依赖即可，接下来的部分你可以跳过

const cssRegex = /\.css/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass)$/;const sassModuleRegex = /\.module\.(scss|sass)$/;复制代码

1. 安装less和less-loader

cnpm i -S less less-loader复制代码

2. 修改webpack.config.js

const cssRegex = /\.css/; => const cssRegex = /\.css|less/;复制代码

在loader配置部分加入：{    loader: require.resolve('less-loader')}复制代码

3. 修改我们的css文件为less文件，然后重启项目（这里安装了css处理器，需要重启less样式才能生效）
   审查元素，发现样式已生效。

5、使用ui组件

• 这里选择使用阿里的：。
• 如果你并没有使用yarn run eject命令将内建的配置暴露出来，那么你可以选择按照文档中推荐的方式（config-overrides.js）来扩展配置。
• 这里我们将介绍暴露出配置文件后如何配置

1. 安装antd

yarn add antd 或者 npm install -S antd复制代码

2. 在页面中使用，如在home组件中使用按钮

import React, { Component } from 'react';    import './index.less';+   import Button from 'antd/lib/button';    export default class Home extends Component {      render() {        return (          
    
            
     
this is a home pages
            
     
              +     
      Login        +     
      go to console            
     
          
    
        )      }    }复制代码

3. 这时发现页面上出现了按钮，但是并没有样式。你可以向下面这样在全局css中引入antd.css。但是这会将所有的css文件全部加载，从性能考虑，所以并不推荐。

@import '~antd/dist/antd.css';复制代码

4. 按需引用，在webpack.config.js的plugins中加入如下配置项，并修改引用方式

['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]复制代码

import Button from 'antd/lib/button'; => import { Button } from 'antd'复制代码

5. 重启项目，发现按钮样式已加载。

随笔

• 由于自己也是个react初学者，过程中可能会存在诸多问题，欢迎指正。
• 后续将继续更新api、路由鉴权、redux等相关部分。