Back to videos & streams

Building a React Tabbed Component from Scratch

Play Icon

about the video

In this video, we'll build a React tabbed component from scratch.

This video is part of a larger series where we build a React component from scratch and then write the tests to support it.
+ Building the Actual React Tabbed Component -
+ Intro to Testing - COMING SOON!
+ Setting up our Testing Environment - COMING SOON!
+ Testing our utility function - COMING SOON!
+ Testing our React Component - COMING SOON!
+ Looking at Code Coverage - COMING SOON!

0:00 Intro / Beginning
1:00 Project Setup
1:07 Next.js - Yarn Setup
   - Getting Started
   - yarn create next-app
1:38 Commands to run Next.js
   - yarn dev
   - Launch project within the browser at http://localhost:3000
2:12 Setting up the home page: pages/index.js
3:04 Setting up the styles: styles/Home.module.css
3:44 Creating a component directory: components/Tabs
4:31 Stubbing out the component within components/Tabs/Tabs.js
5:13 Trick for structuring component files
6:37 Created Tabs.module.css for all our styles
6:57 Building the actual tabs with an unordered list
7:21 Creating a content area
7:32 Importing our CSS file into our component
7:44 Styling the actual tabs
8:52 Styling the current tab
10:34 Styling the content area
10:54 Adding more content
11:37 Making our content dynamic
14:53 Making the tab names dynamic
16:54 Using a Hook to specify the active tab
19:45 Only showing the active tab's content
20:20 Navigating between our tabs
22:22 Refactoring our code
23:17 Updating the URL based on what tab you're on
24:10 Creating a "slugify" function that will convert any string into a slug that can be used within the URL
25:36 Implementing the Slugify function
26:25 Reviewing Next.js's documentation on Routers
29:45 Using the URL to send someone to a specific tab
   - Next.js documentation for getInitial Props

+ App from Scratch Course
+ Next.js
+ Hyper
   - Oh my Zsh, Robby Russell
   - Hyper Material Theme
+ VS Code
   - Cobalt 2 Theme
+ ES Lint VS Code Extension
+ ES7 React/Redux/GraphQL/React-Native Snippets
+ Prettier Extension
+ React Dev Tools for Chrome
+ React Dev Tools for FireFox
+ Rainbow Brackets, VS Code Extension
+ Slugify Gist

+ Code on GitHub

👉🏻 Get Updates and Exclusive content at
💥 is a Zeal show