使用 React、Node 和 Express 创建一个 WebApp

Question

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

那我该怎么做呢？

我尝试了一些简单的事情，例如

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

但它没有奏效

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

谁能给我一些提示，帮助建立一个带有反应和节点的水疗中心？

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 捆绑在一起，以及你的依赖项并生成一个捆绑包.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

我希望它能帮助你启动并运行基本的设置，这样你就可以使用 React。

干杯！！