{"size": 1000, "ext": "js", "max_stars_repo_path": "src/bk/list-map/index.js", "max_stars_repo_name": "codeovervn/ReactSimpleStart", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/bk/list-map/index.js", "max_issues_repo_name": "codeovervn/ReactSimpleStart", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/bk/list-map/index.js", "max_forks_repo_name": "codeovervn/ReactSimpleStart", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.8095238095, "max_line_length": 63, "alphanum_fraction": 0.681}
//2018/03/19
//D:\Projects\React Js\20180319\ReduxSimpleStarter\src
//#3 Can import cac goi quan trong
import React, {Component} from 'react';
import ReactDOM from 'react-dom';

//2018/03/23
import YTSearch from 'youtube-api-search';
import SearchBar from './components/search_bar';
import VideoList from './components/video_list';

const API_KEY = 'AIzaSyBonWpZwLfpoW0d9UerBh5yf2sE72XNQFs';
//const API_KEY = 'AIzaSyClfTQORy6hTd0hhOTm4TKl0ol9FeHEnJM';

//#1 Create 1 constan co chua tag html
//const App = () => {
//#4
class App extends Component {
	constructor(props) {
		super(props);
		
		this.state = { videos: [] };
		
		YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
			//console.log(data);
			//console.log(videos);
			this.setState({ videos });
		});
	}
	render() {
		return (
			<div>
				<SearchBar />
				<VideoList videos={this.state.videos} />
			</div>
		);
	}
}

//#2 Object React se chuyen const thanh html
ReactDOM.render(<App />, document.querySelector('.container'));
