create-react-app结合node express框架搭建react项目开发环境
来源:互联网 发布:网络维护外包合同 编辑:程序博客网 时间:2024/06/16 03:57
前端框架一直用的Facebook 的React框架,之前后台一直在用.net,最近在学习node,因此想用node 的express框架,结合create-react-app脚手架搭建开发环境。
技术栈
一、yarn
Facebook今年推出了一款工具yarn,和npm相似,都是Nodejs包管理工具,选择yarn的主要原因有:
(1)yarn会缓存它下载的每个包,所有不需要重复下载。它还能并行化操作以最大化资源利用率,所以安装速度之快前所未有。
(2)yarn在每个安装包的代码执行前使用校验码验证包的完整性。
(3)yarn使用一个格式详尽简洁的lockfile和一个精确的算法来安装,能够确保能够在一个系统上的运行和安装过程也会以同样的方式运行在其他系统上。
选用yarn的原因也是因为yarn下载安装包的速度比npm快,yarn add 和yarn remove 对应npm的npm install 和 npm uninstall。
yarn更新版本后集成了crearte,通过yarn create 快速搭建项目。比如 yarn create react-app my-website; yarn create react-native-app my-website; yarn create next-app my-website。
二、express
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单。express仅在web应用相关的nodejs模块上进行了适度的封装和扩展,较大程度避免了过度封装导致的性能损耗。
三、create-react-appFacebook 提供了一套不需要配置的 React 开发方案,即create-react-app。这个脚手架已经做好了基础 webpack 配置,带有自动更新,错误提示等等功能,仅仅需要创建,启动就可以快速开发。
搭建项目
1、安装yarn
(1)npm方式
npm install -g yarn
(2)windows安装
windows 下需要下载msi文件 ,下载地址:https://yarnpkg.com/latest.msi;
(3)MacOS
curl -o- -L https://yarnpkg.com/install.sh | bash(4)Linux
sudo apt-key adv --keyserver pgp.mit.edu --recv D101F7899D41F3C3 echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list2、创建create-react-app脚手架
打开创建的目录,打开命令行输入yarn create react-app my-website,可以看到目录结构
3、开始开发:cd my-website &&yarn start
打开会默认启动端口为3000的页面,如果端口有冲突,会提示是否选用另一个端口
进入src目录开始开发,注意:开发的文件都在src目录下
express框架搭建
由于在项目开发过程中需要express构建server端应用,开发模式需要做一些小调整。
1、在项目的根目录下创建server的文件夹和初始化的package.json文件
mkdir server && cd server && yarn init
2、增加依赖包
yarn add express body-parser nodemon babel-cli babel-preset-es2015主要用到express, body-parser, nodemon(监测node.js改动兵自动重启, 适用于开发阶段),babel-cli和babel-preset-es2015(以便使用es6开发)
3、执行express
在执行express之前需要全局安装express-generator(npm install express-generator -g);然后在server文件下执行express命令,就会在server文件夹中生成express构件的nodejs服务器模块。
4、修改express的端口
由于express默认的端口也是3000,所以需要给express的端口重新设置下,打开express项目bin目录下的www文件,将3000端口修改为3001
5、执行express的npm start 提示有两个包未安装执行 npm install serve-favicon 和 npm install morgan 安装这两个包
6、修改package.json
server 文件下express默认生成的script是:
"scripts": { "start": "node ./bin/www" }将其修改为:
"scripts": { "start": "nodemon --exec node ./bin/www" }7、create-react-app服务 启动时,同步启动server端的服务器
修改my-website问价下的package.json文件
create-react-app会默认添加4段script:
"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject"}需要对start 和 build进行调整,以便同事启动前端和后端的服务。
首先安装 concurrently包(yarn add concurrently)
package.json 修改为:
"scripts": { "react-start": "react-scripts start", "start": "concurrently \"yarn react-start\" \"cd server && yarn start\"", "react-build": "react-scripts build", "build": "concurrently \"yarn react-build\" \"cd server && yarn build\"" },这样,我们只要执行yarn start 会同步启动 webpack 以及 server文件下的nodemon.
分别在浏览器打开localhost:3000和localhost:3001 打开前端和后台页面
参考文献:
http://blog.csdn.net/ogog123/article/details/77116204
https://segmentfault.com/a/1190000009857965
http://blog.csdn.net/kang_xiong/article/details/53234974
- create-react-app结合node express框架搭建react项目开发环境
- 使用express, create-react-app, mongodb搭建react模拟数据开发环境
- react-redux-webpack-express开发环境搭建
- react---学习笔记:使用create-react-app快速构建开发环境并创建项目
- react前端+node后台+mongoose+express框架搭建
- 搭建Node(React native)开发环境
- Create-react-app 构建react环境
- Create-React-App创建React项目
- express+webpack+react搭建项目
- REACT 项目环境搭建
- Create-React-App创建antd-mobile开发环境
- Create-React-App创建antd-mobile开发环境
- 使用Create-React-App脚手架创建antd-mobile开发环境
- 关于create-react-app搭建react环境并修改端口号
- react开发环境搭建
- react开发环境搭建
- React框架学习之react环境搭建
- 使用Facebook的create-react-app快速构建React开发环境
- CRC原理详解(附crc16校验代码)
- 7.jquery-ajax的使用
- 反转问题
- 搭建SSM常用配置jdbc.properties
- ViewPager加载fragment
- create-react-app结合node express框架搭建react项目开发环境
- 整理MAC下Eclipse的常用快捷键
- Linux查看内存命令及其对命令显示的解释
- 剑指offer---重建二叉树
- MySQL(二)BinLog恢复数据
- TCP send函数 阻塞发送数据详解
- 使用java编程猜数字游戏
- Android使用自定义控件实现加载网络图片无限轮播
- IDEA @Override is not allowed when implementing interface method