简介
react-es6-webpack-express-starter 是一个使用了 React 和 ES6 的前端 Web 开发模板，基于 webpack 和 express 实现。它提供了一个良好的开发环境以便于你快速搭建起你的 Web 项目。
前置条件
使用 react-es6-webpack-express-starter 时需要首先安装以下工具：
安装
克隆或下载本仓库项目：
- --- ----- ------------------------------------------------------------ ------
进入下载的项目目录并使用 npm 安装依赖：
- -- ------ - --- -------
启动开发服务器：
- --- -----
在浏览器中打开
http://localhost:3000/即可看到运行结果。
目录结构
项目的目录结构如下：
- --- ------------ --- --------- --- ----------------- --- --- - --- ------ - - --- ------ - - --- ---------- - --- ------ - - --- -------- - --- ------ - --- ---------- - --- ------ --- ------------
其中：
client目录下是客户端代码。app.js是整个应用的入口文件，index.html是客户端渲染页面的模板。server目录下是服务端代码，用来启动一个 express 服务器。shared目录下是共享的代码，例如 React 组件等。
使用
编写客户端代码
在
src/client目录下找到app.js，这是整个应用的入口文件。你可以在这里编写你的 React 组件。------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- --------------------------- -------------------- --- --------------------------------
编写共享代码
在
src/shared目录下编写共享代码。例如，在components目录下添加一个名为App.js的组件：------ ----- ---- -------- ----- --- - -- -- - ----- ----------- -- --------------------------------------- ------ -- ------ ------- ----编译
在终端中输入以下命令进行编译：
- --- --- -----
启动服务器
在终端中输入以下命令启动服务器：
- --- --- -----
在浏览器中打开
http://localhost:8080/即可看到运行结果。
结论
现在你已经学会了如何使用 react-es6-webpack-express-starter。通过这个简单的模板，你可以轻松地创建和开发更复杂的 Web 应用程序。祝你旅途愉快！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562de81e8991b448e058f