19.0 Choose Reactjs

Reactjs is the libraries for develop websites for client-side.
It is not to replace the classic way using HTML.
There are two main reason to choose it
- big website with high traffic,load
- highly dynamic behavior is needed.
Specific development style is there.
With reactjs libraries, you can render html elements with javascript.
You can also render html elements with JSX code
In a reactjs component, there is a render method.
In this method, you can return a another html element or component in jsx.

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>

notes:

Three libraries are used in Reactjs - ReactDOM, React, Babel.
Reactjs uses a superset of Javascript.
If the CDN libraries are used, code like ES6 will converted to ES5 when the page is loaded.
For production, preprocess with Babel is required. You can handle migration later.
ReactDOM.render is a class-level method.
the 1st argument is a HTML tag, div
the 2nd argument is the location for the HTML element.
Reactjs is fast.
    There is a react virtual DOM.
    It is a JS object.
    It sits between DOM and javascript logic.
    It has the intelligences to update DOM when needed.

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>

notes:

React.create is a class-level method.
    It creates a Reactjs component, syntax like OO class, implemented in js fuction.
    This is the code before ES6.
    If you code in ES6 in OO style. Still, the code will be transpiled into ES5.
    ES6 code is more terse.
    the argument is a code block, in which method render is invoked.
In the first argument of ReactDOM.render, it look like a HTML tag. It is an instance.
MyComponent is a class.
In the return statement of component's render method,
the html element's css attribute is called className, not class.
You'll a blue square, with text "My Component".

additional notes

add one line of code inside render code body.
console.log(typeof MyComponent)
the result is javascript function.
This is to use React object.
If you use ES6 to create a component, the type is still function.
Using these two ways to create a component. You can have state data.
In short, state data change, a rendering happens.
Because of jsx, a component has ui. That is why the type can be function.

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>

There are three parts of code.
The first part of code is to declare a class
    One html tag content: dog name is {this.props.name}
    name is the method parameter as string
    in the method body, it is a reactjs property
    wrapped inside two curl braces as JSX expression like {this.props.name} or {this.props.color}
    This is one way to create a reactjs property.
The 2nd part of code is to instantiate one.
you might get dynamic json data for web network.
The 3rd part code does the task. It simply demonstrate the reuse in OO style.
The test result is two sqares with some words.

jsx and style

The html code is below, including
react libray
react-dom library
babel-core library for tanspiling
the style definition for h1 class into.

<!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>

The js code is below, including
Using es6 feature - destructuring assignment to get method render from class ReactDom.
css class name is not class, it is className
For attribute style, there are two-pairs of curl braces
the first one is for jsx expression
the second one is for css style.

const { render } = ReactDOM render( <h1 id='title' className='intro' style={{backgroundColor: 'orange', fontFamily: 'verdana'}}> Hello World </h1>, document.getElementById('react-container') )

19.6 Another way to create a component - Stateless Function

Description

In Reactjs, a component is created as a class.
The type of a javascript class is FUNCTION.
A component can also be created as a function, which is called stateless function.
The difference is that a stateless function can not has state variables.
For state, it is explained in the next topic.

    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> }

A stateless component is simply a javascript function.
no render method.
It has no state for the class.
When a state change, the class renders accordingly.
One scenario to use state is to render differently based on a state value.
If you choose to use state, just don't use a stateless component.

19.6x state

A component can have state variables.
in its method getInitialState to declare and initalize the value.
When a state data is changed, the component render method will be called.

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}
            },

in its render method, coded as below:

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.

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>

code parts explanation

code 1: cdn library for ReactRouter
code 2: From the properties of class Router
create 5 variable, router, Route, IndexRoute, Link, browserHistroy
code 3: create 3 components from React.Component
code 4: In ReactDOM.render method,
    the first method argument is not the above three.
    It is Router, it is a routing component.
    Under Router, there are 4 Route, they are routing components too.
    For each route, defining the path and the application component.
code 5: for each application component,
there are two buttons.
the event handlers use method browserHistory.push for navigate.

test notes:

I use a normal web server to test, webmatrix.
enter url like localhost: 8080 as path /
I can not test with plnkr.

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

step 1: create the folder structure and files as below

// 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="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"] } } } ] } }

step 2: npm install
- folder node_modules is created.
- All the related libraries are downloaded inside.
- package-lock.json is created also
step 3: npm run build,
- bundle.js is created under folder dist.
- under folder dist, there are two files - bundle.js and html.js
- in html, in the script tag, src="assets/bundle.js
- For bundle.js, dist is the phsyical folder, assets is the folder for access.
- The bunlde file is referred, not the original js file. It is to reduce http requests.
step 4: npm run dev, to start the website in the server.
- A virtual bundle file will be created in memory.
- If any content changes, the bundle will be rebuilt, the page will be refreshed.
step 5: open a browser, enter localhost:8080 to see the page content.
note 1: For webpack, please see 20_webpack
note 2: webpack-dev-server is used.
note 3: This is a changing environment, I referred from a current sample webpack.config.js.

19.12 demo: json array => html table

The demo is to render a json array to a HTML table
first, create an app cloned from 9.11
The demo is for a pet food shopping cart.
Replace js files as below
npm run dev, and veiw the app in your browser.
In ProductRow.js
- It prepares and exports the html table row in the JSX code for one product.
- stateless function
- The function parameter has four elements by ES6 destructive assignment for one product.
In ProductList.js
- It imports component ProductRow.
- It prepares and exports the html table in the JSX code for the shopping cart.
- the function parameter is a json array.
- In index.js, the render method uses this component, passing all items in json array.
- In the jsx code for tag thead, it prepares static data.
- In the jsx code for tag tbody, it uses array map method to iterate each product.
- and use component ProductRow for the jsx code(each item).
In index.js
- import component ProductList
- in the react-dom render method, using component ProductList.
- The parameter is in json array.

// 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

one senario overview

A application has several ui components
Routing is applied.
Shared state data objects is used
Component App is needed
- Based on the route, it creates the corresponding child components.
  - In the tag for child component, define an argument for event(implmented in function in reactjs)
  - also defines the event handler(implemented in fuction also)
- It defines the shared data as state object.

A data change begins in a child component.

For example ,in a component for a form, a user enters data and click button submit.
The function event handler for submit is called
- It will call something like below:

               onNewPurchasedItem({
                    prodct_id:  _product_id,
                    price:      _price,
                    number:     _number             
               })
               
               1. onNewPuchasedItem                    --- a function
               2. () is to run it               --- run it
               3. {...} is the function's parameter    --- like event's message data
               4. a event is fired with the changing data.

Component App receives the event, it calls the event handler.
The handler update the shared state data.
Becasue the shared state data change, all the related ui components will be re-rendered.

Component App creates a child component as below:

AddPurchasedProductForm is the child component.
onNewPurchasedItem is a function. It is also a event
- It is subscribed in App component.
- The child component publishs it.

Component App receives the event, it calls the event handler.
Uing the new data, the handler update the shared state data.
Becasue the shared state data change, all the related ui components will be re-rendered.

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

19. Reactjs

Contents

19.0 Choose Reactjs

19.1 Reactjs libraries and Javascript with Babel

19.2 Component and its Look

19.2 Properties created when passing parameters to a class constructor

Method, Event

jsx and style

Child Component

19.6 Another way to create a component - Stateless Function

19.6x state

19.7 Routing for SPA without AJAX

19.8 draggable component

19.9 lifecycle method

19.10 Getting HTML input data

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

19.12 demo: json array => html table

19.13 Reactjs data binding