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
🔗 LINKS
+ 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
+ Code on GitHub
👉🏻 Get Updates and Exclusive content at Selfteach.me
💥 SelfTeach.me is a Zeal show