React 零基础入坑

1、前提基础

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

2、开发环境

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

npm install -g webpack

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

3、创建一个新的 React APP

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

npm install -g create-react-app

初始化一个项目

npx create-react-app my-app (npxs是npm 5.2+ 附带的包运行工具)
cd my-app
npm 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

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

在conponents下创建common文件夹，分别建立header和footer组件，在pages下创建home组件。在src下创建router文件夹，创建路由文件。
启动项目之后，发现页面直接重定向到了‘/home’，和我们效果图看到的一样。

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

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

安装less和less-loader

cnpm i -S less less-loader

修改webpack.config.js

const cssRegex = /\.css/; => const cssRegex = /\.css|less/;

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

修改我们的css文件为less文件，然后重启项目（这里安装了css处理器，需要重启less样式才能生效）

审查元素，发现样式已生效。

5、使用ui组件

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

安装antd

yarn add antd 或者 npm install -S antd

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

    import React, { Component } from 'react';
    import './index.less';
+   import Button from 'antd/lib/button';
    export default class Home extends Component {
      render() {
        return (
          <div className="home_page container">
            <h1 className="home_page_title">this is a home pages</h1>
            <div className="main_content">
        +     <Button type="primary">Login</Button>
        +     <Button>go to console</Button>
            </div>
          </div>
        )
      }
    }

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

@import '~antd/dist/antd.css';

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

['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]

import Button from 'antd/lib/button'; => import { Button } from 'antd'

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

随笔

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