Webpack + React + Express 脚手架推荐? Nodejs版
Webpack + React + Express 脚手架推荐? Nodejs版
网页前后端小白,之前写过 React Native, 所以对 React 和 ES6 都有点了解。
现在想学一下网页前后端,打算直接全栈 JavaScript 先探一下水,所以想问一下,有没有 Webpack + React + Express 的脚手架推荐?从头搭一个感觉对初学来说不太友好,打算先用着一个脚手架,先熟悉开发之后再深入了解脚手架部分。
希望是 React 服务端渲染那种。
谢谢了!
https://github.com/chikara-chan/react-isomorphic-boilerplate
不过还是建议先单独看看 React、Redux、React-Router,熟悉之后再去了解服务端渲染。
如果想要快速的话,可以试着直接用 Dva 吧,整合了 React 相关常用的几个库,可以省很多功夫。
没搞过服务器端,客户端的倒是自己搭了一个
好像有一个 MERN,,,对应 Angular 的 MEAN。
之前都是一直写移动端原生,后来变了 React Native,然后现在想在划水的时间学一下搭网站
next.js 似乎没有什么大型项目在用,这个是沃尔玛已经用在生成环境的,考虑很周到
https://github.com/electrode-io/electrode
有没有能兼容 react native 轻松移植 mobile 的脚手架?
create-react-app + express + proxy
https://daveceddia.com/create-react-app-express-backend
服务端渲染要另配
什么是脚手架?
https://github.com/duan602728596/webpackconfig 自己搭着用的,webpack+koa2+react16+sass,不复杂,而且自己写的软件也是基于这个改的
针对Webpack + React + Express的脚手架推荐,以下是一个专业且实用的方案:
推荐脚手架
Create React App + Express Generator
-
Create React App:这是Facebook官方提供的React脚手架工具,可以快速搭建一个React开发环境。它内置了Webpack,并进行了优化配置,无需手动配置Webpack即可进行开发。
使用方式:
npx create-react-app my-react-app cd my-react-app npm start
-
Express Generator:这是Express官方提供的脚手架工具,可以快速生成一个具有基本结构的Express应用。
使用方式:
npx express-generator my-express-app cd my-express-app npm install npm start
集成方案
-
在Create React App生成的React项目中,可以单独运行React开发服务器。
-
同时,在另一个终端窗口中运行Express服务器,作为API后端。
-
若需要前后端联调,可以在Express服务器中设置代理,将前端请求转发给React开发服务器。例如,在Express的
app.js
中添加以下代码:app.use(express.static(path.join(__dirname, 'client/build'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'client/build', 'index.html')); });
其中,
client/build
是React打包后的输出目录。
通过以上方式,即可实现Webpack + React + Express的脚手架搭建与集成。