React Basic Examples
34
1 / 34 Starter Kit Basic Examples React Examples Eueung Mulyana https://eueung.github.io/112016/react-cont CodeLabs | Attribution-ShareAlike CC BY-SA
-
Upload
eueung-mulyana -
Category
Internet
-
view
107 -
download
2
Transcript of React Basic Examples
1 / 34
Starter Kit Basic Examples
React ExamplesEueung Mulyana
https://eueung.github.io/112016/react-contCodeLabs | Attribution-ShareAlike CC BY-SA
React Version: 15.4.1Introduction to React already covered here: https://eueung.github.io/112016/react
2 / 34
3 / 34
React Releases@github
Outline
Starter Kit - Overview
Basic Examples
4 / 34
Starter Kit Overview
5 / 34
6 / 34
Structure
react-15.4.1$ tree -L 2.|-- 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
Basic Examples
7 / 34
8 / 34
Basic Examples
One HTMLbasicbasic-jsxbasic-jsx-harmonybasic-click-counter (state)�ber (react-dom-�ber)
One HTML + One JSbasic-jsx-external (src/example.js)basic-jsx-precompile (build/example.js)
HTML+JS+package.json (npm)basic-commonjs (bundle.js)
9 / 34
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Basic Example</title> <link rel="stylesheet" href="../shared/css/base.css" /> </head> <body> <h1>Basic Example</h1> <div id="container"> <p> To install React, follow the instructions on <a href="https://github.com/facebook/react/" <p> If you can see this, React is <strong>not</strong> working right. If you checked out the source from GitHub make sure to run </div> <h4>Example Details</h4> <p>This is written in vanilla JavaScript (without JSX) and transformed in the browser.</p> <p> Learn more about React at <a href="https://facebook.github.io/react" target="_blank">facebook.github.io/react </p> <script src="../../build/react.js"></script> <script src="../../build/react-dom.js"></script> <script> ... </script> </body></html>
HTMLbasicbasic-jsxbasic-jsx-harmony�berbasic-click-counter
10 / 34
<script> var ExampleApplication = React.createClass({ render: function() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = 'React has been successfully running for ' + seconds + ' seconds.';
return React.DOM.p(null, message); } });
// Call React.createFactory instead of directly call ExampleApplication({...}) in React.render var ExampleApplicationFactory = React.createFactory(ExampleApplication);
var start = new Date().getTime(); setInterval(function() { ReactDOM.render( ExampleApplicationFactory({elapsed: new Date().getTime() - start}), document.getElementById('container') ); }, 50);</script>
basicVanilla JS
renderthis.propsReact.DOM.p()
11 / 34
<p>This is written with JSX and transformed in the browser.</p><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script><script type="text/babel"> var ExampleApplication = React.createClass({ render: function() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = 'React has been successfully running for ' + seconds + ' seconds.';
return <p>{message}</p>; } }); var start = new Date().getTime(); setInterval(function() { ReactDOM.render( <ExampleApplication elapsed={new Date().getTime() - start} />, document.getElementById('container') ); }, 50);</script>
basic-jsxJS+JSXRequires babel
renderthis.propsElement <p>Passing props.elapsed
12 / 34
<p>This is written with JSX with Harmony (ES6) syntax and transformed in the browser.</p><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script><script type="text/babel"> class ExampleApplication extends React.Component { render() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = ̀React has been successfully running for ${seconds} seconds.̀;
return <p>{message}</p>; } } var start = new Date().getTime(); setInterval(() => { ReactDOM.render( <ExampleApplication elapsed={new Date().getTime() - start} />, document.getElementById('container') ); }, 50);</script>
basic-jsx-harmonyES2015+JSXRequires babel
renderthis.propsElement <p>
13 / 34
basic
14 / 34
basic-jsx
15 / 34
basic-jsx-harmony
16 / 34
<script src="../../build/react-dom-fiber.js"></script><script> function ExampleApplication(props) { var elapsed = Math.round(props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = 'React has been successfully running for ' + seconds + ' seconds.';
return React.DOM.p(null, message); }
// Call React.createFactory instead of directly call ExampleApplication({...}) in React.render var ExampleApplicationFactory = React.createFactory(ExampleApplication);
var start = new Date().getTime(); setInterval(function() { ReactDOMFiber.render( ExampleApplicationFactory({elapsed: new Date().getTime() - start}), document.getElementById('container') ); }, 50);</script>
fiberbasic with �ber function vs. React.createClass()ReactDOMFiber vs. ReactDOM
Ref: React Fiber is an ongoingreimplementation of React's corealgorithm. It is the culmination of overtwo years of research by the React team.[ React Fiber ]
17 / 34
fiber
18 / 34
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script><script type="text/babel"> var Counter = React.createClass({ getInitialState: function () { return { count: 0 }; }, handleClick: function () { this.setState({ count: this.state.count + 1, }); }, render: function () { return ( <button onClick={this.handleClick}> Click me! Number of clicks: {this.state.count} </button> ); } }); ReactDOM.render( <Counter />, document.getElementById('container') );</script>
basic-click-counterJS+JSXRequires babel
this.statethis.setStategetInitialStaterender
19 / 34
basic-click-counter
20 / 34
basic-jsx-externalJS+JSXRequires babel
basic-jsx
index.htmlexample.js
<script type="text/babel" src="example.js"></script>
21 / 34
basic-jsx-external
22 / 34
basic-jsx-external
react-15.4.1$ python -m SimpleHTTPServerServing HTTP on 0.0.0.0 port 8000 ...127.0.0.1 - - [04/Dec/2016 03:28:06] "GET /examples/basic-jsx-external/ HTTP/1.1" 200 -127.0.0.1 - - [04/Dec/2016 03:28:06] "GET /examples/shared/css/base.css HTTP/1.1" 200 -127.0.0.1 - - [04/Dec/2016 03:28:06] "GET /build/react.js HTTP/1.1" 200 -127.0.0.1 - - [04/Dec/2016 03:28:06] "GET /build/react-dom.js HTTP/1.1" 200 -127.0.0.1 - - [04/Dec/2016 03:28:06] "GET /examples/basic-jsx-external/example.js HTTP/1.1" 200 -
23 / 34
basic-jsx-precompileJS+JSXbabel @dev NOT @browser
basic-jsx
index.htmlexample.js
<script src="build/example.js"></script>
24 / 34
basic-jsx-precompile
$ npm install -g babel-cli $ npm install -g babel-preset-react $ npm install -g babel-preset-es2015
$ babel version6.18.0 (babel-core 6.18.2)$ babel --presets react example.js --out-dir=buildexample.js -> build\example.js
react-15.4.1/examples/basic-jsx-precompile$ tree.|-- example.js|-- index.html|-- build|--- example.js
25 / 34
basic-jsx-precompileVanilla JS after BuildTesting: HTTP Server NOT Required
26 / 34
basic-commonjsJS+JSXreact & babel @dev NOT@browser
basic-jsx
index.htmlindex.jspackage.json
<script src="bundle.js"></script>
27 / 34
basic-commonjsindex.htmlindex.js
<!DOCTYPE html><html> <head>...</head> <body> <h1>Basic CommonJS Example with Browserify</h1> <div id="container"> <p>To install React, ...</p> </div> <h4>Example Details</h4> <p>This is written ...</p> <script src="bundle.js"></script> </body></html>
'use strict';
var React = require('react');var ReactDOM = require('react-dom');
var ExampleApplication = React.createClass({ render: function() { var elapsed = Math.round(this.props.elapsed / 100); var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' ); var message = 'React has been successfully running for ' + seconds + ' seconds.';
return <p>{message}</p>; }});...
28 / 34
basic-commonjspackage.json
{ "name": "react-basic-commonjs-example", "description": "Basic example of using React with CommonJS", "private": true, "main": "index.js", "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": "browserify ./index.js -t babelify -o bundle.js", "start": "watchify ./index.js -v -t babelify -o bundle.js" }}
29 / 34
basic-commonjs
basic-commonjs$ npm installbasic-commonjs$ npm start
> react-basic-commonjs-example@ start /home/em/basic-commonjs> watchify ./index.js -v -t babelify -o bundle.js
721641 bytes written to bundle.js (2.18 seconds)
basic-commonjs$ tree -L 1.|-- bundle.js|-- index.html|-- index.js|-- node_modules|-- package.json
30 / 34
basic-commonjsVanilla JS after BuildEverything BundledTesting: HTTP Server NOT Required
31 / 34
That's Allfor the basics ...we'll continue
later ... piece ofcake, no?
Refs
32 / 34
Refs1. A JavaScript library for building user interfaces | React2. 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 Fiber4. Intro and Concept - Learning React
33 / 34
34 / 34
ENDEueung Mulyana
https://eueung.github.io/112016/react-contCodeLabs | Attribution-ShareAlike CC BY-SA
