React example finished

src/components/search_bar.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+
+class SearchBar extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = { term: '' };
+    }
+
+    render() {
+        return(
+            <div className="search-bar">
+                <input
+                    value={this.state.term}
+                    onChange={event => this.onInputChange(event.target.value)}/>
+            </div>
+        );
+    }
+
+    onInputChange(term) {
+        this.setState({term});
+        this.props.onSearchTermChange(term);
+    }
+}
+
+export default SearchBar;
+
+
+/*
+----- 2 ------
+class SearchBar extends React.Component {
+    render() {
+        return <input />;
+    }
+
+}
+*/
+/*
+-----1----
+const SearchBar = () => {
+    return <input />;
+};*/

src/components/video_detail.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const VideoDetail = ({video}) => {
+    if (!video){
+        return <div>Loading...</div>;
+    }
+
+    const videoId = video.id.videoId;
+    const url = `https://www.youtube.com/embed/${videoId}`;
+
+    return(
+        <div className="video-detail col-md-8">
+            <div className="embed-responsive embed-responsive-16by9">
+                <iframe className="embed-responsive-item" src={url}></iframe>
+            </div>
+            <div className="details">
+                <div>{video.snippet.title}</div>
+                <div>{video.snippet.description}</div>
+            </div>
+        </div>
+);
+
+};
+export default VideoDetail;

src/components/video_list.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import VideoListItem from './video_list_item';
+
+const VideoList = (props) => {
+    const videoItems = props.videos.map((video) => {
+        return (<VideoListItem
+            onVideoSelect={props.onVideoSelect}
+            key={video.etag}
+            video={video} />
+        );
+    });
+
+
+    return (
+        <ul className="col-md-4 list-group">
+            {videoItems}
+        </ul>
+    );
+};
+
+export default VideoList;

src/components/video_list_item.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const VideoListItem = ({video, onVideoSelect}) => {
+
+    const imageUrl = video.snippet.thumbnails.default.url;
+
+    return(
+        <li onClick={() => onVideoSelect(video)} className="list-group-item">
+            <div className="video-list media">
+                <div className="media-left">
+                    <img className="media-object" src={imageUrl}/>
+                </div>
+                <div className="media-body">
+                    <div className="media-heading">{video.snippet.title}</div>
+                </div>
+            </div>
+        </li>
+    );
+};
+
+export default VideoListItem;

src/index.js

@@ -1,15 +1,47 @@
-import React from 'react';
+import _ from 'lodash';
+import React , {Component} from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'react-redux';
-import { createStore, applyMiddleware } from 'redux';
+import YTSearch from 'youtube-api-search';
+import SearchBar from './components/search_bar';
+import VideoList from './components/video_list';
+import VideoDetail from './components/video_detail';
+const API_KEY = 'AIzaSyA5hsdzfx-GWznhryIs_y0onwMNWlGFCDc';
 
-import App from './components/app';
-import reducers from './reducers';
+class App extends Component
+{
+    constructor(props){
+        super(props);
 
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+        this.state = {
+            videos: [] ,
+            selectedVideo: null
+        };
+        this.videoSearch('cat');
+    }
 
-ReactDOM.render(
-  <Provider store={createStoreWithMiddleware(reducers)}>
-    <App />
-  </Provider>
-  , document.querySelector('.container'));
+    videoSearch(term){
+        YTSearch ({key: API_KEY, term: term}, (videos) => {
+            this.setState({
+                videos: videos,
+                selectedVideo: videos[0]
+            });
+        });
+    }
+
+    render() {
+        const videoSearch = _.debounce((term) => {this.videoSearch(term)}, 300);
+
+
+        return (
+            <div>
+                <SearchBar onSearchTermChange={videoSearch}/>
+                <VideoDetail video={this.state.selectedVideo} />
+                <VideoList
+                    onVideoSelect = {selectedVideo => this.setState({selectedVideo})}
+                    videos={this.state.videos}/>
+            </div>
+        );
+    }
+}
+
+ReactDOM.render(<App />, document.querySelector('.container'));

style/style.css

@@ -0,0 +1,27 @@
+.search-bar {
+    margin: 20px;
+    text-align: center;
+}
+
+.search-bar input {
+    width: 75%;
+}
+
+.video-item img {
+    max-width: 64px;
+}
+
+.video-detail .details {
+    margin-top:10px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.list-group-item {
+    cursor: pointer;
+}
+
+.list-group-item:hover {
+    background-color: #eee;
+}