REACT ROUTER

react-router.md

REACT ROUTER

https://reacttraining.com/react-router/web/example/sidebar

react-router

https://scotch.io/tutorials/routing-react-apps-the-complete-guide#toc-setting-up-react-for-routing

https://facebook.github.io/react/docs/components-and-props.html

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import Item1 from './components/Item1.js';
import Item2 from './components/Item2.js';
import Item3 from './components/Item3.js';

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>item1</div>,
        main: () => <div><Item1 /></div>
    },
    {
        path: '/item2',
        sidebar: () => <div>item2</div>,
        main: () => <div><Item2 /></div>
    },
    {
        path: '/item3',
        sidebar: () => <div>item3</div>,
        main: () => <div><Item3 /></div>
    }
]

class ContentBox extends Component {
    render() {
        return (
            <Router>
                <div style={{ display: 'flex' }}>
                    <div style={{
                        padding: '10px',
                        width: '40%',
                        background: '#f0f0f0'
                    }}>
                        <ul style={{ listStyleType: 'none', padding: 0 }}>
                            <li><Link to="/">item1</Link></li>
                            <li><Link to="/item2">item2</Link></li>
                            <li><Link to="/item3">item3</Link></li>
                        </ul>
                        {/*{routes.map((route, index) => (
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                component={route.sidebar}
                            />
                        ))}*/}
                    </div>
                    <div style={{ flex: 1, padding: '10px' }}>
                        {routes.map((route, index) => (
                            <Route
                                key={index}
                                path={route.path}
                                exact={route.exact}
                                component={route.main}
                            />
                        ))}
                    </div>
                </div>
            </Router>
        );
    }
};

export default ContentBox;

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>home!</div>,
        main: () => <h2>Home</h2>
    },
    {
        path: '/bubblegum',
        sidebar: () => <div>bubblegum!</div>,
        main: () => <h2>Bubblegum</h2>
    },
    {
        path: '/shoelaces',
        sidebar: () => <div>shoelaces!</div>,
        main: () => <h2>Shoelaces</h2>
    }
]

const SidebarExample = () => (
    <Router>
        <div style={{ display: 'flex' }}>
            <div style={{
                padding: '10px',
                width: '40%',
                background: '#f0f0f0'
            }}>
                <ul style={{ listStyleType: 'none', padding: 0 }}>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/bubblegum">Bubblegum</Link></li>
                    <li><Link to="/shoelaces">Shoelaces</Link></li>
                </ul>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.sidebar}
                    />
                ))}
            </div>

            <div style={{ flex: 1, padding: '10px' }}>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.main}
                    />
                ))}
            </div>
        </div>
    </Router>
);

export default SidebarExample;

https://reacttraining.com/react-router/web/example/sidebar

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const routes = [
    {
        path: '/',
        exact: true,
        sidebar: () => <div>home!</div>,
        main: () => <h2>Home</h2>
    },
    {
        path: '/bubblegum',
        sidebar: () => <div>bubblegum!</div>,
        main: () => <h2>Bubblegum</h2>
    },
    {
        path: '/shoelaces',
        sidebar: () => <div>shoelaces!</div>,
        main: () => <h2>Shoelaces</h2>
    }
]

const SidebarExample = () => (
    <Router>
        <div style={{ display: 'flex' }}>
            <div style={{
                padding: '10px',
                width: '40%',
                background: '#f0f0f0'
            }}>
                <ul style={{ listStyleType: 'none', padding: 0 }}>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/bubblegum">Bubblegum</Link></li>
                    <li><Link to="/shoelaces">Shoelaces</Link></li>
                </ul>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.sidebar}
                    />
                ))}
            </div>

            <div style={{ flex: 1, padding: '10px' }}>
                {routes.map((route, index) => (
                    <Route
                        key={index}
                        path={route.path}
                        exact={route.exact}
                        component={route.main}
                    />
                ))}
            </div>
        </div>
    </Router>
);

export default SidebarExample;

<Router>must have only one child!</Router>

<Router> as a container of all <Link>s & <Route>s!

React Skeleton

import React, {Component} from 'react';

import ReactDOM, {render} from 'react-dom';
import PropTypes from 'prop-types';

// import {BrowserRouter, Route, Link} from 'react-router-dom';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';


ComponentName.defaultProps = {
    name: `xgqfrms`,
    age: 23
};

ComponentName.propTypes = {
    age: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    object: PropTypes.object,
    func: PropTypes.func,
    optionalNode: PropTypes.node,
    optionalElement: PropTypes.element,
    children: PropTypes.element.isRequired
};

