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.

First thing we need to do is to import React Library in the new file search_bar.js: import React from ‘react’; We do this because we turning the JSX into normal Javascript it will eventually turn into a call like: React.createElement.

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.

Now I will write a class component we is used to have an internal record keeping. Because users will be typing into the input in the component, the component must have some ability to introspect itself to tell other parts of the application. We will be using ES6 class which is Javascript Object with properties and methods to it. We defined new class Search Bar and extending it to all the functionalities that React Component has.

First we define a new class called search bar and give it access to all its functionalities that react component class. than we using a constructor method. All javascript classes have a constructor. A constructor is the first function called automatically whenever new instance of class is created. The constructor help us to initialize variables and state. We also used super method which is calling parent method on parent class. We are initializing the state by creating a new object and assigning it to this.state. The object contains the property term on state that will be recorded the change to be the value of the input.

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.

Thank You!!!

Show your support

Clapping shows how much you appreciated ziv zamechek’s story.