How to Create Tabs Using React
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
http://nextjs.org/docs/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
http://nextjs.org/docs/api-reference/...
29:45 Using the URL to send someone to a specific tab
Next.js documentation for getInitial Props - http://nextjs.org/docs/api-reference/...
🔗 LINKS
App from Scratch Course
Next.js - http://nextjs.org
Hyper - https://hyper.is/
Oh my Zsh, Robby Russell
Hyper Material Theme
VS Code - https://code.visualstudio.com/
Cobalt 2 Theme: https://vscodethemes.com/e/wesbos.the...
ES Lint VS Code Extension - https://marketplace.visualstudio.com/...
ES7 React/Redux/GraphQL/React-Native Snippets - https://marketplace.visualstudio.com/...
Prettier Extension - https://marketplace.visualstudio.com/...
React Dev Tools for Chrome - https://chrome.google.com/webstore/de...
React Dev Tools for FireFox - https://addons.mozilla.org/en-US/fire...
Rainbow Brackets, VS Code Extension - https://marketplace.visualstudio.com/...
Slugify Gist - https://gist.github.com/codeguy/6684588
🤖 CODE
Code on GitHub - https://github.com/selfteachme/0025-r...
👉🏻 Get Updates and Exclusive content at http://selfteach.me
💥 SelfTeach.me is a Zeal show: http://codingzeal.com
On this page of the site you can watch the video online How to Create Tabs Using React with a duration of hours minute second in good quality, which was uploaded by the user Self Teach Me 03 September 2020, share the link with friends and acquaintances, this video has already been watched 20,024 times on youtube and it was liked by 456 viewers. Enjoy your viewing!
