Learning React

Glossary:

Payload — https://en.wikipedia.org/wiki/Payload_(computing)


In JSX, we can write:

<input></input> is the same as <input /> in JSX if we don't plan on writing anything between the opening and closing tags. 

We need to import react in all files that include JSX because React.Method is used to transform the JSX into pure javascript, aka vanilla javascript.

  • React can have class-based or function-based components
  • State is a javascript object that exists in every class-based component
  • Each instance of a class based component has it’s own copy of the state object
  • A controlled component has it’s value controlled by it’s state
  • Downwards data flow — Only the most parent component of an application should be responsible for fetching data
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: ‘’ };
}

render() {
return <input onChange={(event) => console.log(event.target.value)} />;
}
}

Turning the main App function component into a class component

class App extends Component {
constructor(props) {
super(props);

this.state = { videos: [] };
    YTSearch({key: API_KEY, term: ‘cricket’}, (videos) => {
this.setState({ videos })
});
}
render() {
return (
<div>
<SearchBar />
<VideoList videos={this.state.videos} />
</div>
);
}
}

Let’s tackle the constructor function first

The App is now a class component. This allows us to assign state via this.state = { videos: [] };

We call the YTSearch method that we imported to make calls to the YouTube API using our API_KEY const. Let’s break down the youtube-api-search module.

We imported the youtube-api-search module and assigned it to a constant named ‘YTSearch’. We call this method to fetch video data from YouTube. This is done through sending an object as an argument, followed by a second argument, which is a callback. The callback has an argument, which is the data we make our request using the object.

//How YTSearch works
import YTSearch from 'youtube-api-search';
//Now we can start making calls to YouTube and YouTube will return to us the data once the call is accepted. The data in this case means video search results.
//We will make a call using YTSearch method. It accepts two arguments: an object and a callback function.
YTSearch( {}, () => {} );
//The first argument is an object. The object must have two key/value pairs. The first key is 'key' and it's value is the key we obtained from YouTube Developers website. The second key/pair is term/search query.
YTSearch({key: API_KEY, term: ‘cricket’}, (videos) => {
this.setState({ videos })
});
// We haven't talked about the callback function yet. Let's do that now. The second argument is called once YTSearch is finished executing this:
YTSearch( {}, callback function );

Once the last line of the code above is ran, YouTube does a check against our secret key that we provided in the first argument. Once it is checked and accepted, it queries our search term and sends a response object back to us. This is done by going back to the function that we provided as the second argument of the YTSearch method.

The callback function takes the argument videos, which is the data sent back to us from the YouTube API as an array of objects.

Let’s rewind for a second…

The whole reason we made this component a class component is to set state, didn’t we? The way we are going to do this is by stating an object that we wish to observe the state of. We do this by performing this.state = { videos: [] }. This allows us to set the ‘videos’ key to an empty array.

this.state is used only once to assign anything to the state object. We change the state all other times using a function that React provides us called setState(). This is important to remember.

This is why in the callback function, we use this.setState({ videos }). What this does is it allows us to set the state of the videos key in our state object to the data we receive from the YouTube API in the form of the argument provided in the callback function, that we also happen to call videos. ES6 allows us to use a shortcut, which instead of writing this.setState ({ videos: videos }), we can simply just write ({ videos }) and ES6 will intelligently figure out that we meant that the videos key in the state object should be the videos data, which is an array of objects.

Making a call to the YouTube API with a search term, which returns an array of five objects, that we call ‘videos’ in our callback function argument

Wow, all that just to explain 10 lines of code. We are doing great :).

Let’s tackle the render function

render() {
return (
<div>
<SearchBar />
<VideoList videos={this.state.videos} />
</div>
);
}

We fetch the data in our React app from the most parent component. So how do we pass this data to our child components? We define a property in the JSX tag, as shown in the code above. videos = {this.state.videos}}. The videos key takes the current state.

The image that forms in my mind is the array of objects, which form the value of the key “videos.” This key is in the constructor and is shared to the child component by creating a prop called videos and giving it the value of the videos key in the state object in our constructor function.

// video_list.js
import React from ‘react’;
const VideoList = (props) => {
return (
<ul className=”col-md-4 list-group”>
{props.videos.length}
</ul>
);
};
export default VideoList;

VideoList is a functional component that we export to our main App to inject the video search results. How do we use these search results in our video_list.js? We bring in the properties and their values we created in our main app index.js file as an object that we call props. This props object defines all the key/value pairs we created in index.js. We can use the props object to access the data we fetched from index.js — our main App component.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.