构建一个React应用

365bet地区使用React x配置文件创建带有React视图的365bet地区应用

s扎卡里·克莱因(Zachary Klein)

365bet地区版本 3.3.5

365bet地区培训

365bet地区培训由创建并积极维护365bet地区框架的人们开发和交付

入门

365bet地区在本指南中,您将使用React作为视图层创建365bet地区应用程序。您将使用Webpack和Asset Pipeline使用React配置文件单个项目的版本。

365bet地区与使用React配置文件版本的默认365bet地区项目相比,对初始项目进行了一些更改。指导回购.

您将需要什么

要完成本指南,您将需要以下内容

  • 花些时间在你手上

  • 体面的文本编辑器或IDE

  • 安装了JDK或更高版本JAVA首页适当配置

如何完成指南

要开始,请执行以下操作

要么

365bet地区指南存储库包含两个文件夹

  • 初始初始项目通常是一个简单的365bet地区应用程序,其中包含一些其他代码,可以帮助您快速入门

  • 完成一个完整的示例它是按照指南中介绍的步骤进行操作并将这些更改应用于文档的结果。初始

要完成指南,请转到初始

  • 光盘进入365bet地区指导如何构建React应用程序初始

并按照下一节中的说明进行操作

您可以直接前往完成的例子如果你光盘进入grails指导完成React应用的构建

编写申请

React配置文件包含一些默认的React示例代码,如果您想查看实际的示例,请随意运行该应用程序

首先,为应用程序创建域模型

grails创建域类演示车辆grails创建域类演示驾驶员grails创建域类演示Make grails创建域类演示模型

现在让我们在下面编辑域类365bet地区应用程序域演示我们将添加一些属性,注解

grails应用程序grails应用程序域演示Vehicle groovy
演示 grails rest资源

小号'')
 车辆 {

    名称制作型号模型静态的司机: 司机]

    静态的约束
演示 grails rest资源

资源资源小号'')
 司机 {

    静态的汽车车辆静态的约束车辆可为空: 
    }
}
grails应用程序grails应用程序域演示使groovy
演示 grails rest资源

