In this video, Emmanuel Henri creates the new components required to handle the news API, and then reorganizes the structure of the application.
- [Instructor] So let's start working on our components while also reorganizing our application. So go inside VS code. And in the source folder, create a new folder called component so right click. New folder. Name it components. And then what we're going to do is move all the app files inside of that folder like so. So drag and drop your file inside of folder or do whatever it takes to move them inside of the components folder.
Like so. And because we moved them in to a different folder from the source folder, we need to also update the index dot js, so let's click here, and make sure that we are loading app from the component's folder. So just add online for components and then forwards slash. Like so. Save it. And let's run our application just to make sure everything is fine.
So click on view, integrated terminal. Let's make sure application is running. So npm start. So while this is running, let's go inside of the app dot js file here. So we can close that here. And the logo error is fine. So we'll go inside of the app. Let's remove that logo here. And we'll also remove it in here as well. So remove it on the line nine like so.
And then remove the p section so that p element remove all this as well. And in this area, we'll load a brand new component that we'll create in seconds. So let's import it and we'll create it after. So import news from a folder that will create that is called news. And the actual component itself is called news. And then load it inside of the application here.
So news and then close outer tag like so. Okay. And let's change the title welcome to react to anything you want. I'll call this my feed. Like so. Alright, so now it has an error. Failed to compile because we don't have the news component. So we'll create that next. So inside of components, create a new folder called news. And inside of that folder, so right click, create a new file called news dot js.
Now let's create the component. So what we need to do first is import react. And also we need component from react. Then we'll import another component that we'll create right after that. We'll just call it new single. In this particular component here, we'll create basically a function that will iterate through the data that we'll receive and then for each item that we'll get from the database, we'll create a new single with the item inside of it.
So let's create first this component called news. Like so. And then let's use the function render. And then this function will return. Net ul. And then this ul will run a function call render items. And we'll create that function in a second.
And then we'll map them. And this is the function. And then for each item, run this function. And this function will basically return the component, new single. And as you may know, when you're iterating through components, you need a key and we need to pass a unique key through each and this one will be the id from the item object that we'll get here.
And then we'll pass also the item object as a prop. And this will allow us to iterate through that single item. And it will render in this ul here. Okay. So we got our news item. We're good. Let me just put a space here just for cleanliness. Save that. And again, we're going to get an error because we don't have a news item here. And we need to export this one so let's go ahead and I forgot about that.
Let's export default news. Otherwise, it's not available anywhere else. And always return at the end. Always leave a space at the end. That's standard practices. Okay. So we're good here. So we need now to create a new single. So let's go ahead and create a new file. So go inside of your news folder. Create a new file. And let's call this one new single. Dot js, like so.
And what we'll do is create a simple stateless component here. So react from react. And as you may know, this is an advanced course for react so you should know how to create a stateless component. If you don't, this is permanently how you do it. So we're passing a prop called item. And we're basically returning some element here.
And the element will be an li and inside of that element, we'll have a p element. And we'll basically for now, iterate through the title. So we should see, once we have data, we'll iterate through each of them. So right now, we don't have any data and it's not going to work until we pass some data through it so we get something in here. So for now, your screen should be empty. And let's make sure we export. New single.
Like so. Return. Save. Okay. Basically we don't have any errors here. But if you go to local host 3000, you're going to get an error because right now, we're passing items through a map function but items is not defined. We don't have anything from items. We don't have any props called items right now. So if you go to your browser, you'll see something like this. And if you actually bring the def tools, so option command I for for chrome.
And then click on react. There's errors right now so you shouldn't see anything here. But if the application would actually run without having any items here, you would see that you don't have any props called items. And therefore, the map function is not working because items is undefined. So this is going to be fixed in the future video because we're going to start passing data to our application. Okay. So let's move on.
- Setting up the React project
- Fetching data
- Updating your state
- Using the axios library to make HTTP requests