npm 包 react-es6-webpack-express-starter 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

react-es6-webpack-express-starter 是一个使用了 React 和 ES6 的前端 Web 开发模板，基于 webpack 和 express 实现。它提供了一个良好的开发环境以便于你快速搭建起你的 Web 项目。

前置条件

使用 react-es6-webpack-express-starter 时需要首先安装以下工具：

Node.js

安装

克隆或下载本仓库项目：

$ git clone git@github.com:alexnoz/react-es6-webpack-express-starter.git my-app

进入下载的项目目录并使用 npm 安装依赖：
```
$ cd my-app
$ npm install
```
启动开发服务器：
```
$ npm start
```
在浏览器中打开 http://localhost:3000/ 即可看到运行结果。

目录结构

项目的目录结构如下：

-- -------------------- ---- -------
-
--- ------------
--- ---------
--- -----------------
--- ---
-   --- ------
-   -   --- ------
-   -   --- ----------
-   --- ------
-   -   --- --------
-   --- ------
-       --- ----------
-           --- ------
--- ------------

其中：

client 目录下是客户端代码。app.js 是整个应用的入口文件，index.html 是客户端渲染页面的模板。
server 目录下是服务端代码，用来启动一个 express 服务器。
shared 目录下是共享的代码，例如 React 组件等。

使用

编写客户端代码

在 src/client 目录下找到 app.js，这是整个应用的入口文件。你可以在这里编写你的 React 组件。

import React from 'react';
import ReactDom from 'react-dom';
import App from '../shared/components/App';

ReactDom.render(<App />, document.getElementById('app'));

编写共享代码

在 src/shared 目录下编写共享代码。例如，在 components 目录下添加一个名为 App.js 的组件：

-- -------------------- ---- -------
------ ----- ---- --------

----- --- - -- -- -
  -----
    ----------- -- ---------------------------------------
  ------
--

------ ------- ----

编译

在终端中输入以下命令进行编译：
```
$ npm run build
```
启动服务器

在终端中输入以下命令启动服务器：
```
$ npm run serve
```
在浏览器中打开 http://localhost:8080/ 即可看到运行结果。

结论

现在你已经学会了如何使用 react-es6-webpack-express-starter。通过这个简单的模板，你可以轻松地创建和开发更复杂的 Web 应用程序。祝你旅途愉快！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e058f