使用 React、Node 和 Express 创建 WebApp

Question

我的 WebApp 需要一点帮助所以我开始使用 NodeJs 和 Express，现在我想在我的 EditProfile 页面上集成一些 React。

那我该怎么做呢？

我试过一些简单的东西，比如

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

但是没用

在这里和那里搜索了一些帮助，但找不到任何简单的例子让我理解。

任何人都可以给我一些提示，帮助我使用 React 和节点构建水疗中心吗？

Answer 1

我假设你正在使用 webpack 作为你的捆绑器（这是我更熟悉的，所以我可以给你更好的指导），如果你没有 webpack:

sudo npm install -g webpack@1.12.13

首先你需要确保你已经安装了 react 和 react-dom 库，如果没有的话去你的项目文件夹和运行这个命令（这是我的版本当前在一个项目中使用，但您可以使用另一个项目):

npm install --save react@0.14.7 react-dom@0.14.7

其次，你需要 Babel 来转译 ES6 代码，不是强制性的，但使用 Babel 更方便，这是你在开发环境中需要的依赖项：

npm install --save-dev webpack@1.12.13 babel-core@6.5.1 babel-loader@6.2.2 babel-preset-es2015@6.5.0 babel-preset-react@6.5.0

我知道这可能很乏味，所以请耐心等待....

在您的开发设置中，您可能会使用 ES6 功能，这是当像 webpack 和 Babel 这样的捆绑器派上用场时，Babel 会将您的 ES6 代码转换为 ES5（在每个浏览器中实现）并且 Webpack 正在将所有文件与 require 以及依赖项捆绑在一起，并生成 bundle.js（您的整个应用程序）。

让我们配置 Webpack！在项目的根目录中，您会找到（或创建）一个 webpack.config.js 文件，对于非常简单的设置，内容应该如下所示：

  module.exports = {
  entry: './public/app.jsx',
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    root: __dirname,
    // Thanks to this aliases we can reference component files without specifiying the path each time
    alias: {
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
  //Added the loader into modules
    loaders: [
      {
      //Loader Name
        loader: 'babel-loader',
        //Specifies what we whant the loader to make with our files
        query: {
        //We told Babel to take our files and transforms them trough react and then the es2015
          presets: ['react', 'es2015']
        },
        //Regular expresion to find the files we want to parse within our project
        test: /\.jsx?$/,
        //Specifies the directories we do not want to parse.
        exclude: /(node_modules|bower_components)/
      }
    ]
  }
};

现在您已经完成了所有基本设置，您可以使用以下命令捆绑所有内容：

webpack

您可以在我的 github 个人资料中找到我制作的样板项目以及如何运行它的说明，它有一个很好的文件夹结构和一个快速服务器供您运行你的测试。这应该会让一切都更清楚。

https://github.com/agustincastro/ReactBoilerplate

我希望它能帮助您完成基本设置并运行ning 以便您可以使用 React。

干杯！！

使用 React、Node 和 Express 创建 WebApp

create a WebApp using React, Node and Express

jsx

node.js

express

reactjs