How to Create Tabs Using React











>> YOUR LINK HERE: ___ http://youtube.com/watch?v=DWCCkcJgvf0

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

#############################









Content Report
Youtor.org / Youtor.org Torrents YT video Downloader Β© 2024

created by www.mixer.tube