19. Reactjs

home

Contents

19.0 Choose Reactjs

19.1 Reactjs libraries and Javascript with Babel

<!DOCTYPE html> <html> <head> <script src="https://fb.me/react-15.2.1.js"></script> <script src="https://fb.me/react-dom-15.2.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script> </head> <body> <div id='react-container'></div> <script type="text/babel"> ReactDOM.render(<div>hello world</div>, document.getElementById('react-container')) </script> </body> </html>

19.2 Component and its Look

<head> ..... <style> div.container { background-color: powderblue; width: 200px; height: 200px; position: relative; } </style> </head> <body> <div id='react-container'></div> <script type="text/babel"> var MyComponent = React.createClass({ render() { return <div className="container">My Component</div> } }) ReactDOM.render(<MyComponent />, document.getElementById('react-container')) </script>

19.2 Properties created when passing parameters to a class constructor

----------- code as below: ---------------- ... <style> div.container { position: relative; width: 100px; height: 100px; float: left; margin-right: 5px; background-color: powderblue; } </style> </head> <body> <div id='react-container'></div> <div id='react-container2'></div> <script type="text/babel"> // code-1: declare class - css, reactjs property in jsx expression for rendering var MyComponent = React.createClass({ render() { return ( <div className="container"> <h5>dog name is {this.props.name}</h5> <p>dog color is {this.props.color}</p> </div> ) } }) // code-2: prepare data, passing parameters, create one instance const data = {name: "tairo", color: "brown"} const pname = data.name const pcolor = data.color ReactDOM.render(<MyComponent name={pname} color={pcolor}></MyComponent>, document.getElementById('react-container')) // code-3: the 2nd instance const data2 = {name: "emi", color: "white"} const pname2 = data2.name const pcolor2 = data2.color ReactDOM.render(<MyComponent name={pname2} color={pcolor2}></MyComponent>, document.getElementById('react-container2')) </script> </body></html>

Method, Event

var MyComponent = React.createClass({ myMethod(){ alert("hello world") }, render() { return <button onClick={this.myMethod}>Click me</button> } }) ReactDOM.render(<MyComponent />, document.getElementById('react-container'))

jsx and style

<!DOCTYPE html> <html lang="en"> <head> <script src="https://fb.me/react-15.1.0.js"></script> <script src="https://fb.me/react-dom-15.1.0.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"> </script> <style> h1.intro { color:red; } </style> <title>jsx and style</title> </head> <body> <div id="react-container"></div> <script type="text/babel" src="script.js"></script> </body> </html> const { render } = ReactDOM render( <h1 id='title' className='intro' style={{backgroundColor: 'orange', fontFamily: 'verdana'}}> Hello World </h1>, document.getElementById('react-container') )

Child Component

..... <style> div.house { background-color: powderblue; width: 200px; height: 80px; position: relative; } </style> </head> <body> <div id='react-container'></div> <script type="text/babel"> var House = React.createClass({ render() { return ( <div className="house"> <h5>address: {this.props.children}</h5> <p>market date: {this.props.date}</p> </div> ) } }) var Agency = React.createClass({ render() { return ( <div> <House date="10/17/17">99 Sea St. Milton, MA</House> <House date="11/20/17">88 Water St. Quincy, MA</House> </div> ) } }) ReactDOM.render(<Agency />, document.getElementById('react-container')) </script> </body>

19.6 Another way to create a component - Stateless Function

    The following two ways to create React class as below
        1. before es6   var MyComponent = React.createClass({render(){...}})
        2. es6, class   MyComponent extends React.Component{render(){...}}    
            
There is another way to create stateless component. const MyComponent = () => { return <div> <h1>This is a stateless component</h1></h1> </div> }

19.6x   state

Example 1, state data for a button -----------------------------------------------

<!DOCTYPE html> <html> <head> <script src="https://fb.me/react-15.2.1.js"></script> <script src="https://fb.me/react-dom-15.2.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script> <title>Intro to State</title> </head> <body> <div id='react-container'></div> <script type="text/babel"> var Checkbox = React.createClass({
                        getInitialState() {
                            return {count: 0}
                        },
                        handleCheck() {
                            this.setState({ count: this.state.count + 1})
                        },
                
render() { return ( <div> <p>click me to increment the count</p> <button type="button" onClick={this.handleCheck}> {this.state.count} </button> </div>) } }) ReactDOM.render(<Checkbox/>, document.getElementById('react-container')) </script> </body> </html>

Example 2, state data for a checkbox -----------------------------------------------


            getInitialState() {
                return {checked: true}
            },
            
handleCheck() { this.setState({checked: !this.state.checked}) }, render() { var message if(this.state.checked) { msg = "I am checked" } else { msg = "I am unchecked" } return ( <div> <input type="checkbox" onChange={this.handleCheck} defaultChecked={this.state.checked}/> <p>This box is {message}</p> </div>) }

When the state data changes, the component will be rerendered.

 
---------------------------------------------------------------------
1.  It seems that meaning of component is clear at this point.
2.  A React component has a look, can be nested. It has properties, methods, events.   
3.  There are many components in a Reactjs page, unlike Angularjs.
4.  More than that, it is more efficient in performance.
----------------------------------------------------------------------

19.7   Routing for SPA without AJAX

The code is as below:

