React Basic Examples
•
2 recomendaciones•317 vistas
Handson for Learning React Starter Kit Basic Examples
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (13)
Similar a React Basic Examples
Similar a React Basic Examples (20)
Más de Eueung Mulyana
Más de Eueung Mulyana (20)
Último
Último (20)
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
- 18. 18 / 34 <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> <scripttype="text/babel"> varCounter=React.createClass({ getInitialState:function(){ return{count:0}; }, handleClick:function(){ this.setState({ count:this.state.count+1, }); }, render:function(){ return( <buttononClick={this.handleClick}> Clickme!Numberofclicks:{this.state.count} </button> ); } }); ReactDOM.render( <Counter/>, document.getElementById('container') ); </script> basic-click- counter JS+JSX Requires babel this.state this.setState getInitialState render
- 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