- );
- }
-}
diff --git a/src/components/search_bar.js b/src/components/search_bar.js
new file mode 100644
index 0000000000..96f12c8f6a
--- /dev/null
+++ b/src/components/search_bar.js
@@ -0,0 +1,41 @@
+// need to import react into all components that have jsx
+
+import React, { Component } from 'react';
+
+// // functional component
+// const SearchBar = () => {
+// return
+// };
+
+// class component
+// this is how we define methods on a class
+// when we create a class component we must always create a render method and have some jsx, or else there will be an error
+// declare event handler and pass it to the input element
+class SearchBar extends Component {
+// this is how we initialize state in a class based component
+ constructor(props) {
+ super(props);
+
+// create a new obj and assign it to this.state
+// as user types in input, update this.state to be value of what is in the input field
+ this.state = { term: ''}
+ }
+
+// use this.setState to inform react that state is changing
+ render() {
+ return (
+
+ this.onInputChange(event.target.value) } />
+
+ );
+ }
+
+ onInputChange(term) {
+ this.setState({term});
+ this.props.onSearchTermChange(term);
+ }
+}
+
+export default SearchBar;
diff --git a/src/components/video_detail.js b/src/components/video_detail.js
new file mode 100644
index 0000000000..a93e0fc56b
--- /dev/null
+++ b/src/components/video_detail.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const VideoDetail = ({video}) => {
+ // react tries to load immediately, so need this if statement to guard against trying to get the id off of an object that is undefined
+ if (!video) {
+ return
+ );
+};
+
+export default VideoListItem;
+
diff --git a/src/index.js b/src/index.js
index 69d577acd1..5f5255be87 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,48 @@
-import React from 'react';
+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 = 'AIzaSyC_XvStCGm1z1suSkSnjeTkciTWMJQFjMc';
-import App from './components/app';
-import reducers from './reducers';
-const createStoreWithMiddleware = applyMiddleware()(createStore);
+// Create a new component. This component should produce some HTML
+// constructor will run on page load because we make a new instance of App, which will immediately kick off a searchwith the term surfboards, then the callback function will be called with the list of videos
+class App extends Component {
+ constructor(props) {
+ super(props);
-ReactDOM.render(
-
-
-
- , document.querySelector('.container'));
+ this.state = {
+ videos: [],
+ selectedVideo: null
+ }
+ this.videoSearch('surfboards')
+ };
+
+ videoSearch(term) {
+ YTSearch({key: API_KEY, term: term}, (videos) => {
+ this.setState({
+ videos: videos,
+ selectedVideo: videos[0]
+ })
+ });
+ }
+
+ render() {
+ return (
+
+