Contenu connexe Similaire à React Example + Bootstrap (20) Plus de Eueung Mulyana (20) React Example + Bootstrap1. 1 / 45
Looking at the Codes
React Examples
Eueung Mulyana
https://eueung.github.io/112016/react-exp
CodeLabs | Attribution-ShareAlike CC BY-SA
2. React Version: 15.4.1
Part 1 - Basic Examples: https://eueung.github.io/112016/react-cont
Introduction to React already covered here: https://eueung.github.io/112016/react
2 / 45
5. 5 / 45
Structure
react-15.4.1$tree-L2
.
|--build
|------react-dom-fiber.js
| |--react-dom-fiber.min.js
| |--react-dom.js
| |--react-dom.min.js
| |--react-dom-server.js
| |--react-dom-server.min.js
| |--react.js
| |--react.min.js
| |--react-with-addons.js
| |--react-with-addons.min.js
|--examples
| |--basic
| |--basic-click-counter
| |--basic-commonjs
| |--basic-jsx
| |--basic-jsx-external
| |--basic-jsx-harmony
| |--basic-jsx-precompile
| |--fiber
| |--jquery-bootstrap
| |--jquery-mobile
| |--quadratic
| |--README.md
| |--shared
| |--transitions
| |--webcomponents
|--README.md
17. * | | |--JQueryMobileButton
* | |--JQueryMobileFooter
* |--JQueryMobilePage(two)
* | |--JQueryMobileHeader
* | |--JQueryMobileContent
* | | |--PageTwoContent
* | | |--JQueryMobileButton
* | |--JQueryMobileFooter
* |--JQueryMobilePage(popup)
* |--JQueryMobileHeader
* |--JQueryMobileContent
* | |--PagePopUpContent
* | |--JQueryMobileButton
* |--JQueryMobileFooter
*/
/*globaldocument,React*/
'usestrict';
/**Mainapplicationcomponent.*/
varApp=React.createClass({
displayName:'App',
render:function(){
returnReact.DOM.div({className:'app'},
JQueryMobilePage({id:'one'},PageOneContent(null)),
JQueryMobilePage({id:'two'},PageTwoContent(null)),
JQueryMobilePage({id:'popup',headerTheme:'b'},PagePopUpContent(null))
);
}
});
App=React.createFactory(App);
/**jQueryMobilepagecomponent.*/
varJQueryMobilePage=React.createClass({
displayName:'JQueryMobilePage',
getDefaultProps:function(){
return{'data-role':'page','data-theme':'a',headerTheme:'a'};
},
17 / 45
jquery-mobile
JS
this.props
this.props.children
18. /**jQueryMobilebuttoncomponent.*/
varJQueryMobileButton=React.createClass({
displayName:'JQueryMobileButton',
getDefaultProps:function(){
return{className:'ui-btnui-shadowui-corner-all'};
},
render:function(){
returnReact.DOM.p(null,
React.DOM.a(this.props,this.props.children)
);
}
});
JQueryMobileButton=React.createFactory(JQueryMobileButton);
/**jQueryMobilepagecontentcomponent.*/
varJQueryMobileContent=React.createClass({
displayName:'JQueryMobileContent',
render:function(){
returnReact.DOM.div({role:'main',className:'ui-content'},
this.props.children
);
}
});
JQueryMobileContent=React.createFactory(JQueryMobileContent);
/**jQueryMobilefootercomponent.*/
varJQueryMobileFooter=React.createClass({
displayName:'JQueryMobileFooter',
render:function(){
returnReact.DOM.div({'data-role':'footer'},
React.DOM.h4(null,'Pagefooter')
);
}
});
JQueryMobileFooter=React.createFactory(JQueryMobileFooter);
/**jQueryMobileheadercomponent.*/
varJQueryMobileHeader=React.createClass({
displayName:'JQueryMobileHeader',
18 / 45
jquery-mobile
JS
Content as Children
22. 22 / 45
Structure
react-15.4.1$tree-L2
.
|--build
|------react-dom-fiber.js
| |--react-dom-fiber.min.js
| |--react-dom.js
| |--react-dom.min.js
| |--react-dom-server.js
| |--react-dom-server.min.js
| |--react.js
| |--react.min.js
| |--react-with-addons.js
| |--react-with-addons.min.js
|--examples
| |--basic
| |--basic-click-counter
| |--basic-commonjs
| |--basic-jsx
| |--basic-jsx-external
| |--basic-jsx-harmony
| |--basic-jsx-precompile
| |--fiber
| |--jquery-bootstrap
| |--jquery-mobile
| |--quadratic
| |--README.md
| |--shared
| |--transitions
| |--webcomponents
|--README.md
32. 32 / 45
BS Docs
jQuery .off()to remove
event handlers (after hide)
attached with the .on()
method (after modal show).
36. 36 / 45
Extra #2
Structure
Ref: fedosejev @GitHub
fedosejev$tree
.
|--data.json
|--images
| |--IMG_5774.jpg
| |--IMG_6305.jpg
| |--IMG_6701.jpg
| |--IMG_6732.jpg
| |--IMG_6795.jpg
|--index.html
|--js
| |--app.jsx
| |--components
| |--Application.jsx
| |--Image.jsx
|--package.json
3directories,11files
37. 37 / 45
npm
package.json
{
"name":"fedosejev-example",
"description":"fedosejevReactexample",
"private":true,
"main":"js/app.jsx",
"dependencies":{
"babel-preset-es2015":"^6.6.0",
"babel-preset-react":"^6.5.0",
"babelify":"^7.3.0",
"browserify":"^13.0.0",
"react":"^15.0.2",
"react-dom":"^15.0.2",
"watchify":"^3.7.0"
},
"scripts":{
"build":"browserifyjs/app.jsx-tbabelify-ojs/app.js",
"start":"watchifyjs/app.jsx-v-tbabelify-ojs/app.js"
}
}
$npmstart
>fedosejev-example@start/home/em/fedosejev
>watchifyjs/app.jsx-v-tbabelify-ojs/app.js
723589byteswrittentojs/app.js(6.14seconds)
39. 39 / 45
$tree
.
|--data.json
|--images
| |--IMG_5774.jpg
| |--IMG_6305.jpg
| |--IMG_6701.jpg
| |--IMG_6732.jpg
| |--IMG_6795.jpg
|--index.html
|--js
| |--app.jsx
| |--components
| |--Application.jsx
| |--Image.jsx
|--package.json
importReactfrom'react';
importReactDOMfrom'react-dom';
importApplicationfrom'./components/Application.jsx';
ReactDOM.render(<Application/>,document.querySelector('[data-react-application]'));
Extra #2
js/app.jsx
43. Refs
1. A JavaScript library for building user interfaces | React
2. facebook/react: A declarative, e cient, and exible JavaScript library for building user
interfaces.
3. Intro and Concept - Learning React
4. React Example
5. JavaScript - Bootstrap
6. fedosejev/how-to-create-react-components-dynamically
43 / 45
44. 44 / 45
END
Eueung Mulyana
https://eueung.github.io/112016/react-exp
CodeLabs | Attribution-ShareAlike CC BY-SA