React News Website Component
I created a News Website for a recent project of mine, and I’m sharing some of the tips and tricks you will need to be successful!
For this project I created a News website that helps people understand world politics better, to understand more about what’s going on in the world, and making sure that it allows people to keep up to date.
If you are wondering how to create an app like mine this is how you do it.
First I downloaded and created my react app through create react app from online resources. And then in my terminal, I typed in npm create react app into my folder under phase. After that, I typed out into my terminal npm install. So that way I have all of the nodes and modules that are associated with my app.
It should look something like this.
For this blog only I’m not going to go into detail about everything single component that I created so for this purpose only I’m going to teach you how to create a page single page application that has to deal with news articles, an API, and a search bar.
For my application, I wanted to create an entire component that the user can search up different news articles around the world. And so with that said I use the media stack API to help me with creating this component and its fellow child components along with it.
And again for reason for this reason only I’m not going to go into too much detail with my overall app I am going to go into detail with the article section of my navbar.
To start off I created my App.js, my Newsarticles.js, my NewsCard.js, my SearchBar.js, my Header.js, and finally, I used the used state react component. I also used the react bootstraps component to make it look professional and I used the other apps associated with that as well.
It should look something like this.
To begin creating my news article app I first in my app components imported react and then I went ahead and created a function called at an inside that function I created a return and inside that return I created a div with opening and closing tabs and then I created in my articles.
If you want to do something a little different by all means go ahead but this is what I did.
While still within the app component I made a useState component and then in my function I made two parameters one is articles and one is set articles. And I made them both equal to a useState. Then inside one of the useState parentheses, I made it equal to an empty array.
In my search bar, I created an unchanged event handler and so it should when you put input into the search bar it should help you search 4 what you need to look for in regards to the articles you are seeking.
It should look like something like this.
In another component, you are going to create a news article news card component for your API that you decided to use.
Repeat the same steps as for both the App.js and the NewsCard.js.
For this one though, in order to iterate through the array from the API that you are using, for this project I made sure to use a .map() to iterate through the object in the array.
Put it all into the news article parent function and the final product should look something like this.
And that is how you create news article components 4 your website.
