import React, {Component} from 'react'import Search from './search'
import Main from './main'export default class App extends Component {render() {return (<div className="container"><Search/><Main/></div>
        )}
}

import React, {Component} from 'react'export default class Main extends Component {state = {initView: true,//搜索之前loading: false,//搜索中users: null,//搜索成功errorMsg: null//搜索失败
    }render() {const {initView, loading, users, errorMsg} = this.stateif (initView) {return <h2>请输入关键字进行搜索</h2>} else if (loading) {return <h2>正在请求中......</h2>} else if (errorMsg) {return <h2>{errorMsg}</h2>} else {return (<div className="row">{                   //箭头两个作用 1.函数 2.返回users.map((user, index) => (<div className="card"><a href={user.url} target="_blank"><img src={user.avatarUrl}style={{width: 100}}/></a><p className="card-text">{user.name}</p></div>
                        ))}</div>
            )}}
}

import React, {Component} from 'react'export default class Search extends Component {render() {return (<section className="jumbotron"><h3 className="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search"/><button>Search</button></div></section>
        )}
}

.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;
}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;
}.card > img {margin-bottom: .75rem;border-radius: 100px;
}.card-text {font-size: 85%;
}

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import './index.css';ReactDOM.render(<App/>, document.getElementById('root'));