前段时间有一个新的项目，前端程序员没有到位，我临时接手。作为一个万年后端，我有点蒙啊。我发现，网上很多教程都过于零散，而且往往针对某一个包，项目的组织也不利于拓展。更可怕的是，每一个项目都有点自己的风格，刚刚接触他们的后端程序员看多了越看越迷糊。
比如，如何开始一个新项目？？到底应该如何组织项目文件结构？一个成熟的React项目需要那些基本包？每一个文件夹里应该放什么样的文件？不用的包之间是如何互动的？我该如何Debug？？我该用那种编码风格？？
写这篇文章就是为了协助后端的弟兄，迅速的理解前端框架业务逻辑、常用库以及项目架构方便日后拓展，节约时间避免踩坑。这篇文章会通过一个项目一步步说明文件组织和应用逻辑，虽然它没有包含很多功能，也不是唯一的实现方法，但是最终你会得到一个可拓展的React项目框架，知道如何在此基础上增加新的组件（这也是React优雅的地方），是一个很好的开始点！文章大部分素材来源于网络[1]。这篇文章以后你会得到一个这样的App框架，他具有：
- 好的项目结构
- 好的代码风格
- 好的状态管理
- 好的异步side-effect管理
- 好的路径管理
一直以为前端就是Html和一点JavaScript，上网一看原来前端别有洞天。首先我去临时补了一下JavaScript的语法。这里有一点提醒大家，JS这语言是我看到版本迭代最五花八门的了，请直接学习ES6及以后的版本，之前的语法就请抛弃吧。然后发现了火爆的前端框架React，溜了一遍教程和概念，感觉设计理念不错：利用Component最大程度实现z组件解耦。再然后发现，大部分项目都用到了Redux进行组建（Component）的状态管理，Redux总体的设计思路其实跟大部分事件驱动框架类似，就是实现单一状态源（Single Source of Truth）、状态（State）不能直接修改只能通过事件动作（Action）修改。再然后发现，大部分项目还会用到一个东西就是Redux-Saga，它主要负责处理Action触发的带有Side-effect的过程，比如生成随机数、调用远程API、访问数据库等等。通过Saga，不但实现了异步，还把完全纯净的环境留给了Redux，这样Redux可以专心管理系统状态而不用担心Side-effect。
继续阅读以前，如果你对React、Redux还一无所知，请先浏览这两个框架的相关Get Start教程，对基本的概念有所了解。
请按照顺序阅读，最好打开编辑器或IDE一起操作，这样保证你结束这篇文章的时候已经对React的这个生态圈有一个良好的认识了。好了，我们开始吧！相关的代码我放在这里：wangzhe3224/react-todo
我做这个项目主要用到如下包：
- react
- redux
- redux-saga
- react-bootstrap
- prop-types
- react-router-dom
- prettier
我们会建立一个可以拓展的项目结构，利用上述包，构建一个To-do应用（有没有很耳熟，每个人讲React都是用TODO！）。这个APP会调用一个远程API获取列表，可以插入新的项目。但是这个文章的目的不是做一个APP，而是弄清楚如何从0开始构建一个可以拓展的React项目。
1、安装和调试开发环境
首先，我们需要安装Node.js和npm。我的系统环境是Ubuntu 19.04。
# 安装nodejs
sudo apt-get install nodejs
# 检查nodejs和npm的版本
node -v
npm -v 请确保Node.js版本大于10.15， npm版本大于6。如果没有请更新:
sudo apt-get update # Update source
sudo apt-get upgrade nodejs
sudo npm install -g npm@latest好，环境已经就绪。现在我们建立一个基本的React应用目录结构
npx create-react-app react-todo这个命令会建立一个 react-todo 的项目目录，里面已经具有了一个基本项目应该具有的大部分文件结构和包管理文件。进入新建的目录，输入npm start, 你就可以在localhost:3000看到默认的React界面啦！我们已经完成了基本开发环境搭建，然我们继续看如何规范代码风格。
2、规范化编码格式
因为很多历史原因，JavaScript充满了各种各样的代码风格，比如用不用分号？用几个空格缩进？用空格还是tab？？虽然各种风格没有对错之分，但是同一个项目应该只存在一种代码风格。Prettier就是这样一个包，帮助我们规范代码风格。Prettier如何设置的合理，团队的其他成员就可以容易接手你的项目进行开发，而不用纠结用哪种代码风格，因为他（她）在编写程序的时候，Prettier就会提示正确的风格。
首先，我们停止本地的Server，在Terminal按 Ctrl+C 终止进程。然后，输入如下命令安装：
npm install husky lint-staged prettierhusky和lint-staged: 这两个包会把NPM脚本挂在githook，这样当程序员commit代码的时候，Prettier就会运行prettier就是我们的明星格式包！
安装完成后，我们需要配置package.json，在文件中添加如下内容：
// ./package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --single-quote --write",
"git add"
]
},
"prettier": {
"singleQuote": true
}经过这些设置，代码在pre-commit阶段就会被检查。不过如果你使用如WebStorm之类的IDE，安装Prettier插件也是一个不错的选择！只要在程序编辑器内，按下Alt+Shift+Ctrl+pIDE就会开始规范代码，非常方便。
3、React Bootstrap
现在，我们的代码已经看起来非常漂亮了（虽然并没有写什么代码还嘎嘎），但是我们现在是前端程序员，基本的UI审美还是需要的。React Bootstrap就是我们的救星，只需要简答设置，就可以产生可以接受的前端界面。
首先，我们安装包npm install react-bootstrap bootstrap。 然后，我们需要修改./public/index.html来包含Bootstrap的风格文件。
<!-- ./public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... title and other elements ... -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="ano
最低0.47元/天 解锁文章
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
