使用React和Node/Express进行全栈开发

本文通过一个简单示例，介绍了如何使用Nodejs创建后端应用，如何使用React创建前端应用，最后将React前端应用build后的静态界面，集成到后端应用中，实现了前端、后端独立开发与集成。

1. 创建项目目录

创建工程目录demo，接下来我们后端应用app和前端应用client将放到此目录中

mkdir demo
​
cd demo

2.基于Nodejs/Express/TypeScript的后端开发

使用Nodejs的web框架Express创建一个后端应用app，有关Express框架使用，大家可以参照Express官网，本文不再赘述，接下来我们将进行以下工作。

• 初始化Nodejs工程

• 安装express及express-generator

• 创建后端应用app

• 安装工程依赖模块

• 启动后端应用

2.1. 初始化Nodejs工程

cd demo
​
npm init -y
​
# 此时目录结构如下
demo
  └─package.json

2.2. 安装express及express-generator

进入demo工程目录，执行一下命令，安装Express框架及Express应用生成器

cd demo
npm i express -save
npm i body-parser  -save
npm i express-generator -g
npm i nodemon  -save-dev
​
# 此时目录结构如下
demo
  └─node_modules
  └─package.json
  └─package-lock.json
  

2.3. 创建后端应用app

使用Express应用生成器，快速创建一个后端应用，我们把它命名为app

express --view=pug app
​
# 此时目录结构如下：
demo
    └─app
        └─bin
        ├─public
        │  ├─images
        │  ├─javascripts
        │  └─stylesheets
        ├─routes
        └─views
        └─app.js
        └─package.json     
    └─package.json
    └─package-lock.json
​

为了便于前端、后端工程管理，本文删除了app/package.json，并将app/package.json中的内容合并到dem