从零开始 - 使用React+Webpack+Nodejs+Epress快速构建项目
前言
目前React、Webpack等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识统统学习一下，开启一段新的前端开发之路呢？本文将以一个例子来讲解如何使用React、Webpack、Nodejs、Express这些技术快速构建项目，为后期的深入学习铺好道路，接下来我们就一起动手体验一下吧！
1. 安装及配置环境
1.1 安装Node.js与NPM
Windows下安装Node.js还是比较方便的，请自行下载并安装， 安装包及源码下载地址为：https://nodejs.org/en/download/。安装过程基本就一直‘NEXT’就可以。安装完成后，记得到环境变量里配置了Node.js，变量值就是你的安装路径，例如“ C:Program Filesnodejs ”。
NPM是随同Node.js一起安装的包管理器，新版的Node.js已经集成了npm，所以之前npm也一并安装好了。这里就不详细说了，如有问题可自行百度一下。
1.2 创建并初始化项目
首先，进到你的工作目录里新建一个项目并打开
D:\my-work>mkdir React-Nodejs-learn && cd React-Nodejs-learn通过npm init命令为你的项目创建一个package.json文件。
D:\my-work\React-Nodejs-learn>npm init该命令会要求你输入一些参数，包括应用名、版本等，可以直接按回车设置为默认值。需要注意的是，其中有一项为entry point:，它的值为项目的入口文件，你可以设置成你想要的名称，例如app.js或者index.js等，在这儿我就默认选择了app.js。
1.3 创建项目目录
React-Nodejs-Learn
### 2.2 修改入口文件app.js// 引入模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();
// 对所有(/)URL或路由返回index.html
app.get('/', function (req, res) {
res.render('index');
});
// 设置views路径和模板
app.set('views', './client/view');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
// 静态文件配置
app.use('/client/static', express.static(path.join(__dirname, 'client/static')));
// 启动一个服务，监听从8888端口进入的所有连接请求
var server = app.listen(8888, function(){
var host = server.address().address;
var port = server.address().port;
console.log('Listening at http://%s:%s', host, port);
});
通过如下命令启动app.js：node app.js
然后在浏览器中打开 http://localhost:8888/ 并查看输出结果，结果如下图所示。, document.getElementById('main-container'));刷新一下页面，组件已经成功读取数据并渲染到页面上了，这时候可以继续编写样式代码了，在此我们就省略不写样式了。
3. 总结
至此，一个项目就快速构建好了，这样我们就可以继续后续开发工作了。当然，项目开始时，其实我们可以直接使用Express创建项目，例如通过命令express -t ejs project创建项目，此时，会自动生成一个project文件夹。文件夹里面面会有model、public、routes和views文件夹，还有app.js和package.json两个文件。不再需要我们手动创建目录。
本篇文章只着重讲了如何快速构建项目，只是一个demo，其中涉及到的知识还需大家深入学习与探索，一起加油吧！
关键字：JavaScript, react.js, webpack, node.js
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