... <script src="https://npmcdn.com/react-router@3.0.0/umd/ReactRouter.js"></script> </head> <body> <div id='react-container'></div> <script type="text/babel"> var Router = ReactRouter.Router var Route = ReactRouter.Route var IndexRoute = ReactRouter.IndexRoute var Link = ReactRouter.Link var browserHistory = ReactRouter.browserHistory class Route1 extends React.Component { btnClick2() { browserHistory.push('/page2'); } btnClick3() { browserHistory.push('/page3'); } render() { return( <div> <h2>page 1</h2> <div> <button onClick={ this.btnClick2 }>Goto page 2</button> <button onClick={ this.btnClick3 }>Goto page 3</button> </div> </div> ); } } class Route2 extends React.Component { btnClick1() { browserHistory.push('/page1'); } btnClick3() { browserHistory.push('/page3'); } render() { return( <div> <h2>page 2</h2> <div> <button onClick={ this.btnClick1 }>Goto page 1</button> <button onClick={ this.btnClick3 }>Goto page 3</button> </div> </div> ); } } class Route3 extends React.Component { btnClick1() { browserHistory.push('/page1'); } btnClick2() { browserHistory.push('/page2'); } render() { return( <div> <h2>page 3</h2> <div> <button onClick={ this.btnClick1 }>Goto page 1</button> <button onClick={ this.btnClick2 }>Goto page 2</button> </div> </div> ); } } // note: You must access the route first ReactDOM.render( <Router history={browserHistory}> <Route path="/" component={Route1} /> <Route path="/page1" component={Route1} /> <Route path="/page2" component={Route2} /> <Route path="/page3" component={Route3} /> </Router>, document.getElementById('react-container') ); </script> </body> </html>

19.8  draggable component

<!DOCTYPE html> <html> <head> <script src="https://fb.me/react-15.2.1.js"></script> <script src="https://fb.me/react-dom-15.2.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script> <script src="https://npmcdn.com/react-draggable"></script> <style> div.container { background-color: powderblue; width: 200px; height: 200px; position: relative; } </style> </head> <body> <div id='react-container'></div> <script type="text/babel"> var MyComponent = React.createClass({ render() { return ( <ReactDraggable> <div className="container">My Component</div> </ReactDraggable> ) } }) ReactDOM.render(<MyComponent />, document.getElementById('react-container')) </script> </body> </html>

19.9  lifecycle method

var gData var MyComponent = React.createClass({ componentWillMount(){ console.log("MyComponent will be mounted") gData = "good evening" }, render() { return <div>{gData}</div> } })

19.10  Getting HTML input data

<script type="text/babel"> var gData // global variable var MyComponent = React.createClass({ save() { gData = this.refs.greeting.value console.log(' gData = ' + gData) }, render() { return ( <div> // it can be a form <p>say some greeting:&nbsp;<textarea ref="greeting"></textarea></p> <p><button onClick={this.save}>SAVE</button></p> </div> ) } }) ReactDOM.render(<MyComponent></MyComponent>, document.getElementById('react-container')) </script>

19.11  reactjs + webpack3 for production, Feb.17,2018

// folder structure | dist index.html | src index.js package.json web pack.config.js // 1. dist/index.html <!DOCTYPE html> <html> <head> <title>webpack</title> </head> <body> <h5> Feb.17, 2018</h5> <div id="react-container"></div> <!--script src="./bundle.js"></script--> <script src="assets/bundle.js"></script> </body> </html> // 2. src/index.js import React from 'react' import ReactDOM from 'react-dom' const MyComponent = () => <h1>reactjs + webpack3</h1> ReactDOM.render(<MyComponent />, document.getElementById('react-container')) // 3. package.json { "name": "template", "version": "1.0.0", "description": "", "scripts": { "build": "webpack", "dev": "webpack-dev-server" }, "author": "John Doe", "license": "", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.7" }, "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0" } } // 4. webpack.config.js const path = require("path") module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: path.join(__dirname, "dist") publicPath: "assets" }, devServer:{ contentBase: path.join(__dirname, "dist"), port: 8080 }, module: { rules: [ { test: /.js$/, exclude: /(node_modules)/, use: { loader: "babel-loader", options: { presets: ["env", "react"] } } } ] } }

19.12  demo: json array => html table

// ProductRow.js export const ProductRow = ({productID, desc, quantity, price}) => ( <tr><td>{productID}</td> <td>{desc}</td> <td>{quantity}</td> <td>{price}</td></tr> ) // ProductList.js import { ProductRow } from './ProductRow' export const ProductList = ({products}) => ( <table> <thead><tr> <th>Product ID</th> <th>Description</th> <th>Quantity</th> <th>unit price</th> </tr></thead> <tbody> {products.map((product, i) => <ProductRow key={i} {...product}/> )} </tbody> </table> ) // index.js import React from 'react' import { render } from 'react-dom' import { ProductList } from './components/ProductList' window.React = React render( <ProductList products={ [ { productID: "B22", desc: "small dog food ", quantity: 3, price: 30.00 }, { productID: "X98", desc: "big dog chew", quantity: 10, price: 5.00 }, { productID: "W45", desc: "treat for all dogs", quantity: 15, price: 2.00 } ] }/>, document.getElementById('react-container') )

19.13  Reactjs data binding

<AddPurchasedProductForm onNewPurchasedItem={this.addProduct} />

note: Other child components can also change and bind data like this.