react入门-React + webpack 开发单页面应用（react快速上手教程）

2018.09.26终—2019.11.10更—
注意：在现今前端的日常开发中需要nodejs+npm环境和基本的计算机知识（如命令行）。详情参考：nodejs 和 Linux命令大全。不知道的请先去学会，不然下面的内容有可能不适合你。会使用shell的高手，请直接去博文最低下的附件3。

一、创建项目、安装基本第三方库以及配置所需目录

1.1 创建项目

sudo npm i -g create-react-app # npm下安装react环境
create-react-app react-demo # 创建一个项目名为react-demo的react项目
cd react-demo # 进入此项目
npm start # 运行项目（项目运行后，查看项目文件和运行结果，查看完毕后，再进行下面操作）

1.2 自定义配置模式

npm run eject # 此时默认的项目结构会发生较大变化，注意观察前后变化

1.3 安装一些基本的第三方库

npm i react-router-dom   # react 路由器的DOM绑定（必安装）
npm i node-sass sass-loader axios es6-promise    # 使用sass和axios请求方式（根据个人情况决定是否安装，本人使用sass和axios）

1.4 配置所需目录

不会shell的，可以手动配置目录为以下结构:（主要配置public和src其他默认就好）

├── config                          # 配置文件夹
├── node_modules                    # node 依赖文件夹
  ├── ...                           # 各种npm的js库
├── public                          # 静态资源目录、入口文件目录
  ├── image                         # 静态图片存放
  ├── js                            # 本地js第三方库
  ├── favicon.ico                   # 浏览器标签栏图标
  ├── index.html                    # 入口 index.html 文件
  ├── manifest.json                 # 配置参数
├── scripts                         # npm 脚本文件夹
  ├── ...                           # 默认
├── src                             # 开发目录
  ├── api                           # 请求
    ├── index.js                    # 请求的js
  ├── components                    # 组件
  ├── config                        # 配置
    ├── index.js                    # 配置的js
  ├── router                        # 路由
    ├── index.js                    # 路由配置入口js
  ├── style                         # 样式
    ├── index.scss                  # css样式主文件
  ├── tools                         # 自定义js工具包
    ├── index.js                    # 自定义的js方法
  ├── views                         # 单页面应用
    ├── home.jsx                    # 首页jsx组件
  ├── App.js                        # dom 挂载文件
  ├── index.js                      # 入口文件
  ├── App.test.js                   # 测试文件
  ├── serviceWorker.js              # 注册服务文件，旧版本是registerServiceWorker.js
  ├── setupProxy.js                 # 配置代理
├── package-lock.json               # 包锁定文件，不用管。
├── package.json                    # 配置文件，有些内容在此配置
└──README.md                        # 说明文档，该文档非常丰富，建议由时间阅读

会shell的可以执行我的快捷命令，不会的请按照上面的自行手动构建:

# react-src-catalog-building.sh
# 新建文件 react-src-catalog-building.sh，内容如下：（以下内容可以通过命令行执行）
cd src && mkdir api components config views router style tools # 在src下，创建我们需要的文件夹
rm -r App.css index.css logo.svg # 删除App.css App.test.js index.css logo.svg等无用文件
cd api && touch index.js && cd ../ # api => index.js
cd config && touch index.js && cd ../ # config => index.js
cd router && touch index.js && cd ../ # router => index.js
cd style && touch index.scss && cd ../ # style => index.scss
cd tools && touch index.js && cd ../ # tools => indext.js
cd views && touch home.jsx && cd ../ # views => home.jsx
touch setupProxy.js
cd ../

# 运行shell文件 react-src-catalog-building
sh react-src-catalog-building.sh # 如果是通过命令行执行上面内容，则不需要执行该命令

二、配置config相关

2.1 配置支持 @ 文件映射 src 目录

在根目录下的/config/webpack.config.js 文件中，找到 alias 的配置:

注意：旧版是/config/webpack.config.dev.js 文件和 /config/webpack.config.prod.js 文件中，找到 alias 的配置

alias: {
  ...
  '@': path.join(__dirname, '..', 'src'), // 添加这段内容
}

2.2 配置项目支持 scss 文件

新版你可以跳过这一步，因为它自己已经做了scss的支持

在根目录下的 /config/webpack.config.dev.js 文件和 /config/webpack.config.prod.js 文件中，找到 module 的配置

module: {
  strictExportPresence: true,
  rules: [
    { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'],},    // 再rules这个数组中第一个位置,添加这段内容
    ...
    {
      // "oneOf" will traverse all following loaders until one will
      // match the requirements. When no loader matches it will fall
      // back to the "file" loader at the end of the loader list.
      oneOf: [
        ...
        {
          exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],   # 改为 exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /.scss$/], // 增加 /.scss$/ 来使其支持sass
          loader: require.resolve('file-loader'),
          options: {
            name: 'static/media/[name].[hash:8].[ext]',
          },
        },
      ]
    }
  ],
  ...
}

三、配置src下各个文件

3.1 配置 src/index.js 文件

import React from 'react'
import ReactDOM from 'react-dom'
import './style/index.scss'
import App from './App.js'
import * as serviceWorker from './serviceWorker' // 注意：新版本此处与旧版不一致，以新版为主；旧版import registerServiceWorker from './registerServiceWorker'

ReactDOM.render(<App />, document.getElementById('root'))

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister() // 注意：新版本此处与旧版不一致，以新版为主；旧版registerServiceWorker()

3.2 配置 src/App.js 文件

import React, {
    Component } from &