Webpack + React + Express 脚手架推荐? Nodejs版

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

Webpack + React + Express 脚手架推荐? Nodejs版

网页前后端小白,之前写过 React Native, 所以对 React 和 ES6 都有点了解。

现在想学一下网页前后端,打算直接全栈 JavaScript 先探一下水,所以想问一下,有没有 Webpack + React + Express 的脚手架推荐?从头搭一个感觉对初学来说不太友好,打算先用着一个脚手架,先熟悉开发之后再深入了解脚手架部分。

希望是 React 服务端渲染那种。

谢谢了!


13 回复

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 的脚手架?

服务端渲染要另配

什么是脚手架?

英文好像是 boilerplate, 大概就是一个基础框架吧

https://github.com/duan602728596/webpackconfig 自己搭着用的,webpack+koa2+react16+sass,不复杂,而且自己写的软件也是基于这个改的

针对Webpack + React + Express的脚手架推荐,以下是一个专业且实用的方案:

推荐脚手架

Create React App + Express Generator

  1. Create React App:这是Facebook官方提供的React脚手架工具,可以快速搭建一个React开发环境。它内置了Webpack,并进行了优化配置,无需手动配置Webpack即可进行开发。

    使用方式:

    npx create-react-app my-react-app
    cd my-react-app
    npm start
    
  2. Express Generator:这是Express官方提供的脚手架工具,可以快速生成一个具有基本结构的Express应用。

    使用方式:

    npx express-generator my-express-app
    cd my-express-app
    npm install
    npm start
    

集成方案

  1. 在Create React App生成的React项目中,可以单独运行React开发服务器。

  2. 同时,在另一个终端窗口中运行Express服务器,作为API后端。

  3. 若需要前后端联调,可以在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的脚手架搭建与集成。

回到顶部