React Tutorial using Vite (FASTEST NEWEST development tool) to build a CRUD App 2023 - Pt 1
#React #Redux CRUD App using Vite (not create-react-app), newest and fastest #front-end #web #development tool in 2023. In Part 1 of this series, we install Vite using ‘create vite@latest’ and view the app on the local server using ‘npm run dev’ and you will learn how to access the list of commands to navigate in the terminal of Visual Studio Code when using Vite. We also install react-router-dom@latest, and import BrowerRouter as Router, Routes, Route, NavLinks, and Links. Part 2 will cover styling using CSS, Sass, and Flexbox.
If you are beginning your journey in React, Redux, and Vite, this is a great tutorial to begin with. This is the very best time to start watching because I just uploaded Part 1.
What I cover:
0:00 - Intro
0:10 - CRUD App functionality
1:12 - Review imports & extensions
1:35 - Node.js and NPM installations resource
1:58 - Introduction to Vite front-end development tool
2:16 - Why Vite? The problem Vite solves
3:10 - Vite installation on the cmd line
4:05 - Open VSC from the cmd line
4:19 - start local server 'npm run dev'
5:17 - Review Vite list of commands
6:00 - Scrub Vite installation
8:47 - Install es7+ React/Redux extension
10:07 - Install & import react-router-dom
11:01 - Setup & define routes
12:08 - Route path & element
12:33 - Parent & Nested Routes
13:11 - Link & NavLink explanation
14:50 - Testing App on the local server
14:56 - Nested routes
15:23 - Announce React Redux CRUD App - Part 2
15:36 - Outro
15:49- Thank you!
15:56 - Acknowledgements
Shortcut keys: j - go back; k - pause; l - move forward
******************
Share this video: • React Tutorial using Vite (FASTEST NE...
******************
Welcome Source Coders!
Source Coder Hub is a resource and knowledge base that includes tutorials, insights, and tips. It’s a hub where coders can come together and collaborate. If you are interested in learning modern front-end coding technologies such HTML, CSS, SASS, ReactJS, Algorithms, Recursive, Interviewing Tips, and more please visit frequently for links to tutorials as well as other resources that you will find useful in your coding journey.
January 2023 kicks off the start of a series of beginner YouTube tutorials that follow my process for creating a Front-End React Redux project.
Check out all my YouTube videos:
GitHub series:
GitHub for Beginners Account + Repository + Codespaces - GitHub Tutorial 2023 - Pt 1 ( • GitHub for Beginners and Git Commands... )
GitHub for Beginners and Git Commands: Add, Commit, Push, and Removing - GitHub Tutorial 2023 - Pt 2 ( • GitHub for Beginners and Git Commands... ) Quick Tip:
Quick Tip series:
*Use Blur Feature in YouTube Studio to Blur Text or Hide Personal Info - Quick Tip (hidden gem found) ( • Use Blur Feature in YouTube Studio to... )
There's much more coming, so please subscribe to my channel AND newsletter "The Hub" (https://forms.gle/o1R1QzH8mk3xL4eNA) so that you can stay on track!
Cheers!
Source Coder Hub
_________________________
Connect to the "The Hub"
Newsletter: https://forms.gle/o1R1QzH8mk3xL4eNA
_________________________
Connect with me on social media:
YouTube: / @sourcecoderhub
Twitter: / sourcecoderhub
Instagram: / sourcecoderhub