import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    state ={
        isLoading:false,
        data:null
    };
    fetchData = () =>{
        this.setState({
            isLoading:true
        },()=>{
            fetch('https://api.github.com/users/cxb8888').then(response=>{
                if(response.ok){
                    return response.json();
                }
            }).then(data=>{
                this.setState({
                    data,
                    isLoading:false
                });
            })
        })
    };
    render(){
        let {isLoading, data} = this.state;
        return (<div>
            <h2>原生fetch交互</h2>
            <button onClick={this.fetchData}>获取数据</button>

            <div>
                {
                    isLoading?<strong>加载中...</strong>:
                    <div>
                        {
                            data==null?<strong>暂无数据...</strong>:
                            <ul>
                                <li>名字: {data.name}</li>
                                <li>公司网址: {data.company}</li>
                                <li>头像: 
                                    <img src={data.avatar_url} alt=""/>
                                </li>
                            </ul>
                        }
                    </div>
                }
            </div>
        </div>)
    }
}


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