Completed
) Introduction (what are we building?), tech stack talk
Class Central Classrooms beta
YouTube playlists curated by Class Central.
Classroom Contents
React and APIs - Full Tutorial - Hacker News API Application
Automatically move to the next video in the Classroom when playback concludes
- 1 ) Introduction (what are we building?), tech stack talk
- 2 ) Using create-react-app as our base
- 3 ) Stripping out the files & content that we do not need
- 4 ) Refactoring to named exports
- 5 ) Modifying our .env file
- 6 ) Scaffolding our application
- 7 ) Looking at the Hacker News Api
- 8 ) Looking at all the news article Ids
- 9 ) Adding Axios using Yarn
- 10 ) Creating our hnApi.js service file
- 11 ) Adding the ability to get all story Ids from HN Api
- 12 ) Starting work on App.js
- 13 ) Adding useEffect to App.js to show all story Ids
- 14 ) Explaining how useEffect works
- 15 ) Creating our StoriesContainer.js container/component
- 16 ) Adding the ability to get stories from HN Api
- 17 ) Demonstrating the results that we receive from the HN Api
- 18 ) Creating our Story.js component file
- 19 ) Adding our Story component to the StoriesContainer component
- 20 ) Adding storyId as a prop to the Story.js component
- 21 ) Adding state to our Story.js component
- 22 ) Using useEffect to get a story in our Story.js component
- 23 ) Adding validation when getting stories
- 24 ) Dumping our stories onto the page
- 25 ) Building out the Story.js component with real data
- 26 ) Adding a selector for the story fields
- 27 ) Adding styled components
- 28 ) Building out our StoryStyles.js file using styled components
- 29 ) Adding a title to StoriesContainer.js
- 30 ) Adding a StoryWrapper to our Story.js component
- 31 ) More work on styling
- 32 ) Adding styling for StoryMeta
- 33 ) Adding styling for StoryMetaElements & styled component props
- 34 ) Adding our styled components to our Story.js component
- 35 ) Adding StoriesContainerStyles for more styling on the container
- 36 ) Looking at adding global styles (createGlobalStyle)
- 37 ) Adding our container styles to StoriesContainer.js
- 38 ) Brief look at the React profiler
- 39 ) Quick run through as to what we have built so far
- 40 ) Making our time display properly using mapTime.js
- 41 ) Adding InfiniteScroll to our application (custom hook)
- 42 ) Constants to be used by InfiniteScroll for per page items
- 43 ) Adding debounce functionality for scrolling
- 44 ) Adding a fixture folder with fixtures for tests
- 45 ) Testing! Lets test App.js
- 46 ) Adding react-testing-library to our application
- 47 ) Adding Jest coverage (good practise to do so)
- 48 ) Testing the StoriesContainer.js
- 49 ) Testing the Story.js component
- 50 ) Testing the HnApi.js file
- 51 ) Looking at our coverage and more testing!
- 52 ) Collecting coverage from the right places
- 53 ) Looking at React memo
- 54 ) Adding memo to Story.js to prevent additional Api calls
- 55 ) Overview of what we have achieved!
- 56 ) Running our application through Lighthouse!
- 57 ) Thanks for watching, I hope you learned a lot!
