基于React技术构建web应用的方法技术

本发明专利技术公开了基于React技术构建web应用的方法，涉及互联网web应用技术领域。包括使用react官方推荐的脚手架工具create‑react‑app，创建一个基于react的模板项目，用react‑router搭建页面路由，用于控制页面级组件的切换；将UI界面拆分成组件结构图；借助React创建组件，完成不带交互的静态页面；将web应用的每一张设计图都转换为静态页面之后，将它们整合起来已构成完整的web应用，建立起应用中各个组件的交互效果。本发明专利技术提供的方法具有良好的可组合性，可重用性，和可维护性，可以自底向上通过组件层级的嵌套，构建完整的UI界面。

【技术实现步骤摘要】
基于React技术构建web应用的方法
本专利技术的实施方式涉及互联网web应用
，更具体地，本专利技术的实施方式涉及基于React技术构建web应用的方法。
技术介绍
随着互联网的发展，web页面已经由简单的html+css构成的页面，发展到大型复杂的web应用。随着web应用越来越复杂，相应的开发团队规模也扩大，导致了一些亟待解决的问题：团队的协同合作，团队人员水平参差不齐。以往的web项目开发，一个项目中可能只需要一两个前端工程师，很多时候沟通约定规则通过口头方式，有的项目甚至只有一个前端工程师，代码风格以自我为中心。随着项目的复杂度提升，这种方式的问题越来越突出，团队中每个人按自己的习惯来写代码，导致一个项目中存在好几种风格的代码。当需要扩展一个原有功能时，需要花大量时间去研习前面的代码。写出的代码越来越难以维护，当需要与其他团队成员来合作，或者一旦出现人员离职，后来的人很难看懂前面人的代码，影响开发进度。对于某个业务需求，每个程序员有自己的方式去实现，导致一旦出现人员变动其他人来接手困难，浪费大量的时间。显著的特点是，沟通成本极速上升，一旦出现人员变动，后续人员接手困本文档来自技高网...

【技术保护点】
基于React技术构建web应用的方法，其特征在于，包括以下步骤：步骤一：将UI界面拆分成组件结构图组件结构图的拆分工作在原型图或者UI设计图上进行，采用自顶向下或自底向上的划分方法，通过绘制各种颜色的线框来框选组件，线框的颜色用来区分不同的组件层级；步骤二：借助React创建组件，完成不带交互的静态页面把用线框框出的组件转换为代码，采用React框架创建组件，借助React.Component类，为每一个线框创建一个React.Component实例，完成不带交互的静态页面；步骤三：多次重复步骤一和步骤二之后，将web应用的每一张UI设计图都转换为静态页面，在这一步中将它们整合起来构成完整的...

【技术特征摘要】
1.基于React技术构建web应用的方法，其特征在于，包括以下步骤：步骤一：将UI界面拆分成组件结构图组件结构图的拆分工作在原型图或者UI设计图上进行，采用自顶向下或自底向上的划分方法，通过绘制各种颜色的线框来框选组件，线框的颜色用来区分不同的组件层级；步骤二：借助React创建组件，完成不带交互的静态页面把用线框框出的组件转换为代码，采用React框架创建组件，借助React.Component类，为每一个线框创建一个React.Component实例，完成不带交互的静态页面；步骤三：多次重复步骤一和步骤二之后，将web应用的每一张UI设计图都转换为静态页面，在这一步中将它们整合起来构成完整的web应用，使用react-router来做前端路由，实现顶层组件之间的切换。2.根据权利要求1所述的基于React技术构建web应用的方法，其特征在于：所述组件，是指封装起来的具有独立功能的UI部件，最小的组件只具有一些单一的功能，可通过简单组件的组合嵌套，构成复杂的组件。3.根据权利要求1所述的基于React技术构建web应用的方法，其特征在于：所述组件层级，是指由组件嵌套组合而成的树形结构，层级中的组件之间存在父子关系，和兄弟关系。4....

【专利技术属性】
技术研发人员：宿东浩，岳永胜，李波，
申请(专利权)人：四川长虹电器股份有限公司，
类型：发明
国别省市：四川,51