React and APIs - Full Tutorial - Hacker News API Application

Learn how to use APIs with React in this intermediate tutorial. We're going to be creating a small application in React that calls the Hacker News API. We'll be looking at React memo, Axios (to make API calls), styled components, and finally we will test our work using React Testing Library.

Once we have done all this we will run our application through Lighthouse (a browser extension) that allows us to test for accessibility, performance and so much more. We will be making 500+ automated API calls in this application, and I want to show you how to use memo with React so that we can avoid making multiple network calls if we already have the data.

🐦 Karl on Twitter: @karlhadwen

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction (what are we building?), tech stack talk
⌨️ (0:01:50) Using create-react-app as our base
⌨️ (0:03:30) Stripping out the files & content that we do not need
⌨️ (0:05:00) Refactoring to named exports
⌨️ (0:08:35) Modifying our .env file
⌨️ (0:09:15) Scaffolding our application
⌨️ (0:10:15) Looking at the Hacker News Api
⌨️ (0:11:50) Looking at all the news article Ids
⌨️ (0:12:58) Adding Axios using Yarn
⌨️ (0:15:07) Adding the ability to get all story Ids from HN Api
⌨️ (0:30:00) Explaining how useEffect works
⌨️ (0:37:50) Adding the ability to get stories from HN Api
⌨️ (0:39:50) Demonstrating the results that we receive from the HN Api
⌨️ (0:43:15) Adding our Story component to the StoriesContainer component
⌨️ (0:47:40) Adding validation when getting stories
⌨️ (0:49:00) Dumping our stories onto the page
⌨️ (0:53:20) Adding a selector for the story fields
⌨️ (0:56:00) Adding styled components
⌨️ (1:01:50) More work on styling
⌨️ (1:02:30) Adding styling for StoryMeta
⌨️ (1:03:55) Adding styling for StoryMetaElements & styled component props
⌨️ (1:11:30) Adding StoriesContainerStyles for more styling on the container
⌨️ (1:12:05) Looking at adding global styles (createGlobalStyle)
⌨️ (1:14:55) Brief look at the React profiler
⌨️ (1:16:00) Quick run through as to what we have built so far
⌨️ (1:22:00) Adding InfiniteScroll to our application (custom hook)
⌨️ (1:22:40) Constants to be used by InfiniteScroll for per page items
⌨️ (1:39:05) Adding debounce functionality for scrolling
⌨️ (1:42:00) Adding a fixture folder with fixtures for tests
⌨️ (1:48:00) Adding react-testing-library to our application
⌨️ (1:59:00) Adding Jest coverage (good practise to do so)
⌨️ (2:22:18) Looking at our coverage and more testing!
⌨️ (2:22:53) Collecting coverage from the right places
⌨️ (2:25:43) Looking at React memo
⌨️ (2:29:18) Overview of what we have achieved!
⌨️ (2:30:29) Running our application through Lighthouse!
⌨️ (2:33:00) Thanks for watching, I hope you learned a lot!

--

[freecodecamp]

How do you think someone could improve Hacker News with the Hacker News API?

[montesajudy]

Yeaaah a beginner friendly react tutorial! ❤️

[loading]

I'm very thankful that this YouTube channel provides a lot of varied courses, I'm new to programming and can't wait to see what I can do with my knowledge! :)

[bafana_mhlamvu]

Just finished Javascript fundamentals (as in how things work under the hood, e.g the 'this' keyword)...learning currently so this is going to help out a lot!

[acaken]

May I ask, why do you use > infront of the span? is there any diff with and without ">" in your styled component?

[chadreyn]

CRA removed serviceWorker.js with CRA 4.x, is this tutorial still usable without it?

[nayri_b]

Hi how can I get all the stories in the api?

[ariescyrusdeeasio]

HOw can you limit display and adding a LOAD MORE function button? Big HElp :)

[joe_ys]

Great tut - Would you be interested in making a wordpress / React app - the APIs for that look super interesting.

[lplp]

Could you please have another basic video for how work with API with python?

[scarmusic]

Can this api method, be used to any kind of API ? or is it "bound" to hackernews :) - hope it makes sense what I am asking.

[NoumanKhan-ckvx]

I think it's so complicated cos I'm new to programing 😀

[mugheesarshad]

Kindly make a tutorial on WordPress complete, thanks in advance :)

[gilbertngeywo]

Hey @freeCodeCamp.. Can you do some devops tutorials?

[abdulrahmanfaisal]

How I can make a call flooder for scamming scammer

[SagarYadavIndia]

Not a good tutorial at all. Leaves explanations of most of the things, and is outdated as well. If someone is an expert, they wouldn't need this tut, but if they are not, this tut is not for you. Poor. Here are some of the lines from the tut = "I am taking this from the template, you don't need to do this, I don't want to get into detail of this", "I am going to delete that, delete that (figure out by watching carefully what is that)", "I am calling it containers but it's not actually a container, it's just a component, I am calling it .. (what!? why? thank you for intentionally confusing people!)".