React（二）：基础项目搭建

最新推荐文章于 2025-03-20 15:51:01 发布

原创

最新推荐文章于 2025-03-20 15:51:01 发布 · 450 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#React

近期在用React相关技术编写一个简单的会议室预定系统，将基础的项目搭建部分整理出来，分享一下。

编程工具：Webstorm（jetbrains公司旗下的一款JavaScript开发工具，素有“Web前端开发神器”、“最强大的的HTML5编辑器”等称号，个人觉得开发工具没强制要求，用习惯了就好）

基础技术：Node.js，Webpack，React，Babel，Webpack-dev-server

项目搭建

1、安装node.js和npm

从Node.js官网下载最新版的Node（https://nodejs.org/en/），默认会安装npm

2、新建项目

（1）新建一个项目，命名为ConferOrder（会议室预定）

（2）新建开发目录，命名为src，

新建组件目录，Components，用来放React组件

新建main.js，作为主入口文件

（3）新建输出目录。命名为build

build,js是webpack打包后自动生成的供浏览器解析的js文件，不需要新建；

index.html是最终要呈现的页面文件（可以手动建立，也可以根据模板进行相关配置生成），此处手动建立，代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ConferOrder</title>
</head>
<body>
<!--要插入React组件的位置-->
<div id="content"></div>
<!--引入bundle.js-->
<script src="bundle.js"></script>
</body>
</html>

3、创建package.json文件

package.json是一个标准的npm说明文件，包含了当前项目的依赖模块，自定义的脚本任务等。

打开控制台，进入项目根目录，输入 npm init 自动创建package.json

输入命令后，终端会出现一系列问题，默认回车就可以，确认后输入yes，即可看到package.json创建完成。

4、安装webpack

在本项目中安装webpack，命令行输入：npm install --save-dev webpack

其中的 --save-dev 是将依赖写入项目的package.json文件中的 “devDependencies"（只会在开发环境下依赖的模块）；

&nbs

最低0.47元/天解锁文章

新学期VIP享超值加赠