sails-react 是一个基于 React.js 和 Sails.js 的全栈框架，它使得建立功能丰富的 Web 应用程序成为可能。Sails.js 是一个面向 Node.js 的高度抽象的 Web 应用程序开发框架，而 React.js 是 Facebook 推出的一个声明式、高效且灵活的 JavaScript 库。
在这篇文章里，我们将介绍如何使用 sails-react 包来建立一个简单的全栈 Web 应用程序。
安装 sails-react
首先，我们需要安装 sails-react 包，并初始化一个新的 sails 应用程序：
npm install -g sails-react sails-react new my-app cd my-app sails lift
在运行 sails-react new my-app 命令之后，你将会看到如下的输出：
$ sails-react new my-app info: Created a new Sails app at /path/to/my-app! info: Installing dependencies...
现在我们的应用程序已经运行了，可以访问 http://localhost:1337/ 来查看应用程序是否已经成功运行了。
添加 React.js 和 Webpack
接下来，我们需要添加 React.js 和 Webpack 至我们的应用程序。
首先，我们需要安装 React.js：
npm install react react-dom --save
然后，我们需要安装 Webpack、Webpack Dev Server 和 Webpack Loader：
npm install webpack webpack-dev-server webpack-loader babel-loader css-loader style-loader --save-dev
现在，我们需要添加一个名为 webpack.config.js 的文件，并在其中添加以下配置：
-- -------------------- ---- -------
-------------- - -
------ ------------------------
------- -
------ -
-
----- --------------
-------- ---------------
---- -
---------------
--
--
-
----- ---------
---- -
-------------
---------------
--
--
--
--
------- -
----- --------- - ---------------
--------- ------------
--
---------- -
------------ ----------------
--
--这个 webpack.config.js 文件告诉 Webpack 要将我们的 React 应用程序编译成一个名为 bundle.js 的文件，并将其放在 .tmp/public 目录下。
此外，它还告诉 Webpack 如何将我们的 CSS 文件和 JavaScript 文件转换成 Webpack 可以处理的格式。
创建一个 React 组件
接下来，我们将创建一个简单的 React 组件，并将其添加到我们的应用程序中。
首先，我们需要添加一个名为 MyComponent.jsx 的文件，并在其中添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------
------ ------- ----- ----------- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-然后，我们需要添加一个名为 MyComponent.css 的文件，并在其中添加以下内容：
h1 {
color: red;
}最后，我们需要在视图中加载我们的 React 组件：
-- -------------------- ---- ------- ---- ------------------ --- --------- ----- ------ ------ ----- ---------------- --------- ----------- ------- ------ ---- ---------------- ------- -------------------------- ------- -------
该 views/homepage.ejs 文件中的 #root 元素是我们将要创建的 React 组件的容器。现在我们可以用 React 渲染我们的 MyComponent 组件，并放置在 #root 容器内：
-- -------------------- ---- ------- -- ------------------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ ----------- ---- -------------------- ---------------- ------------ --- ------------------------------- --
总结
在这篇文章中，我们介绍了如何使用 sails-react 包来建立一个简单的全栈 Web 应用程序。
我们添加了 React.js 和 Webpack 至我们的应用程序，并创建了一个简单的 React 组件。最后，我们在视图中加载我们的组件，并输出它到浏览器中。
如果你正在寻找一个快速、简单的方式来搭建一个 React 和 Sails.js 应用程序，那么 sails-react 应该是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76143