CN107908398A - Method based on React technique constructions web applications - Google Patents
Method based on React technique constructions web applications Download PDFInfo
- Publication number
- CN107908398A CN107908398A CN201711090112.0A CN201711090112A CN107908398A CN 107908398 A CN107908398 A CN 107908398A CN 201711090112 A CN201711090112 A CN 201711090112A CN 107908398 A CN107908398 A CN 107908398A
- Authority
- CN
- China
- Prior art keywords
- react
- component
- page
- web applications
- web
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses the method applied based on React technique constructions web, is related to internet web applied technical fields.The scaffold instrument create react app of react officials recommendation are included the use of, create a template item based on react, building the page with react router route, for controlling the switching of page level assembly；UI interfaces are split into assembly assumption diagram；Component is created by React, is completed without interactive static page；After the web each design drawing applied all is converted to static page, they are integrated and has formed complete web applications, it is established that the interaction effect of various components in application.Method provided by the invention has a good composability, reusability, and maintainable, can the bottom-up nesting by component level, build complete UI interfaces.
Description
Technical field
Embodiments of the present invention are related to internet web applied technical fields, more specifically, embodiments of the present invention relate to
And the method based on React technique constructions web applications.
Background technology
With the development of internet, web page via the page of simple html+css compositions, develops into large complicated
Web application.As web applications become increasingly complex, corresponding development teams scale also expands, and it is urgently to be resolved hurrily to result in some
Problem：
The cooperative cooperating of team, team's level are uneven.Conventional web project developments, may in a project
One or two of front end engineer is only needed, treaty rule is many times linked up and passes through vival voice, some projects even only one
Front end engineer, code spice is centered on self.Lifted with the complexity of project, it is more and more prominent the problem of this mode
Go out, everyone writes code by the custom of oneself in team, causes in a project that there are the code of several kinds of styles.Work as needs
, it is necessary to spend a lot of time the code studied above when extending an original function.The code write out is increasingly difficult to safeguard, when
Need to cooperate with other Team Members, or personnel's leaving office once occur, later people is difficult the code for understanding above people, shadow
Ring development progress.For some business demand, each programmer has the mode of oneself to go to realize, causes personnel's variation once occur
Other people take over difficulty, waste the substantial amounts of time.Outstanding feature is to link up the very fast rising of cost, once there is personnel's change
Dynamic, follow-up personnel take over difficulty, take considerable time, when multiple person cooperational completes a module, traditional approach is difficult to tear business open
Distinguish one from the other, cause often to solve code conflicts, reduce efficiency.
The maintainability of project, as business complexity is higher and higher, size of code significantly increases, substantial amounts of code rub it is miscellaneous
Together, would have to face a problem, when there is bug, it is difficult to orientation problem point, it is often necessary to debug repeatedly in debug
Tracking, safeguards extremely difficult.Function gradually increases, and management becomes to become increasingly complex, and logic becomes more and more chaotic, to flat
Platform, which is safeguarded, brings very big challenge.The non-modularity of tradition, born code are just easy to become too fat to move, and various businesses logic is obscured
Together, it will consume more times when handling bug and carry out orientation problem.
The reusability of function, in the non-modularization pattern of tradition, developer fights separately, for occurring in the page one
Function point, the developer for replicating each page may write multiple implementations.Various ways realize same function, increase
The possibility of error is added.Developer runs into the function having been carried out again, generally directly replicates existing source code, causes big
Redundant code is measured, each place is required for changing during error.
The problem of pattern, CSS style are global, and the pattern of multiple pages interferes with each other, various unintentionally class name conflicts,
Pattern caused by selector conflict covers.
The content of the invention
The collaborative occurred in being developed present invention aim to address the non-modularity of tradition is poor, and durability is low, can safeguard
The problem of property is not high.A kind of method based on React technique constructions web applications is provided, based on React frames, UI interfaces are torn open
It is divided into component level, the component positioned at the bottom is probably the polymerization of some simple functions, has the characteristic of high cohesion lower coupling；
Component also has a good composability, reusability, and maintainable, can the bottom-up nesting by component level,
Build complete UI interfaces.
In order to reach above-mentioned technique effect, the present invention takes following technical scheme：Should based on React technique constructions web
Method, comprises the following steps：
Step 1：UI interfaces are split into assembly assumption diagram
The fractionation work of assembly assumption diagram can carry out on prototype figure or UI design drawings, by drawing a variety of colors
Frame carrys out frame and selects device region, and when component clustering can use top-down or bottom-up division methods, using wire frame method,
The region for being divided into component is framed with the wire frame of different colours, the color of wire frame is used for distinguishing the component of different levels.Example
Such as a common management system page, including top navigation menu, left side statistical information panel, the displaying of right side detailed data.
Full page is a big component first, in this component in the following, the navigation menu region in the page can be divided into one
Component, left side statistics panel can be divided into a component, and right side details content can also be divided into a component.The step is non-
It is often important, the component clustering thinking for clearing interface is essentially consisted in, it is rational to split component hierarchical relationship.
Step 2：Component is created by React, is completed without interactive static page
The component outlined with wire frame is converted to code, component is created using React frames, by
React.Component classes, it might even be possible to which full page is created as a very huge component.According to being divided in UI design drawings
Modular construction, for each wire frame create a React.Component example, complete without interactive static page；
Step 3：Previous step completes the static interfaces of individual UI design drawing, and for a web application, certainly
Will not there was only an interface, be repeated several times after step 1 and step 2, the web each UI design drawing applied all is converted to
Static page, they are integrated and form complete web applications, front end road is done using react-router in this step
By realizing the switching between top layer component.
The present invention be based on React frames, React frames be issued and safeguarded by facebook it is a set of dedicated for building
The javascript frames increased income of web views.It, which is unique in that, introduces JSX grammers and virtual dom technologies, JSX languages
Method embodies the thought of view=f (state), and html is generated in javascript, and js and html are merged.Work as page
When face content will change, virtual dom updates first, is then contrasted with actual dom, only updates different parts, solves
The problem of traditional dom operations of having determined are time-consuming high.
Further technical solution is：The component, refers to the UI components with standalone feature being encapsulated, minimum
Component only has the function of that some are single, by the combined nesting of simple assemblies, can form the component of complexity.
Further technical solution is：The component level, refers to the tree structure being composed of component nesting, level
In component between there are set membership and brotherhood.
Further technical solution is：In step 2, the class modes of es6 can be used when creating React components,
Or createReactClass modes create a component.
Further technical solution is：In step 2, in the render method of component is created by React, structure is set
Into the html fragments of device region content.
Further technical solution is：In step 2, css is introduced in assembly to adjust page effect, is realized to UI
The high-fidelity reduction of figure.
Further technical solution is：In step 3, by the life cycle methodology and state objects of react, in group
Monitoring users alternative events (mouse, keyboard, screen touch) in part life cycle, it is established that the interaction effect of various components in application
Fruit.
Further technical solution is：Further included before step 1：The scaffold instrument recommended using react officials
Create-react-app, creates a template item based on react, and building the page with react-router route, and is used for
Control the switching of page level assembly；Using redux management across the data of component level, data connection is realized using react-redux.
Compared with prior art, the present invention with following beneficial effect：Should based on React technology componentizations structure web
Method, by the way that page structure is split into Reusable Components, with reference to outstanding React Open Framework technologies, solves web and opens
During hair, rate of code reuse is low, and the problem of maintainable difference, has good composability, reusability, and can safeguard
Property, can the bottom-up nesting by component level, build complete UI interfaces.
Brief description of the drawings
Fig. 1 shows the integrated stand composition of the embodiment of the present invention.
Embodiment
In order to make the purpose , technical scheme and advantage of the present invention be clearer, with reference to embodiments, to the present invention
It is further elaborated.It should be appreciated that the specific embodiments described herein are merely illustrative of the present invention, it is not used to
Limit the present invention.
Embodiment
Based on the method for React technique constructions web applications, comprise the following steps：
A, the scaffold instrument create-react-app recommended using react officials, creates a mould based on react
Plate project, builds the page with react-router and route, for controlling the switching of page level assembly.Managed using redux across group
The data of part level, data connection is realized using react-redux.
B, UI interfaces are split into assembly assumption diagram, as shown in Figure 1, front end Developmental Engineer takes any UI interface prototypes
During figure, some square frames are drawn on UI figures to include each component and their sub-component.Can be by judgement during component clustering
No should be to create new functional object for a certain piece in UI figures, to decide whether partitioning component, or it is next according to single responsibility principle
Division.
C, component is created by React, completed without interactive static page.When confirming the page with square frame on UI figures
Modular construction, it is necessary to which the modular construction defined on figure is converted to code.By means of React frames, it is fixed to help to realize
The modular construction of justice.Outermost layer assembly (root component) contains following all the progeny's component, forms complete UI interfaces.
The status data of the display effect of control assembly is set D,.In a web is applied, generally there was only a root group
Part, and web applications have multiple and different pages., can will be each in application in order to show the different pages in a root component
The page regards the sub-component of root component as, and root component determines which page assembly shown by the state itself preserved.Applying
In root component, a menu sub-component can be included, by clicking on menu item, the state of root component is set, so as to switch display
The page.
Although reference be made herein to invention has been described for explanatory embodiment of the invention, however, it is to be understood that ability
Field technique personnel can be designed that a lot of other modifications and embodiment, these modifications and embodiment will fall in the application public affairs
Within the spirit and spirit opened.More specifically, can be to the group of theme combination layout in the range of disclosure
A variety of variations and modifications are carried out into component and/or layout.In addition to the variations and modifications carried out to building block and/or layout,
To those skilled in the art, other purposes also will be apparent.
Claims (8)
1. the method based on React technique constructions web applications, it is characterised in that comprise the following steps：
Step 1：UI interfaces are split into assembly assumption diagram
The fractionation of assembly assumption diagram is operated on prototype figure or UI design drawings and carries out, using top-down or bottom-up stroke
Divide method, select component by drawing the wire frame of a variety of colors come frame, the color of wire frame is used for distinguishing different component levels；
Step 2：Component is created by React, is completed without interactive static page
The component outlined with wire frame is converted to code, component is created using React frames, by React.Component classes,
A React.Component example is created for each wire frame, is completed without interactive static page；
Step 3：It is repeated several times after step 1 and step 2, the web each UI design drawing applied all is converted into static page
Face, they are integrated and form complete web applications, front end route is done using react-router in this step, real
Switching between existing top layer component.
2. the method according to claim 1 based on React technique constructions web applications, it is characterised in that：The component,
Refer to the UI components with standalone feature being encapsulated, minimum component only has the function of that some are single, can be by simple
The combined nesting of component, forms the component of complexity.
3. the method according to claim 1 based on React technique constructions web applications, it is characterised in that：The component layer
Level, refers to the tree structure being composed of component nesting, and there are set membership, and brotherhood between the component in level.
4. the method according to claim 1 based on React technique constructions web applications, it is characterised in that：In step 2
In, a group can be created using the class modes of es6, or createReactClass modes when creating React components
Part.
5. the method based on React technique constructions web applications according to claim 1 or 4, it is characterised in that：In step
In two, in the render method of component is created by React, the html fragments for forming device region content are set.
6. the method according to claim 1 based on React technique constructions web applications, it is characterised in that：In step 2
When, css is introduced in assembly to adjust page effect, realizes the high-fidelity reduction to UI figures.
7. the method according to claim 1 based on React technique constructions web applications, it is characterised in that：In step 3
In, by the life cycle methodology and state objects of react, the monitoring users alternative events in component lifecycle, it is established that
The interaction effect of various components in.
8. it is according to claim 1 based on React technique constructions web application method, it is characterised in that step 1 it
Before further include：The scaffold instrument create-react-app recommended using react officials, creates a mould based on react
Plate project, builds the page with react-router and route, for controlling the switching of page level assembly；Managed using redux across group
The data of part level, data connection is realized using react-redux.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711090112.0A CN107908398A (en) | 2017-11-08 | 2017-11-08 | Method based on React technique constructions web applications |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711090112.0A CN107908398A (en) | 2017-11-08 | 2017-11-08 | Method based on React technique constructions web applications |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107908398A true CN107908398A (en) | 2018-04-13 |
Family
ID=61843673
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711090112.0A Pending CN107908398A (en) | 2017-11-08 | 2017-11-08 | Method based on React technique constructions web applications |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107908398A (en) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109144503A (en) * | 2018-08-29 | 2019-01-04 | 北京城市网邻信息技术有限公司 | Pass through the method, apparatus, equipment and readable storage medium storing program for executing of Redux storing data |
| CN110109659A (en) * | 2019-04-28 | 2019-08-09 | 广东三维家信息科技有限公司 | A kind of system that realizing front end applications scaffold and server |
| CN110209440A (en) * | 2019-06-14 | 2019-09-06 | 福建睿思特科技股份有限公司 | A kind of use optimization method and the storage medium of React component |
| CN110825371A (en) * | 2019-08-06 | 2020-02-21 | 杭州美创科技有限公司 | Method for creating, rendering and interacting button group control based on React |
| CN110837367A (en) * | 2018-08-16 | 2020-02-25 | 阿里巴巴集团控股有限公司 | User interface processing method and device and electronic equipment |
| CN111611032A (en) * | 2019-02-25 | 2020-09-01 | 阿里巴巴集团控股有限公司 | Detection method and device for user interface drawing level and over-drawing |
| CN111782180A (en) * | 2020-06-24 | 2020-10-16 | 智车优行科技（北京）有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN112099697A (en) * | 2020-09-28 | 2020-12-18 | 四川长虹电器股份有限公司 | VUE-based method for dynamically switching display data of cascade panel assembly |
| CN112241282A (en) * | 2020-10-27 | 2021-01-19 | 上海万向区块链股份公司 | Method and system for managing global state data based on act project |
| CN112764745A (en) * | 2019-10-21 | 2021-05-07 | 北京国双科技有限公司 | Front-end page generation method and device, storage medium and equipment |
| CN113222535A (en) * | 2021-04-30 | 2021-08-06 | 中核武汉核电运行技术股份有限公司 | Organization mechanism selection method, device, equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110083119A1 (en) * | 1998-11-25 | 2011-04-07 | Helmut Emmelmann | Interactive server side components |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN106843850A (en) * | 2016-12-28 | 2017-06-13 | 北京五八信息技术有限公司 | A kind of method and apparatus that native objects are transmitted between React Native components |
| CN107045438A (en) * | 2016-12-16 | 2017-08-15 | 阿里巴巴集团控股有限公司 | One kind application top level view processing method, device and component |
-
2017
- 2017-11-08 CN CN201711090112.0A patent/CN107908398A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110083119A1 (en) * | 1998-11-25 | 2011-04-07 | Helmut Emmelmann | Interactive server side components |
| CN105824900A (en) * | 2016-03-14 | 2016-08-03 | 传线网络科技（上海）有限公司 | Page display system based on react-native |
| CN107045438A (en) * | 2016-12-16 | 2017-08-15 | 阿里巴巴集团控股有限公司 | One kind application top level view processing method, device and component |
| CN106843850A (en) * | 2016-12-28 | 2017-06-13 | 北京五八信息技术有限公司 | A kind of method and apparatus that native objects are transmitted between React Native components |
Non-Patent Citations (1)
| Title |
|---|
| 冷星: "【React系列】如何构建React应用程序", 《HTTPS://SEGMENTFAULT.COM/A/1190000011190715》 * |
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110837367A (en) * | 2018-08-16 | 2020-02-25 | 阿里巴巴集团控股有限公司 | User interface processing method and device and electronic equipment |
| CN110837367B (en) * | 2018-08-16 | 2022-05-27 | 阿里巴巴集团控股有限公司 | User interface processing method and device and electronic equipment |
| CN109144503A (en) * | 2018-08-29 | 2019-01-04 | 北京城市网邻信息技术有限公司 | Pass through the method, apparatus, equipment and readable storage medium storing program for executing of Redux storing data |
| CN109144503B (en) * | 2018-08-29 | 2021-11-23 | 北京城市网邻信息技术有限公司 | Method, device and equipment for storing data through Redox and readable storage medium |
| CN111611032A (en) * | 2019-02-25 | 2020-09-01 | 阿里巴巴集团控股有限公司 | Detection method and device for user interface drawing level and over-drawing |
| CN111611032B (en) * | 2019-02-25 | 2023-05-26 | 阿里巴巴集团控股有限公司 | User interface drawing level and excessive drawing detection method and device |
| CN110109659A (en) * | 2019-04-28 | 2019-08-09 | 广东三维家信息科技有限公司 | A kind of system that realizing front end applications scaffold and server |
| CN110209440A (en) * | 2019-06-14 | 2019-09-06 | 福建睿思特科技股份有限公司 | A kind of use optimization method and the storage medium of React component |
| CN110825371A (en) * | 2019-08-06 | 2020-02-21 | 杭州美创科技有限公司 | Method for creating, rendering and interacting button group control based on React |
| CN112764745A (en) * | 2019-10-21 | 2021-05-07 | 北京国双科技有限公司 | Front-end page generation method and device, storage medium and equipment |
| CN111782180A (en) * | 2020-06-24 | 2020-10-16 | 智车优行科技（北京）有限公司 | Page generation method and device, electronic equipment and storage medium |
| CN112099697A (en) * | 2020-09-28 | 2020-12-18 | 四川长虹电器股份有限公司 | VUE-based method for dynamically switching display data of cascade panel assembly |
| CN112241282A (en) * | 2020-10-27 | 2021-01-19 | 上海万向区块链股份公司 | Method and system for managing global state data based on act project |
| CN112241282B (en) * | 2020-10-27 | 2024-02-23 | 上海万向区块链股份公司 | Global state data management method and system based on reaction project |
| CN113222535A (en) * | 2021-04-30 | 2021-08-06 | 中核武汉核电运行技术股份有限公司 | Organization mechanism selection method, device, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107908398A (en) | Method based on React technique constructions web applications | |
| CN105677446B (en) | The visual modeling method of Distributed Simulation Platform | |
| CN106484393B (en) | Visual view design method | |
| US7873939B2 (en) | Processing logic modeling and execution | |
| US6205575B1 (en) | Scenario presentation tool | |
| US7925977B2 (en) | Architecture solution map builder | |
| CN102254049A (en) | Web page design system and method for building same | |
| US8352906B2 (en) | Method, system, and computer program product for implementing external domain independent modeling framework in a system design | |
| KR101572509B1 (en) | the operating method of user interface framework for web-based application construction | |
| CN109062567A (en) | Information management system quick development platform based on B/S structure | |
| WO2008021433A2 (en) | Design tool and methodology for enterprise software applications | |
| CN106557457A (en) | A kind of system for automatically generating cross-platform Complicated Flow figure based on QT | |
| CN114089958A (en) | Form visual configuration method and device | |
| CN103793226A (en) | Pervasive application code framework fast-generating method and prototype system | |
| Lumertz et al. | User interfaces metamodel based on graphs | |
| CN103530134A (en) | Configurable software platform structure | |
| Kolb et al. | Updatable process views for adapting large process models: The proview demonstrator | |
| Pederiva et al. | The beautification process in model-driven engineering of user interfaces | |
| CN108762750A (en) | A kind of visualization interface generation method and system based on FMP models | |
| CN115408362A (en) | Efficient low-code database extension platform | |
| US20130086491A1 (en) | Automatically generating a business process flow gui using a symbolic annotation language | |
| CN110275996B (en) | Device and method for providing page frame for content development through data visualization development | |
| Hause et al. | An integrated safety strategy to model driven development with SysML | |
| Barbier et al. | Model-driven reverse engineering of cobol-based applications | |
| CN108021367A (en) | A kind of UI development systems and method based on metadata framework |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180413 |
|
| RJ01 | Rejection of invention patent application after publication |