class ComponentName extends Component {
    constructor(props){
        super();
        this.state = {
            count: props.initialCoun,
            message: `Hello, `
        };
        this.clickHandler = this.clickHandler.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    clickHandler(){
        this.setState({
            count: this.state.count + 1,
            message: `Wrold !`
        }); 
    }
    handleClick = () => {
        console.log(this.state.message);
    }
    addClick = (prevState, props) => {
        this.setState({
            // prevState, props
        });
    }
    render () {
        const children = this.props.children;
        return (
            <div>
                {/**/}
                <h1>Hello, {this.props.name}</h1>
                <section>
                    <div>
                        <p>
                            <h3>{this.state.message}</h3>
                            <span>{this.state.count}</span>
                        </p>
                        <button>Add</button>
                    </div>
                </section>
                <div>
                    children {children}
                </div>
            </div>
        )
    }
}

export default ComponentName;

const app_root = document.querySelector(`#app_root`);
const root = document.getElementById('root')

ReactDOM.render(
    <ComponentName props={...props} name="xgqfrms" />,
    app_root
);




class StatelessComponentName extends Component {
    render () {
        return (
            <div>
                {/**/}
                <h1>Hello, {this.props.name}</h1>
                <p>
                    <h3>{this.state.message}</h3>
                    <span>{this.state.count}</span>
                </p>
            </div>
        )
    }
}


// export StatelessComponentName;

const App = () => {
    return(
        <div>
            <ComponentName props={...props} name="xgqfrms" />
            <StatelessComponentName />
        </div>
    );
};


render(
    <App />,
    app_root
);

QC

HP Quality Center, QC

https://saas.hpe.com/en-us/software/quality-center

https://saas.hpe.com/en-us/software/alm-software-development-testing

QC Tutorials

https://www.tutorialspoint.com/qc/index.htm

https://www.tutorialspoint.com/qc/qc_overview.htm

https://en.wikipedia.org/wiki/HP_Quality_Center

http://whatis.techtarget.com/definition/quality-control-QC

http://searchsoftwarequality.techtarget.com/definition/quality-assurance

http://searchcio.techtarget.com/definition/Total-Quality-Management

Quality Center Enterprise

https://saas.hpe.com/signup/try/quality-center

https://saas.hpe.com/signup/confirmation/quality-center

8 & Cap & Symbol

https://home.saas.hpe.com/myaccount/

css3 animation & angular. js