资源资源小号'使')
 使 {

    静态的约束
grails应用程序grails应用程序域演示模型groovy
演示 grails rest资源

资源资源小号'模型')
 模型 {

    静态的约束

自从我们添加了资源资源365bet地区域类的注解365bet地区将为它们中的每一个生成RESTful URL映射让我们预加载一些数据

365bet地区应用程序初始化演示BootStrap groovy
演示 演示驱动程序
 演示制作
 示范模型
 演示车

 引导带 {

    定义初始化servletContext日志信息"载入资料库"
        定义司机 司机(: "苏珊"保存定义司机 司机(: "彼得"保存定义日产使: "日产"保存定义福特汽车使: "福特汽车"保存定义体坛模型: "Titan"保存定义模型: ""保存定义风星模型: "风星"保存车辆: "拾起", 司机司机使日产模型泰坦保存车辆: "经济", 司机司机使日产模型叶保存车辆: "小型货车", 司机司机使福特汽车模型风之星保存定义破坏

运行应用程序

365bet地区现在,如果我们运行我们的应用程序,我们可以尝试使用365bet地区为我们生成的RESTful API,使用365bet地区的本地安装或提供的包装之一来启动该应用程序gradlew bootRun要么grailsw运行应用程序

grailsw运行应用程序

现在我们可以使用cURL或其他API工具来练习API

做一个得到请求获得车辆清单

curl X GET http localhost车辆HTTP X应用程序上下文应用程序开发内容类型应用程序json charset UTF Transfer编码成块的日期Fri Jan GMT连接关闭ID驱动程序ID制造ID模型ID名称拾取ID驱动程序ID制造ID模型ID名称经济ID驱动程序ID制造ID型号ID名称小型货车

做一个得到请求司机获得特定的驱动程序实例

curl X GET http localhost驱动程序HTTP X应用程序上下文应用程序开发内容类型应用程序json charset UTF Transfer编码成块的日期Fri Jan GMT连接关闭ID名称Susan车辆ID

做一个开机自检请求创建一个新的Driver实例

curl X POST http localhost驱动程序H内容类型应用程序json charset utf d名称Edward HTTP X应用程序上下文应用程序开发位置Location http localhost驱动程序内容类型应用程序json charset UTF Transfer编码成组的日期Fri Jan GMT Connection close id name Edward

做一个请求更新Vehicle实例

curl X PUT http本地主机H内容类型应用程序json字符集utf d名称卡车ID HTTP X应用程序上下文应用程序开发位置Location http localhost车辆内容类型应用程序json字符集UTF传输编码块化日期Fri Jan GMT Connection close id driver id make id model id name卡车

自定义API

365bet地区默认情况下,365bet地区生成的RESTful URL仅提供关联对象的ID

HTTP X应用程序上下文应用程序开发内容类型应用程序json字符集UTF传输编码块化日期星期五一月GMT连接关闭ID名称取货ID驱动程序ID

这足以满足许多用途,但是我们需要马上为React组件获取更多数据。JSON视图让我们创建一个新的JSON视图以呈现我们的Vehicle列表

mkdir grails应用程序视图车辆

按照约定,宁静控制器的相应视图目录中的任何JSON视图(例如,资源资源将代替默认的JSON表示形式现在,我们可以通过为Vehicle创建一个新的JSON模板,为每辆Vehicle自定义JSON输出

vim grails应用程序视图车辆车辆gson

编辑文件以包括以下内容

grails应用程序视图车辆车辆gson
 演示车型号车辆车辆json id车辆ID名称车辆名称车辆名称ID车辆识别码模型车型名称ID车辆型号ID驾驶员车辆驾驶员姓名ID车辆驾驶员编号

现在,当我们访问API时,将看到ID每个使, 模型司机被包含在内

HTTP X应用程序上下文应用程序开发内容类型应用程序json字符集UTF传输编码分组日期星期六星期六格林尼治标准时间连接关闭ID名称取货名称Nissan ID模型名称Titan ID驱动程序名称Susan ID

编写我们的React组件

现在我们准备开始创建React组件以查看我们的API并与之交互我们将只处理列出Vehicles并创建新实例

编写车辆组件

让我们开始一个汽车组件,将呈现我们的Vehicle实例的表格

在下面创建一个新的JavaScript文件src主webapp应用车辆js.

这是我们的汽车零件

从反应'反应';
表从'反应自举';
来自的数组'道具类型';

汽车延伸反应组件渲染功能 renderVehicleRow车辆返回 (
        车辆编号
        车辆名称
        车辆名称
        车型名称
        车辆驾驶员姓名
      </tr返回
ID
/
name 使 模型 司机 </TR/Thead这个道具车地图renderVehicleRow <//div Vehicles propTypes汽车数组出口 默认汽车

请注意,renderVehicleRow函数,我们正在访问Vehicle实例的自定义JSON表示形式,因此我们可以使用车辆名称例如

React配置文件包括React Bootstrap默认情况下,所以我们重新使用Bootstrap简化代码的组件

编写车库应用

现在我们需要给我们汽车组件可以从我们的API访问数据我们可以在汽车组件,但更灵活的选择是创建一个容器组件,该组件将从API获取数据并将其向下传递给表示组件汽车

通过这种分离的方法,我们可以在将来扩展应用程序以进行其他API调用,甚至可以渲染不同的组件。车手例如桌子而不必弄乱我们汽车组件我们称为容器组件车库.

在下面创建一个新的JavaScript文件src主webapp应用车库js.

这是我们的车库零件

从反应'反应';
来自的ReactDOM'反应dom';
来自的车辆'汽车';

车库延伸React Component构造函数();

    这个汽车: [{"ID":1,"":"拾起","使":{"":"日产","ID":1},"模型":{"":"Titan","ID":1},"司机":{"":"苏珊","ID":1渲染const车辆这个返回 
<> 汽车={汽车} />
ReactDOM渲染文档getElementById'车库'));

车库组件使用对象可用于所有React组件,但是可选的我们不需要汽车组件,因为它通过接收所有数据汽车prop编写React时的一个好习惯是将您的状态集中在几个组件中,甚至单个组件中,并将相关数据的价格传递给子组件

请注意,我们正在对JSON对象进行硬编码汽车我们的收藏那是因为我们还没有设置API调用,但是我们将在几节中介绍该部分

车库组件包括对ReactDOM渲染为了将组件渲染到页面上,现在我们将创建一个新页面来加载React组件

渲染应用

365bet地区React配置文件依靠Webpack将React组件捆绑到浏览器可用的JavaScript捆绑包中,然后可以通过365bet地区 Asset Pipeline加载。默认应用程序包括单个索引捆绑包,该捆绑包显示在索引页面上。车库应用程式

webpack配置js编辑部分并添加一行以加载我们的车库js文件如下所示

webpack配置js
路径要求'路径'模块出口: {
    指数: 'src主要webapp索引js', (1)
    车库: 'src主webapp应用车库js' (2)
  },
//...
1 将路径添加到车库js作为车库入口点
2

365bet地区这将导致Webpack捆绑两个不同的React应用程序索引和车库。我们还需要配置Webpack为每个React应用程序输出单独的捆绑包,以便我们可以将它们加载到365bet地区应用程序的不同页面上

webpack配置js编辑输出部分并更改文件名如下图所示

webpack配置js
//...输出路径路径连接目录名'grails应用程序资产javascript'),
  publicPath: '资产',
  文件名: '捆绑名称js'
},
//...
1 那么到filename属性

365bet地区现在,当我们启动365bet地区应用程序或运行时gradlew webpackWebpack将生成两个捆绑,其中一个叫做捆绑索引js一个叫捆绑车库js365bet地区我们可以使用365bet地区 Asset Pipeline标签在页面上加载这些捆绑包

索引gsp使用新名称的页面

编辑365bet地区应用程序观看次数索引gsp线

        <> ID="应用程式">
<> src="捆绑索引js" /> (1)
1 将bundle js更改为bundle index js

现在,我们终于可以为我们的主页创建主页了车库365bet地区应用程序使用本地365bet地区安装创建新的365bet地区控制器,或365bet地区w

grailsw创建控制器演示GarageController

车库控制器包含一个指数行动

365bet地区应用程序控制器演示GarageController groovy
演示 车库控制器 {
    定义 指数() { }
}

现在创建一个简单的索引gsp下页365bet地区应用程序视图车库:

365bet地区应用程序视图车库索引gsp



    <> ="布局" 内容="主要"/>
    span车库span类标签
    <> rel="图标" href="网站图标" 类型="图像x ico" />



<> ID="内容" 角色="主要">
    <> ="行紧身衣">
        <> ID="车库">
<> src="捆绑车库js" />

重新启动应用程序并浏览到http本地主机车库您应该会在页面上看到加载了新的React应用程序,其中包含一行硬编码的数据

从API提取数据

现在我们车库组件已设置并呈现汽车我们页面上的表格,我们终于可以连接我们的API,以将数据加载到我们的React视图中。为此目的的API

编辑src主webapp应用车库js:

src主webapp应用车库js
//...
 '取什么';    (1)

车库延伸React Component构造函数();

    这个汽车: [] (2)componentDidMount(3)''然后r r json然后json这个setState汽车json抓住错误控制台错误'错误检索车辆'错误//...
1 导入
2 删除硬编码数据
3 从API加载数据

componentDidMount是React组件生命周期方法之一,组件在页面上加载后立即被触发。在这种方法中,我们使用在默认情况下向我们的GET请求发送请求端点解析JSON有效负载并调用这个setState更新我们的汽车收集数据

365bet地区重新启动应用程序或等待webpack重新加载以查看更改现在您应该看到React中显示的365bet地区应用程序中的Vehicles列表汽车

本指南的最后一步是创建一个简单的表单,用于发布新车辆API的实例

在下面创建一个新的JavaScript文件src主webapp应用AddVehicleForm js具有以下内容

src主要webapp应用AddVehicleForm js
从反应'反应';
来自的数组函数'道具类型';

AddVehicleForm延伸React Component构造器道具道具这个(1)
      : '',
      使: {ID: ''},
      模型: {ID: ''},
      司机: {ID: ''handleSubmit事件(2)事件preventDefault常量名称制作模型驱动程序这个如果名称使ID型号ID驱动程序ID控制台警告"缺少必填字段");
      返回;
    }
    这个道具onSubmit名称使模型驱动程序(3)
    这个setState: '', 使: {ID: ''}, 模型: {ID: ''}, 司机: {ID: ''handleNameChange事件(4)
    这个setState事件目标值handleMakeChange事件(4)
    这个setState使: {ID事件目标值handleModelChange事件(4)
    这个setState模型: {ID事件目标值handleDriverChange事件(4)
    这个setState司机: {ID事件目标值呈现功能 renderSelectList项目(5)
      返回 <> ={商品编号} ={商品编号}>项目名称
    }

    返回(
      

<> 班级名称="表格内联" onSubmit={此句柄提交} > name <> 班级名称="形式控制" ="" 类型="文本" ={ 这个州名 } onChange={ 这个handleNameChange } /> 使 <> 班级名称="形式控制" ="使" ={} onChange={}> {/*<6>*/} <> ={空值}>选择一个品牌这个道具使地图renderSelectList<5>*/} 模型 <> 班级名称="形式控制" ="模型" ={此状态模型ID} onChange={这个handleModelChange}> {/*<6>*/} <> ={空值}>选择型号<5>*/} 司机 <> 班级名称="形式控制" ="司机" ={该状态驱动程序ID} onChange={这个handleDriverChange}> {/*<6>*/} <> ={空值}>选择一个驱动程序该道具驱动程序映射renderSelectList<5>*/} <> 班级名称="btn btn成功" 类型="提交" ="新增至资料库" /> 形成
AdSecurity表单模板使司机onSubmit功能出口 默认AddVehicleForm
1 初始化具有填充新Vehicle所需的所有属性的对象
2 创建事件处理程序以处理表单提交
3 从传递属性onSubmit回调函数
4 事件处理程序要更新每当收到用户输入时
5 中的渲染选项选择
6 每当用户更改输入值时调用事件处理程序

这是一个相当复杂的组件,因此如果您不立即了解所有内容,请不要担心。AddVehicleForm组件允许用户设置创建新Vehicle实例所需的属性, 使, 模型司机它需要一个名为onSubmit提交表格时使用的

这种将函数处理程序作为道具传递的模式是React中的一种好习惯,它允许组件轻松重用,因为特定的功能可以由不同的调用者交换,例如,通过传递不同的函数作为onSubmit道具与在使用React进行编程时,将功能逻辑集中在几个组件中,并将这些功能作为子组件传递给子组件是一个很好的模式。有关此模式的更多语义版本,您可以考虑使用助焊剂实施Redux外部化您的和你的逻辑

因为使, 模型司机365bet地区是关联,我们需要允许用户选择一个ID,以便365bet地区可以在数据绑定期间执行分配AddVehicleFormAddUserForm车库检索这些列表的组件

编辑src主webapp应用车库js:

src主webapp应用车库js
//..
来自的AddVehicleForm'AddVehicleForm'; (1)

车库延伸React Component构造函数();

    这个汽车: [],
      使: [],            (2)
      : [],
      司机componentDidMount获取''然后r r json然后json这个setState汽车json抓住错误控制台错误'错误检索车辆''使')                  (3)这个setState使json抓住错误控制台错误'错误检索''模型')                 (3)这个setStatejson抓住错误控制台错误'错误检索模型''')                (3)这个setState司机json抓住错误控制台错误''错误渲染const车辆使模型驱动程序这个(4)

    返回 
<> 使={使} ={} 司机={司机}/> (5) <> 汽车={汽车} />
; } } //...
1 进口AddVehicleForm零件
2 使, 司机
3 从API检索数据
4 检索车辆使用ES分解语法使模型驱动程序从该状态开始
5 通过使, 添加到AddVehicleForm

最后一步是实现传递给我们的功能AddVehicleForm通过onSubmit该功能需要做两件事

  1. 将新的车辆详细信息发布到API并从API检索结果

  2. 更新这样我们就可以在汽车

让我们实现此功能编辑src主webapp应用车库js再一次

src主webapp应用车库js
//..

车库延伸//...SubmitNewVehicle车辆(1)'', {
      方法: '开机自检',
      标头: { '内容类型': '应用程序json' },
      身体JSON字符串化车辆,然后r r json然后json let车辆这个国家车辆车辆推IDjson IDjson名称使json make模型json模型司机json驱动这个setState车辆抓住前控制台错误'无法保存车辆'ex render const Vehicles使模型成为驾驶员这个返回 
<> onSubmit={这个submitNewVehicle} (2) 使={使} ={} 司机={司机}/> <> 汽车={汽车} />
ReactDOM渲染文档getElementById'车库')); //...
1 创建SubmitNewVehicle功能
2 通过功能为onSubmit支持AddVehicleForm

再次,我们使用这次使用API​​向POST请求我们称端点JSON字符串化转换从接收到的参数AddVehicleForm365bet地区到一个JSON字符串中,然后我们可以将其发布到我们的365bet地区 API中。API将返回新创建的车辆实例,然后我们可以对其进行解析并将其插入到我们的与对象这个setState.

重新启动应用程序或重新运行webpack,您应该能够创建新的Vehicle实例并将其添加到表中。刷新页面以确认新实例已保存到数据库中

下一步

有很多机会可以扩展此应用程序的范围,以下是一些您可以自己进行改进的想法

您需要365bet地区帮助吗

OCI赞助了本指南的创建OCI提供了几种365bet地区服务:

免费咨询

OCI 365bet地区团队包括365bet地区联合创始人Jeff Scott Brown和Graeme Rocher检查我们的365bet地区课程并向发展和维护365bet地区的工程师学习

Grails OCI团队