react prevState history

react flux

reference:
https://www.atlassian.com/blog/software-teams/flux-architecture-step-by-step

react lift state, life cycle

react lift state, life cycle, validate code

<style>
.hour_box{
    width:40px;
    text-align:center;
    display:inline-block;
}
</style>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="root1"></div>
<script type="text/babel">

class App2 extends React.Component {
    constructor(props) {
        super(props);

        const d = new Date();
        const calgary_h = d.getHours();

        //store est time(hour) in state
        this.state = { time: calgary_h + 2, minite: 0, second: 0 };
    }

    componentDidMount() {
        this.app_timer = setInterval(
            () => this.tick(), 1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.app_timer);
    }

    tick() {
        const d = new Date();
        const min = d.getMinutes();
        const sec = d.getSeconds();

        this.setState(
            { minite: min, second: sec }
        );

    }

    handleChange_calgary(calgary_time) {

        const est_time = calgary_time + 2;
        this.setState({ time: est_time });
    }

    handleChange_beijing(beijing_time) {

        const est_time = beijing_time - 12;
        this.setState({ time: est_time });
    }

    handleChange_london(london_time) {

        const est_time = london_time - 5;
        this.setState({ time: est_time });
    }

    render() {
        return (
            <div>
                <h2>check regional time</h2>

                <TimeBox location={regions.Calgary}
                    time={parseInt(this.state.time)}
                    mins={this.state.minite}
                    secs={this.state.second}
                    handleChange={(e) => this.handleChange_calgary(parseInt(e.target.value))} >
                </TimeBox>


                <TimeBox location={regions.BeiJing}
                    time={parseInt(this.state.time)}
                    mins={this.state.minite}
                    secs={this.state.second}
                    handleChange={(e) => this.handleChange_beijing(parseInt(e.target.value))} >
                </TimeBox>

                <TimeBox location={regions.London}
                    time={parseInt(this.state.time)}
                    mins={this.state.minite}
                    secs={this.state.second}
                    handleChange={(e) => this.handleChange_london(parseInt(e.target.value))} >
                </TimeBox>
            </div>
        );
    }
}

function TimeBox(props) {

    const est_time = props.time;
    let local_time = est_time;
    const city = props.location;

    switch (city) {
        case "calgary":
            local_time -= 2;
            break;
        case "beijing":
            local_time += 12;
            break;
        case "london":
            local_time += 5;
            break;
        default:
            break;
    };

    return (
        <div>
            <h3>{props.location} time</h3>

            <input type="number"
                className="hour_box"
                value={calc_hour(local_time)}
                onChange={props.handleChange} ></input>
            <span> : {props.mins} : {props.secs}</span>
        </div>
    );
}

TimeBox.propTypes = {
    time: PropTypes.number,
};

function calc_hour(hour) {

    let calced_hour = hour;

    if (calced_hour < 0) {
        while (calced_hour < 0) { calced_hour += 24; }
    }

    if (calced_hour > 24) {
        while (calced_hour > 24) { calced_hour -= 24; }
    }

    return calced_hour;
}

const regions = {
    London: "london",
    BeiJing: "beijing",
    Calgary: "calgary"
};


ReactDOM.render(
    <App2 />,
    document.getElementById('root1')
);
</script>
</body>

reference:
https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm
https://reactjs.org/docs/typechecking-with-proptypes.html
https://github.com/yannickcr/eslint-plugin-react/issues/1472
https://stackoverflow.com/questions/7818903/jslint-says-missing-radix-parameter-what-should-i-do

react 1

react 1 code

<head>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
    render() {
        return (
            <div>
                <CommentBox data={data} />
                <CommentForm />
            </div>
        );
    }
}

function CommentBox(props) {
    return (
        <div>
            <p>I am a Comment Box</p>
            <CommentList data={props.data}/>
        </div>
    );
}

function CommentList(props) {

    const commentNodes = props.data.map((item)=>
        <li key={item.id}>
            {item.author}, {item.text}
            </li>
        );

    return (
        <div>
            <p>I am a List Box</p>
            <ol>{commentNodes}</ol>
       
        </div>
    );
}

function CommentForm() {
    return <p>I am a Comment Form</p>
}

function Comment(props) {
    return (
        <div>
            <p>{props.author}</p>
            {props.children}
        </div>
    );
}

const data = [
    { id: 1, author: "Daniel Lo Nigro", text: "Hello ReactJS.NET World!" },
    { id: 2, author: "Pete Hunt", text: "This is one comment" },
    { id: 3, author: "Jordan Walke", text: "This is *another* comment" }
];

ReactDOM.render(
    <App />,
    document.getElementById('root'));

</script>
</body>

ReactJs.Net

https://reactjs.net/getting-started/tutorial.html

reference:
The problem is that now services are not available at some points in the Startup process. To ensure that 'React.AspNet.HttpContextLifetimeProvider+PerRequestRegistrations' is available the easiest way is to change the type of ConfigureServices(IServiceCollection services) from void to IServiceProvider and add the following line at the end of ConfigureServices(IServiceCollection services) :
return services.BuildServiceProvider();
https://github.com/reactjs/React.NET/issues/433

TypeError: Object doesn't support property or method 'createClass' at Global code
https://stackoverflow.com/questions/47200488/react-net-reactscriptloadexception