  , animateWings = function() {
    angular.element(".svg-container image").css("visibility", "hidden");
    var e = angular.element(".wing-animation")
      , t = e.width()
      , r = function() {
        var r = 1
          , n = 1
          , a = function() {
            var a = setInterval(function() {
                var i = -1 * r * t;
                e.css("background-position", i + "px 0"),
                1 == r ? r = 0 : r++,
                n >= 4 && clearInterval(a),
                n++
            }, 100)
        };
        a()
    };
    -1 !== navigator.userAgent.indexOf("MSIE") ? setTimeout(function() {
        angular.element(".registration-flow-wrap").fadeIn(1200),
        angular.element(".registration-flow-content").fadeIn(1200),
        angular.element(".wing-animation").removeClass("hidden"),
        r()
    }, 500) : setTimeout(function() {
        angular.element(".svg-container image").css("visibility", "visible"),
        angular.element(".svg-container").css("visibility", "visible"),
        setTimeout(function() {
            angular.element(".wing-animation").removeClass("hidden"),
            angular.element(".registration-flow-wrap").fadeIn(800),
            setTimeout(function() {
                angular.element(".registration-flow-content").fadeIn(800),
                setTimeout(function() {
                    angular.element(".svg-container").hide(),
                    r()
                }, 200)
            }, 800)
        }, 1800)
    }, 1e3),
    angular.element(".wing-animation").mouseover(function() {
        console.log("entering animation 2"),
        r()
    })
};

HP QC

https://home.saas.hpe.com/myaccount/#/myProducts

https://saas.hpe.com/en-us/resources/quality-center

google react!

https://translate.google.com/?source=gtx_c#auto/zh-CN/Symbol

https://saas.hpe.com/en-us/try/apppulse-web

https://community.saas.hpe.com/t5/Quality-Center-ALM/ct-p/sws-QC

https://www.hpe.com/cn/zh/home.html

https://www.youtube.com/user/HewlettPackardVideos

https://apppulse-trace.saas.hpe.com/apmappsDiag/index.html?TENANTID=752888414#/reports/onboarding

H3C

https://www.hpe.com/cn/zh/products.html

http://unis-huashan.h3c.com/cn/hpe/index.html

http://www.h3c.com/cn/default.htm

https://www.hpe.com/cn/zh/search-results.html?page=1&q=QC&autocomplete=0

https://saas.hpe.com/zh-cn/home

https://saas.hpe.com/zh-cn/software/alm-consulting-services

https://saas.hpe.com/en-us/software/quality-center

$ java -jar AppPulseAgent.jar setup

https://apppulse-trace.saas.hpe.com/apmappsDiag/index.html?TENANTID=752888414#/reports/onboarding

http://apppulse-help.saas.hpe.com/trace/eng/Content/4_Java_Agent/deployment.htm?cshid=deploy_agent

Installation token

MXBqZW1xMnN6Zzo3NTI4ODg0MTQ6MQ==

http://apppulse-help.saas.hpe.com/trace/eng/Content/5_DotNet_Agent/deployment.htm?cshid=deploy_dotnet_agent

Component Lifecycle

https://facebook.github.io/react/docs/react-component.html#mounting

VSCode format paste

microsoft/vscode#3518

microsoft/vscode#6392

microsoft/vscode#3518 (comment)

https://marketplace.visualstudio.com/items?itemName=Rubymaniac.vscode-paste-and-indent

了解何时该使用组件状态与 Redux 状态

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/post_mount_with_component_did_mount.html

https://facebook.github.io/react/docs/react-component.html#mounting

https://www.google.com/search?q=%E4%BA%86%E8%A7%A3%E4%BD%95%E6%97%B6%E8%AF%A5%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E7%8A%B6%E6%80%81%E4%B8%8E+Redux+%E7%8A%B6%E6%80%81&oq=%E4%BA%86%E8%A7%A3%E4%BD%95%E6%97%B6%E8%AF%A5%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6%E7%8A%B6%E6%80%81%E4%B8%8E+Redux+%E7%8A%B6%E6%80%81&aqs=chrome..69i57&sourceid=chrome&ie=UTF-8

{...props}

https://facebook.github.io/react/docs/components-and-props.html#functional-and-class-components

https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only

https://stackoverflow.com/questions/28452358/what-is-the-meaning-of-this-props-in-reactjs

https://facebook.github.io/react-native/docs/props.html

React Skeleton

https://gist.github.com/xgqfrms-GitHub/9bfecde362f4cee9d49dc83d770371eb

react component {...props} es6 destructuring assignment

Using ES6 Destructuring in your React Components

https://amido.com/blog/using-es6-destructuring-in-your-react-components/

function LinkComponent(props) {
    const {
        children,
        disabled,
        ...other
    } = this.props;
    // rest & speard
    const statusClass = disabled ? `disabled` : `active`;
    return (
        <a className={statusClass} {...other }>
            {children}
        </a>
    );
}

https://www.saltycrane.com/blog/2016/03/es6-features-used-react-development/

https://codepen.io/anon/pen/xrLRZp?editors=0010

function formatDate(date) {
    return date.toLocaleDateString();
}

function PropsTest(props) {
    return (
        <div>
            <h1>just props test!</h1>
            <span>My name is {props.name}</span>
            <h1>Age:{props.age}</h1>
        </div>
    );
}

function Comment(props) {
    return (
        <div className="Comment">
            <div className="UserInfo">
                <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name}/>
                <div className="UserInfo-name">
                    {props.author.name}
                </div>
            </div>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
            <hr/>
            <PropsTest {...infos}/>
        </div>
    );
}

const infos = {
    name: 'xgqfrms',
    age: '23'
};

const comment = {
    date: new Date(),
    text: 'I hope you enjoy learning React!',
    author: {
        name: 'Hello Kitty',
        avatarUrl: 'http://placekitten.com/72/72'
    }
};
ReactDOM.render(
    <div><Comment {...comment} /></div>,
    document.getElementById('root')
);

https://zhenyong.github.io/react/docs/transferring-props.html

https://stackoverflow.com/questions/28534344/javascript-var-left-props-this-props

https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7

https://babeljs.io/blog/2015/06/07/react-on-es6-plus

https://medium.com/@goncalvesjoao/react-es7-decorators-how-to-inject-props-to-your-render-method-27a0a7973106

flow / typescript

https://flow.org/en/docs/frameworks/react/

todo ...

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

https://facebook.github.io/react/docs/react-component.html#mounting

https://facebook.github.io/react/docs/components-and-props.html

https://reacttraining.com/react-router/web/example/sidebar

https://s3.cn-north-1.amazonaws.com.cn/static-documents/nd019/ReactNDsyllabusZH.pdf

https://codepen.io/anon/pen/xrLRZp?editors=0010

https://ihatetomatoes.net/react-workshop-content-preview/

https://jscomplete.com/repl

https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only

https://github.com/xgqfrms/RAIO/issues/3

react event proxy

onClick show Modal

import React, {Component} from 'react';

