使用 React 个人资料
本指南介绍了 Grails 的 React 个人资料。
作者：Zachary Klein
Grails 版本 4.0.1
1 Grails 培训
Grails 培训 - 由创建和积极维护 Grails 框架的人员开发和交付！
2 开始
在本指南中，您将创建一个多项目构建，其中包含一个 Grails 应用程序和一个 React 前端应用程序，方法是使用 Grails 的 React 个人资料。
该个人资料将生成两个应用程序：服务器和客户端。 服务器将使用rest-api个人资料构建的 Grails 3 应用程序，其中包括用于创建域资源、RESTful 控制器和 JSON 视图的支持。 客户端是一个使用create-react-appCLI 生成的独立 React 应用程序，并进行了一些定制。 客户端应用程序包括一个使用 React-Bootstrap 实现的完整 UI，并配置为通过 REST 与 Grails 后端进行通信。该项目还包括一个功能测试套件和用于构建和测试应用程序的脚本 - 有关更多信息，请参阅create-react-app项目文档。
2.1 需要的内容
要完成本指南，您需要以下内容
-
10 分钟或更少
-
已安装 Grails 3.2.1 或更高版本
-
已安装 JDK 1.7 或更高版本，并适当地配置了
JAVA_HOME
3 生成应用程序
要开始使用此个人资料，请在生成您的应用程序时指定它
$ grails create-app myApp --profile=react您还可以使用应用程序生成器从 Web 界面生成您的项目，或使用以下curl命令
curl -O start.grails.org/myApp.zip -d version=3.3.2 -d profile=react查看目录结构 - 您将看到一个典型的 Gradle 多项目构建，其中包含单独的客户端和服务器项目。
drwxr-xr-x 9 zak staff 306 Nov 1 13:15 client
drwxr-xr-x 3 zak staff 102 Nov 1 13:10 gradle
-rwxr--r-- 1 zak staff 4971 Nov 1 13:10 gradlew
-rwxr--r-- 1 zak staff 2314 Nov 1 13:10 gradlew.bat
drwxr-xr-x 8 zak staff 272 Nov 1 13:12 server
-rw-r--r-- 1 zak staff 26 Nov 1 13:10 settings.gradle服务器当然就是我们的 Grails 应用程序。该个人资料将使用rest-api个人资料生成 Grails 应用程序，该个人资料为创建作为 RESTful 资源的域类以及 JSON 和标记视图提供支持。
客户端是我们的 React 应用程序。
-rw-r--r-- 1 zak staff 44412 Nov 1 13:10 README.md
-rw-r--r-- 1 zak staff 669 Nov 1 13:10 build.gradle
-rw-r--r-- 1 zak staff 404 Nov 1 13:10 package.json
drwxr-xr-x 4 zak staff 136 Nov 1 13:10 public
drwxr-xr-x 10 zak staff 340 Nov 1 13:10 srcclient 项目结构（build.gradle 除外，该文件特定于 react 配置文件）全部由 create-react-app 提供，并包含了一个非常出色的自述文件。简而言之，src/ 目录是用于存放 React 代码的，public/ 是用于存放无需通过 webpack 捆绑即可从你的 React 应用访问的公共资源的 - 该目录还包括用于生成 React 应用主页的模板 index.html 文件。参阅 create-react-app 文档以获得更多详细信息。
除了 Grails 品牌的 UI 之外，client 项目的一个重大自定义是 src/config.js 文件。该文件用于指定后端的 URL，默认值为 http://localhost:8080。它还从 package.json 获取 React 应用的当前版本。
import pjson from './../package.json';
export const SERVER_URL = 'http://localhost:8080/';
export const CLIENT_VERSION = pjson.version;
export const REACT_VERSION = pjson.dependencies.react;你可以编辑该文件的内容以添加其他变量或更改 SERVER_URL 以指向其他后端服务器。
4 运行应用程序
该配置文件还定义了一组自定义 Gradle 任务，包括一个用于启动客户端应用的 bootRun 任务。你可以单独启动服务器和客户端应用
./gradlew server:bootRun
//in another terminal
./gradlew client:start为了保持与 server 项目的一致性，客户端的 build.gradle 文件还包括一个 bootRun，这意味着你可以利用 Gradle 的并行执行来使用一个命令运行客户端和服务器应用
./gradlew bootRun -parallel客户端中定义的其他任务包装了用于构建和测试 React 应用的 create-react-app 脚本。如果你已安装 npm，则可以使用 Gradle 封装器运行它们，或者直接运行 npm 脚本。
./gradlew client:test //or, from the client project dir: npm test
./gradlew client:build //or, from the client project dir: npm run build同样，请参阅 create-react-app 文档以获取有关利用这些脚本和 create-react-app 提供的其他功能的更多信息。