Building React Application from Scratch Part 2
Now we are progressing with building search bar of Youtube using it’s API input and searching a video and returning and update of the videos that was searched. Basically every time a use typed an input there will be an API request through Youtube API. In this blog I will discuss the concepts of exporting modules, classes and states.
In order to use the Search bar we must write a command that any file that import search bar will get that component. This is the command: export default SearchBar; In the index.js we will import that search bar like this: import SearchBar from ‘./components/search_bar’; We must specify exactly where the file is located because babel cannot guess the location of the file since it is located on my own library and not React library.
Now we will show the search bar component:
So we declared new component called SearchBar with an input and we exported that component from the file, and we finally imported into index.js file and render it into the app component and the app component generated the HTML on the DOM on the container class. This is forming a tree.
Finally we are using the event handler:
Used the render method with the event handler that will be trigger whenever the event will occur which is the change event in the input
this.setState is to manipulating the state of the target. referencing the term of the input.