从零构建react项目

一、背景

本人是某小厂的普通前端，正打算学习react，有Vue和Angular的开发经验。用Vue构建过两个小型项目，用Angular构建过一个大型项目。借着学习react的机会，顺便更新一下博客，更新时间尽量保持规律。

学习嘛，就简单点，使用react做一个个人网站。

二、准备

用过Vue和Angular的人都知道，前端项目用npm构建的话是需要引入各种包，还需要配置webpack的。如果不使用别人提供的脚手架，自己去搭建一个项目，作为一个菜鸡，这一套配置下来，可能会死。

1. 安装node，会自带npm工具，不多说
2. 安装react的脚手架，官方推荐有好几种，这里使用create-react-app

三、起步

按照以下步骤，就可以成功的搭建一个初始的项目了。

1. 使用脚手架搭建一个react项目，create-react-app my-resume
2. 进入项目目录，运行 npm install 安装依赖包，install失败的话，自己去切换镜像
3. 运行 npm run start ,启动项目

项目目录如下：

-- public // 静态资源目录，src目录下无法在代码里访问的
  |-- favico.ico
  |-- index.html
  |-- manifest.json
-- src
  |-- App.css
  |-- App.js  // 项目的根组件
  |-- App.test.js  // App.js 的单元测试文件
  |-- index.css  // 公共样式
  |-- index.js  // 项目的入口js，类似于vue的main.js
  |-- logo.svg
  |-- serviceWorker.js
-- .gitignore
-- package-lock.json
-- package.json
--README.md
--yarn.lock

四、搭建

create-react-app这个脚手架生成的项目只有最基础的东西，如果需要拿来做开发，还缺少项目结构划分、路由配置、状态管理、与后端的通信等最基本的东西。

那就把简单的react项目分为项目结构划分、路由配置、与后端通信这三个阶段吧。在这之前，先把目录结构整理一下，让项目看起来规范一点。

1.目录划分

在src目录下，新增 assets、component、router、view 四个目录，分别拿来存放项目资源、组件、路由配置、项目页面。其中资源是指一些图片、样式库、js库文件，项目页面是会对应路由的组件。

结构如下：

-- public // 静态资源目录，src目录下无法在代码里访问的
  |-- favico.ico
  |-- index.html
  |-- manifest.json
-- src
  |-- assets
    |-- images
    |-- css
  |-- component
    |-- common
    |-- resume
  |-- router
  |-- view
    |-- Home.js // 主页
  |-- App.css
  |-- App.js  // 项目的根组件
  |-- App.test.js  // App.js 的单元测试文件
  |-- index.css  // 公共样式
  |-- index.js  // 项目的入口js，类似于vue的main.js
  |-- logo.svg
  |-- serviceWorker.js
-- .gitignore
-- package-lock.json
-- package.json
--README.md
--yarn.lock

2.路由配置

最开始以为这玩意的路由配置会和Vue和Angular一样简单，结果发现想多了，React里路由的写法就有点特别，配置的方式更是多种多样,看了十多个人的博客，还翻了好几个github的代码，没有一个是一样的。

但是万变不离其宗，浏览器的url有两种形式：hash和history。Vue和Angular也实现了这两种的支持，那React肯定也有。选定一个方向，以history方式为方向开始配置吧。

配置路由的时候遇到两个难点

1. 没有意识到react的路由会如此灵活多变，在Router、Route的区别上纠结了
2. react-router的版本带来了问题，很多人的博客上，Router和Route都是从 react-router 里import的，在自己的项目import却没用。

前后大概花了5个小时，搞懂了Router相当于容器一样，Route就是对应的一个路由，需要放在容器里。react-router的版本是最新的，所以也不能按照别人的博客里那样配置。

最骚的是，我打开node_modules，找到了react-router，发现压根就没有Router、Route这些，但是我在react-router-dom里找到了他们。

于是路由的配置就变得很简单了。最终结果如下：

// AppRouter.js
// router目录下新建了AppRouter.js
import { BrowserRouter, Route } from 'react-router-dom';
import React from 'react';

import App from '../App';
import Home from '../view/Home';

export default class AppRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <App>
          <Route path="/" component={Home}></Route>
        </App>
      </BrowserRouter>
    )
  }
}


// index.js
// 修改入口组件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';

import AppRouter from './router/AppRouter';

ReactDOM.render((<AppRouter/>), document.getElementById('root'));
serviceWorker.unregister();

3. 前后端通信

react项目用axios请求后台的方案居多，这里也以这个来搭建吧。

• 首先npm install axios --save。
• 然后按照习惯，请求接口需要与具体业务分离，方便数据与行为的解耦。在src目录下新增一个文件夹，命名为api。api目录下新建一个文件，命名为server用于引入和封装axios，再新建一个文件用于测试配置是否成功。
• 接着就是动手撸代码了。

// server.js
export default class Server {
  axios(method, url, data) {
    return new Promise((resolve, reject) => {
      let _option = {
        method,
        url,
        baseUrl: baseUrl,
        timeout: 30000,
        params: null,
        data: data,
        headers: null,
        //withCredentials: true,  //是否携带cookie发起请求
        validateStatus: (status) => {
          return status >= 200 && status < 300
        },
      }
      axios.request(_option).then(res => {
        resolve(typeof res.data === 'object' ? res.data : JSON.parse(res.data))
      }, error => {
        if (error.response) {
          reject(error.response.data)
        } else {
          reject(error)
        }
      })
    })
  }
}

五、总结

项目配置到这个地方，已经可以开始最基本的开发了。这篇没有说到redux配置，其实在简单的项目中，状态管理可能并不是特别需要，见文章“You Might Not Need Redux”。

说说初学react和vue还有angular的区别：

1. 官网文档不是一般的不友好，框架版本不说，很多地方的例子也不够友好，尤其是路由相关的东西。这点来说，vue和angular简直太棒了。
2. react的生态是真的庞大，找一个路由的对象配置方案，结果是国外大神写的库。vue的库也很多，而angular的却很少，但是angular官方自带的东西太齐全。
3. react灵活的超出我的想象。配置一个路由，在网上找了大约20多篇博客，没有一篇是配置的一样的。图片的引入方式也是清奇。

这里的项目会上传到github项目：项目地址.