React Basic Examples
2 likes323 views
This document provides an overview and examples of using React basics. It introduces the React starter kit structure and outlines several basic examples, including ones using vanilla JS, JSX, JSX with ES2015 syntax, React Fiber, state handling, and external JS files. It also demonstrates bundling examples into a single file using tools like Babel and Browserify. The examples gradually increase in complexity and showcase key React concepts like components, props, and state to help learn React fundamentals.
![16 / 34
<scriptsrc="../../build/react-dom-fiber.js"></script>
<script>
functionExampleApplication(props){
varelapsed=Math.round(props.elapsed /100);
varseconds=elapsed/10+(elapsed%10?'':'.0');
varmessage=
'Reacthasbeensuccessfullyrunningfor'+seconds+'seconds.';
returnReact.DOM.p(null,message);
}
//CallReact.createFactoryinsteadofdirectlycallExampleApplication({...})inReact.render
varExampleApplicationFactory=React.createFactory(ExampleApplication);
varstart=newDate().getTime();
setInterval(function(){
ReactDOMFiber.render(
ExampleApplicationFactory({elapsed:newDate().getTime()-start}),
document.getElementById('container')
);
},50);
</script>
fiber
basic with ber
function vs. React.createClass()
ReactDOMFiber vs. ReactDOM
Ref: React Fiber is an ongoing
reimplementation of React's core
algorithm. It is the culmination of over
two years of research by the React team.
[ React Fiber ]](https://image.slidesharecdn.com/examples-react-basic-161203231532/85/React-Basic-Examples-16-320.jpg)
![22 / 34
basic-jsx-
external
react-15.4.1$python-mSimpleHTTPServer
ServingHTTPon0.0.0.0port8000...
127.0.0.1--[04/Dec/201603:28:06]"GET/examples/basic-jsx-external/HTTP/1.1"200-
127.0.0.1--[04/Dec/201603:28:06]"GET/examples/shared/css/base.cssHTTP/1.1"200-
127.0.0.1--[04/Dec/201603:28:06]"GET/build/react.jsHTTP/1.1"200-
127.0.0.1--[04/Dec/201603:28:06]"GET/build/react-dom.jsHTTP/1.1"200-
127.0.0.1--[04/Dec/201603:28:06]"GET/examples/basic-jsx-external/example.jsHTTP/1.1"200-](https://image.slidesharecdn.com/examples-react-basic-161203231532/85/React-Basic-Examples-22-320.jpg)
React Basic Examples
- 1. 1 / 34 Starter Kit Basic Examples React Examples Eueung Mulyana https://eueung.github.io/112016/react-cont CodeLabs | Attribution-ShareAlike CC BY-SA
- 2. React Version: 15.4.1 Introduction to React already covered here: https://eueung.github.io/112016/react 2 / 34
- 3. 3 / 34 React Releases @github
- 4. Outline Starter Kit - Overview Basic Examples 4 / 34
- 5. Starter Kit Overview 5 / 34
- 6. 6 / 34 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
- 7. Basic Examples 7 / 34
- 8. 8 / 34 Basic Examples One HTML basic basic-jsx basic-jsx-harmony basic-click-counter (state) ber (react-dom- ber) One HTML + One JS basic-jsx-external (src/example.js) basic-jsx-precompile (build/example.js) HTML+JS+package.json (npm) basic-commonjs (bundle.js)
- 10. 10 / 34 <script> varExampleApplication=React.createClass({ render:function(){ varelapsed=Math.round(this.props.elapsed /100); varseconds=elapsed/10+(elapsed%10?'':'.0'); varmessage= 'Reacthasbeensuccessfullyrunningfor'+seconds+'seconds.'; returnReact.DOM.p(null,message); } }); //CallReact.createFactoryinsteadofdirectlycallExampleApplication({...})inReact.render varExampleApplicationFactory=React.createFactory(ExampleApplication); varstart=newDate().getTime(); setInterval(function(){ ReactDOM.render( ExampleApplicationFactory({elapsed:newDate().getTime()-start}), document.getElementById('container') ); },50); </script> basic Vanilla JS render this.props React.DOM.p()
- 11. 11 / 34 <p>ThisiswrittenwithJSXandtransformedinthebrowser.</p> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> <scripttype="text/babel"> varExampleApplication=React.createClass({ render:function(){ varelapsed=Math.round(this.props.elapsed /100); varseconds=elapsed/10+(elapsed%10?'':'.0'); varmessage= 'Reacthasbeensuccessfullyrunningfor'+seconds+'seconds.'; return<p>{message}</p>; } }); varstart=newDate().getTime(); setInterval(function(){ ReactDOM.render( <ExampleApplicationelapsed={newDate().getTime()-start}/>, document.getElementById('container') ); },50); </script> basic-jsx JS+JSX Requires babel render this.props Element <p> Passing props.elapsed
- 12. 12 / 34 <p>ThisiswrittenwithJSXwithHarmony(ES6)syntaxandtransformedinthebrowser.</p> <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> <scripttype="text/babel"> classExampleApplicationextendsReact.Component{ render(){ varelapsed=Math.round(this.props.elapsed /100); varseconds=elapsed/10+(elapsed%10?'':'.0'); varmessage= `Reacthasbeensuccessfullyrunningfor${seconds}seconds.`; return<p>{message}</p>; } } varstart=newDate().getTime(); setInterval(()=>{ ReactDOM.render( <ExampleApplicationelapsed={newDate().getTime()-start}/>, document.getElementById('container') ); },50); </script> basic-jsx- harmony ES2015+JSX Requires babel render this.props Element <p>
- 13. 13 / 34 basic
- 16. 16 / 34 <scriptsrc="../../build/react-dom-fiber.js"></script> <script> functionExampleApplication(props){ varelapsed=Math.round(props.elapsed /100); varseconds=elapsed/10+(elapsed%10?'':'.0'); varmessage= 'Reacthasbeensuccessfullyrunningfor'+seconds+'seconds.'; returnReact.DOM.p(null,message); } //CallReact.createFactoryinsteadofdirectlycallExampleApplication({...})inReact.render varExampleApplicationFactory=React.createFactory(ExampleApplication); varstart=newDate().getTime(); setInterval(function(){ ReactDOMFiber.render( ExampleApplicationFactory({elapsed:newDate().getTime()-start}), document.getElementById('container') ); },50); </script> fiber basic with ber function vs. React.createClass() ReactDOMFiber vs. ReactDOM Ref: React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team. [ React Fiber ]
- 17. 17 / 34 fiber
- 20. 20 / 34 basic-jsx- external JS+JSX Requires babel basic-jsx index.html example.js <scripttype="text/babel"src="example.js"></script>
- 23. 23 / 34 basic-jsx- precompile JS+JSX babel @dev NOT @browser basic-jsx index.html example.js <scriptsrc="build/example.js"></script>
- 25. 25 / 34 basic-jsx- precompile Vanilla JS after Build Testing: HTTP Server NOT Required
- 26. 26 / 34 basic- commonjs JS+JSX react & babel @dev NOT @browser basic-jsx index.html index.js package.json <scriptsrc="bundle.js"></script>
- 27. 27 / 34 basic- commonjs index.html index.js <!DOCTYPEhtml> <html> <head>...</head> <body> <h1>BasicCommonJSExamplewithBrowserify</h1> <divid="container"><p>ToinstallReact,...</p></div> <h4>ExampleDetails</h4><p>Thisiswritten...</p> <scriptsrc="bundle.js"></script> </body> </html> 'usestrict'; varReact=require('react'); varReactDOM=require('react-dom'); varExampleApplication=React.createClass({ render:function(){ varelapsed=Math.round(this.props.elapsed /100); varseconds=elapsed/10+(elapsed%10?'':'.0'); varmessage= 'Reacthasbeensuccessfullyrunningfor'+seconds+'seconds.'; return<p>{message}</p>; } }); ...
- 30. 30 / 34 basic- commonjs Vanilla JS after Build Everything Bundled Testing: HTTP Server NOT Required
- 31. 31 / 34 That's All for the basics ... we'll continue later ... piece of cake, no?
- 32. Refs 32 / 34
- 33. 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. acdlite/react- ber-architecture: A description of React's new core algorithm, React Fiber 4. Intro and Concept - Learning React 33 / 34
- 34. 34 / 34 END Eueung Mulyana https://eueung.github.io/112016/react-cont CodeLabs | Attribution-ShareAlike CC BY-SA