React 零基础入坑

一、前提基础

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

二、开发环境

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

   

2. 全局安装webpack

npm install -g webpack
复制代码

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

三、建立一个新的 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-app
npm start
复制代码

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

3. 打开package.json，咱们发现不少安装的依赖并无显示在package.json中

npm run eject
复制代码

将会把全部内建的配置暴露出来。

四、开始开发

• 规划项目结构，在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样式才能生效）

   

   

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

五、使用ui组件

• 这里选择使用阿里的：Ant Design。
• 若是你并无使用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 (
          <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>
        )
      }
    }
复制代码

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等相关部分。