class RoleTree extends Component {
    linkClickHandler = (e) => {
        alert(e.target.value);
    }
    render() {
        return (
            <div className="roles-tree">
                角色树 RoleTree
                <ul onClick={(e) => this.linkClickHandler(e)}>
                    <li>
                        <a href="#1">角色1</a>
                    </li>
                    <li>
                        <a href="#2">角色2</a>
                    </li>
                    <li>
                        <a href="#3">角色3</a>
                    </li>
                </ul>
            </div>
        );
    }
}

export {RoleTree};
export default RoleTree;

React indexkey & e.key

https://stackoverflow.com/questions/45162793/how-to-get-the-e-key-of-li-element-in-react-js/45180025#45180025

https://jscomplete.com/repl

// props is an object!


// message.text => array of objects
class MessageList extends React.Component {
    getChildren = () => {
        //
    }
    render() {
        const children = this.props.messages.map(
            (message, index) => {
                //console.log(`message = `, message);
            		console.log(`index = `, index);
                //console.log(`typeof index = `, typeof index);
                let xindex = 'id_' + index; 
                console.log(`xindex = `, xindex);
                //console.log(`typeof xindex = `, typeof xindex);
                return(
                    <Message
                        key={index}
                        indexkey={index}
                        text={message.text}
                        color={message.color}
                        xyzClick={this.props.xyzClick}
                    />
                );
            }
        );
        const styles = {
        		css1: {
            		color: 'red'
            },
            css2: {
            		color: '#0f0'
            }
        }
      	return(
            <div>
                children = {children}
                <hr />
                <div>
                    BAD: <br />
                    {/* this.props = {this.props} */}
                    <div style={styles.css1}>
                        this.props.children = {this.props.color}
                    </div>
                    {/* this.props.arr = {this.props.arr} */}
                    {/* this.props.obj = {this.props.obj} */}
                    <br />
                    <p style={styles.css2}>
                        Object Error, need using map items to item
                    </p>
                </div>
            </div>
        );
    }
}

// text={message.text} => message object
class Message extends React.Component {
    render() {
    		//console.log(`this.props.text = `, this.props.text);
        //console.log(`this.props.key= `, this.props.key);
        let style = `
        		color: red;
            font-size: 23px;
        `;
        if(this.props.key === undefined){
        		//alert(`smg!`);
            console.log(`%c this.props.key= \n`, style, this.props.key);
        }
        return (
            <div>
                <hr />
                this.props.key = {this.props.key}
                <br />
                this.props.indexkey = {this.props.indexkey}
                <br />
                this.props.text = {this.props.text}
                <br />
                this.props.color = <span style={{backgroundColor: this.props.color}}>{this.props.color}</span>
                <br />
                <Button color={this.props.color} xyzClick={this.props.xyzClick}>
                    <span style={{color: '#fff'}}>Delete</span>
                </Button>
            </div>
        );
    }
}

// props.children === <span style={{color: '#fff'}}>Delete</span> ??? 
class Button extends React.Component {
    render() {
        return (
            <button
                style={{background: this.props.color}} 
                onClick={(e) => this.props.xyzClick(e)} 
                >
                {this.props.children}
            </button>
        );
    }
}




const text = [
    {
    text: "text 1",
    color: "red"
    },
    {
    text: "text 2",
    color: "blue"
    },
    {
    text: "text 3",
    color: "grey"
    },
    {
    text: "text 4",
    color: "green"
    },
    {
    text: "text 5",
    color: "#f0f"
    }
];
const color = "green";
const ArrayTest = [1, 2, 3];
const ObjectTest = {"key": "value"};

class App extends React.Component{
    constructor(props){
        super(props);
        this.state  = {
            showSate: false
        };
    }
    setModalVisible = (value) => {
        console.log(`showSate`, this.state.showSate);
        console.log(`value`, value);
        this.setState({
            showSate: value
        });
        // 状态更新可能是异步的
        setTimeout(() => {
        		console.log(`showSate`, this.state.showSate);
        });
    };
  	XC = (e) => {
      	let m = e.toString();
      	console.log(e, m);
      	return alert(`e.toString(); =\n`, m);
  	};
  render(){
      return(
          <div>
               <div>
                   <button onClick={() => console.log(`smg`)}>
                       onClick
                   </button>
                   <button onClick={()=>this.setModalVisible(true)}>
                       showModal{this.state.showSate}
                   </button>
               </div>
               <MessageList
                   messages={text}
                   color={color}
                   arr={ArrayTest}
                   obj={ObjectTest}
                   xyzClick={this.XC}/>
          </div>
      );
    }
};



export default App;

ReactDOM.render(
    <App />,
    mountNode
);

https://gist.github.com/xgqfrms-gildata/36be904c705bfe4952122b6d2e63357c

this.setState((prevState, props)

https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

https://medium.com/@mweststrate/3-reasons-why-i-stopped-using-react-setstate-ab73fc67a42e