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/next/router
29:45 Using the URL to send someone to a specific tab
- Next.js documentation for getInitial Props - http://nextjs.org/docs/api-reference/data-fetching/getInitialProps


? 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.theme-cobalt2
+ ES Lint VS Code Extension - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
+ ES7 React/Redux/GraphQL/React-Native Snippets - https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
+ Prettier Extension - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
+ React Dev Tools for Chrome - https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
+ React Dev Tools for FireFox - https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
+ Rainbow Brackets, VS Code Extension - https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets
+ Slugify Gist - https://gist.github.com/codeguy/6684588


? CODE
+ Code on GitHub - https://github.com/selfteachme/0025-react-tabbed-component


?? Get Updates and Exclusive content at http://selfteach.me
? SelfTeach.me is a Zeal show: http://codingzeal.com