React Skeleton ES6

React-Skeleton-ES6.md

React Skeleton ES6

    


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);
    }
    componentDidMount(){
        // fetch data
        let nct = ((username=`xgqfrms-GitHub`, repo=`Node-CLI-Tools`) => {
            fetch(`https://api.github.com/repos/${username}/${repo}/commits`,{
                data: {
                    client_id: '08ecc2f68d922f18800e',
                    client_secret: '5846d428b5340812b76c9637eceaee979340b922'
                }
            })
            .then((response) => response.json())
            .then((json)=> {
                return repos = json;
            })
            .then((repos)=>{
                console.log(repos);
            });
        })();
    }
    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
);

https://gist.github.com/xyzdata/d9ee0f00cf4068f4ca631219b5392e1b

{...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

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

React {..json} 解构赋值

https://gist.github.com/xyzdata/d9ee0f00cf4068f4ca631219b5392e1b#gistcomment-2133707

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

/*

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

https://gist.github.com/xyzdata/d9ee0f00cf4068f4ca631219b5392e1b

*/


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://codepen.io/anon/pen/xrLRZp?editors=0010

*/

React router

https://gist.github.com/xyzdata/d9ee0f00cf4068f4ca631219b5392e1b#gistcomment-2133707