Home > Developer > Web Develop
In front of the four articles we started the react of the majority of the main API, now began to enter the practice process.
Practice series of the opening plan to take our Frozenui to test, the part of its UI components to react, as the first practice article, will be a simpler loading components to start, the website demo effect such as:
For better development, the follow-up will be assisted by the Webpack tool, and the children's shoes that they do not know can be consulted first in my webpack Getting Started Guide article.
Since we will reuse the Frozenui style, the DOM structure, class naming should be as consistent as possible with the original, on this basis to achieve the same function of the react component.
So we first download good frozen.css(convenient example so directly with the global style) and picture resources, and define a simple webpack.config.js:
module.exports = {entry: {loading: './src/js/page/loadi Ng.js ' ', output: {path: ' dist/js/page ' /\.css$/, loader: ' Style-loader!css-loader ' /\.scs s$/, loader: ' Style!css!sass?sourcemap ' /\. (png|jpg) $/, loader: ' url-loader?limit=8192 ' The modules that need to be downloaded are roughly the same (although there are a few that we don't use at the moment, it doesn't matter if you install them):
"Dependencies": { "Css-loader": "^0.15.2", "Expose-loader": "^0.7.0", " File-loader ":" ^0.8.4 ", " Jsx-loader ":" ^0.13.2 ", " Node-sass ":" ^3.2.0 ", "React": "^0.13.3", "Sass-loader": "^1.0.2", "Style-loader": "^0.12.3" , "Url-loader": "^0.5.6" }Our file directory structure is also simple:
Where SRC is the source file folder, Dist is used to store the final processed output file of Webpack.
Src/js also points to the component and page two folders, which are used to hold component scripts and portal scripts to be referenced on the HTML page.
./loading.html
This is the final execution page, as the demo can do simple points:
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title>Demo</title> <Metaname= "Viewport"content= "initial-scale=1, maximum-scale=1, User-scalable=no"></Head><Body> <Divclass= "Wrap"></Div> <Scriptsrc= "Dist/js/page/loading.js"></Script></Body></HTML>
The div with the class name wrap is a convenient container for us to mount the loading component, and the entire page has only one script entry (the style will eventually be packaged inside).
./src/js/page/loading.js
We will first write the page entry script to determine the use of the loading component cone:
require ('.. /.. /css/frozen.css '); Introduce the style to var React = require (' React '), Loading = require (' ... /component/loading '); This is the component module, the next thing to write about var wrap = document.queryselector ('. Wrap '), hidecallback = function () { //callback after uninstalling the component Alert (' done!! '); }; React.render ( <contentonhide={hidecallback} />, wrap), setTimeout (function () {///3 seconds after uninstalling the component, simulating trigger callback React.unmountcomponentatnode ( Wrap)}, (+);We wanted to be able to customize the text displayed on the loading component, and the callback that was triggered when it was hidden, so we used two props--"content" and "onhide" to bind it (in fact, there was a decision on whether to only partially display "load" The Props property "Ispart", but the new version of Frozenui cancels the feature).
./src/js/component/loading.js
This is the loading component module, which is the most important module for implementing the full functionality of the loading component.
Note General we require that the first letter of the React component module be capitalized.
Initially write a simple component structure:
varReact = require (' React ')), Proptypes=react.proptypes; varLoading =React.createclass ({proptypes: {OnHide:PropTypes.func,//callback After the component is unloadedContent:PropTypes.string//Show Content}, Componentwillunmount:function(){//Callback on Unload if(typeof This. props.onhide = = = ' function ') {setTimeout ( This. Props.onhide, 10); }}, Render:function () { varContent = This. props.content | | ' Loading in ... ', Component= (<div>{content}</div>);returncomponent}}); Module.exports= Loading;
For the two bound props, we do the corresponding processing in Componentwillunmount and render respectively, which determines whether the callback is triggered when the component is unloaded and what is displayed when loading (if props.content is not passed, the default is "loading ... "), and then we're going to deal with the final rendered DOM structure (there can't be only one div right), which we have to analyze the DOM structure of the existing frozen-loading component, as much as possible (including the definition of the class name):
Then we just need to apply this DOM structure directly in render, and replace the contents of the <p> tag with {content}.
But it seems too simple, not fun.
In the previous version of the frozen-loading component, there is a differentiated global display/local display loading interface, local loading is Jiangzi:
I remember the DOM structure and style of the partial display (in fact they're just different from the class name), so I'm going to add a props.ispart to determine if the user wants to show it locally, and then rewrite the component code:
varReact = require (' React ')), LOADINGCN= require ('.. /component/stylemaps '). LOADINGCN,//Introducing the Load Component Class name objectProptypes =react.proptypes; varLoading =React.createclass ({proptypes: {isPart:PropTypes.bool,//whether to load locallyOnHide:PropTypes.func,//callback After the component is unloadedContent:PropTypes.string//Show Content}, Componentwillunmount:function(){ if(typeof This. props.onhide = = = ' function ') {setTimeout ( This. Props.onhide, 10); }}, Render:function () { varContent = This. props.content | | ' Loading in ... ', Flag= This. Props.ispart? ' Partial ': ' Global ', Component= (<div classname={loadingcn.block[flag]}> <div classname={loadingcn.wrap[flag]}> <i classname={loadingcn.i[flag]}></i> <p>{content}</p> </div> </div>);returncomponent}}); Module.exports= Loading;
Pay attention to a more interesting place, we pass a variable flag to determine whether the user wants to display the global or local loading interface, and then through this tag to get the corresponding class name:
this. Props.ispart? ' Partial ': ' Global ', = (<div classname={loadingcn.block[flag]}> <div classname={ loadingcn.wrap[flag]}> <i classname={loadingcn.i[flag]}></i> <p>{content}</p > </div> </div>);The LOADINGCN here is a common module we introduced at the beginning:
LOADINGCN = require ('.. /component/stylemaps '). LOADINGCNThe definition of this module is also very simple:
./src/js/component/stylemaps.js
Module.exports = { GLOBALCN: {}, Loadingcn: { block: { ' demo-block ', ' Ui-loading-block Show ' }, wrap: { ' ui-loading-wrap ', ' ui-loading-cnt ' }, I: { ' ui-loading ', ' Ui-loading-bright '}} ;It returns an object that holds the class name of each component, so we can pass the require ('.. /component/stylemaps '). loadingcn.block[' Global ' to get the class name of the outermost div when the loading component is globally loaded.
So why do we have to do so much more than a style module? Just write it in the loading.js, okay?
The answer is yes, but more than one style module can facilitate our later unification in a file to maintain the class name of all components, in fact, for the post-maintenance provides a certain degree of convenience.
In addition, the style management module also temporarily frees up an object property called GLOBALCN, which can be used as a class name for sharing among multiple components.
We execute Webpack package to access the root directory of loading.html (analog mobile), the effect is the same as we expected:
We add ispart={true} to the component page/loading.js to be rendered, allowing it to take the local loading form:
React.render ( <loading content= ' Hello ' onhide={hidecallback} ispart={true}/>, wrap);The result of the operation is also 666:
This time the practice is so happy to end it ~ This section of the code can be downloaded to my github.
Next time you share the react implementation of the TAB panel with a slightly more complex point. Mutual Encouragement ~!
Reactjs Practice (i) loading component of--frozenui react
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
