Getting Started with React [single page application/ web development for beginners]

This video is about Getting Started with React and the use of React-Router-Dom to create the beginnings of a single page application.
Prerequisite downloads:
NodeJS: nodejs.org/en/download/
Yarn: classic.yarnpkg.com/en/docs/i...
Timestamps:
0:00 - Introduction: Single Page Applications
3:20 - Package Managers and Terminal File Navigation
4:39 - Scaffolding with create-react-app
6:40 - Yarn and Previewing React App to Browser
7:50 - Web Development: Fundamentals
9:11 - Launching into Visual Studio Code from the terminal
9:49 - File structure and React app code tour
10:30 - Simplifying the starting point of React App
12:03 - Setting up the Components Folder
12:35 - Coding the Main Component
15:25 - Coding the Header and Footer Component
18:08 - Exporting Multiple Components within React Fragments
19:15 - Intro to URL Routing
20:00 - Coding About and Home Component
23:25 - Installing react-router-dom + file tour
26:18 - react-router-dom: setting up application routing
29:35 - finalizing routing setup with BrowserRouter
30:40 - Testing Routing Implementation
31:00 - Implementing a default page redirect
31:55 - Setting up Clickable Page Linking
35:35 - Conclusion: Basic Single Page Application Tour
Take a look at for study:
React: reactjs.org/docs/create-a-new...
React Router Dom:www.npmjs.com/package/react-r...
Kit's Garden Single Page App:
gardenserver-d4079.web.app/home
Remi Gets a Smartphone Single Page App:
remiserver-7e67c.web.app/home

[@chidikevincent3061]

You can do a lot with so little. As short as this tutorial is, it did a whole lot for me. Thanks Kit.

[@jeffreychow3776]

Thanks great tutorial with very good explanation

[@e2xsq]

Great tutorial, you explained each step very clearly!

[@KitFuderich]

Thank you!

[@JohnMcLeodBrown]

You're a natural at teaching, thanks for the tutorial!

[@KitFuderich]

Thanks dude! Happy this video has been useful and hope you reach all your goals.

[@migzs2903]

Thanks it helped me a lot man!!

[@R4du21]

Brilliant tutorial! By far, helped me the most with creating and understanding a single page application with React. Thank you!

[@superraegun2649]

How did you get around "withRouter" being depreciated in later versions of react-router-dom? Is there something else I can use?

[@R4du21]

@@superraegun2649 Hey! Sorry for late response... From my perspective of view, just use v5 of react-router-dom. If you are a begginer in this area (like me) it's better to use an older version where you know the functions better rather than using a new version where hooks were eliminated or modified the structure.

[@patrickkhalifeh1257]

You need to get a raise my dude

[@naumanshigri]

thank you its helpful

[@dananjayachathuranga7113]

Finally found a useful tutorial

[@habeebmustapha633]

Great video Thanks a lot

[@integer6549]

Thank you for this

[@krzysztofzabolotny4802]

Downgrading react-router and react-router-dom to version 5.2.0. will help with the Switch and withRouter errors. Just run npm install react-router-dom@5.2.0 and npm install react-router@5.2.0.

[@daniezra]

Thanks a lot 👍

[@kingmicahtheinfamous4309]

GREAT VIDEO!!!!!! For those following this, in the newer version for 'React-Router-Dom' installation, You will have to change "Switch" into "Routes" at the MainComponent import function. import {Routes, Route, Redirect, withRouter} from 'react-router-dom'

[@KitFuderich]

Thank you and glad this video is still helpful for others. Appreciate the update on the router stuff!

[@abadan2014]

i still getting error message about withRouter component. any solution?

[@framirezm]

@@abadan2014 same problem.

[@MsElectronicKrazy]

Thank you

[@DavidKabs]

Great tutorial! Thanks a lot! It really helped me. One question tho, what theme did you use in vs code?

[@KitFuderich]

Thanks- I use Popping and Locking as my theme. This website may interest you if you want to find some cool color themes apart from what I used: vscodethemes.com/

[@williamdevonshire356]

Great vid thank you :) btw you can just use command C to copy, and then command V to paste (im pretty sure on Mac). Or maybe u were just using right click to copy and paste for tutorial clarity? Either way, figured i'd share just in case

[@KitFuderich]

Thanks and yes- this is true for Mac! Happy to hear you enjoyed the video.

[@joycemeow5857]

I wanna see all your cat art!!

[@wc4260]

for anyone confused as hell, use react router 5. 6 will not work following tutorial. just add @5 at the end of your install command so npm i react-router-dom@5

[@KitFuderich]

Yes - and if you want to go with router version @6 the main difference is is now called .

[@krzysztofzabolotny4802]

To refresh the page, not onlu the URL, wrap the in

[@alejandro93tauste]

For ones who use the version 6+ and get ISSUES WITH IMPORT SWITCH, i google the issue and found the problem is solved importing ROUTES instead switch and change the switch for Routes, i hope you will take the solutions with that.

[@KitFuderich]

Thanks- when I made this video I didn’t factor in package updates over time. Always good to check out documentation when something like this occurs. Appreciate your and other’s input so my video remains helpful.

[@superraegun2649]

Great tutorial, but later versions of react-router-dom has depreciated Switch and withRouter (anyone who's experienced with things like this will be familiar with this happening), is there anything I can do about it?

[@KitFuderich]

Hopefully you figured things out by now. Within web development things update all the time- whenever I am going to get back into React I typically review the documentation for what I am going to do as things change quickly. Here is the most recent documentation for React Router: reactrouter.com/docs/en/v6/getting-started/overview. Hopefully that helps but use wrapped around your and then use . That's how you do it in short.

[@saurabhhchavan]

We want full video

[@KitFuderich]

Cool maybe I’ll do one on styled components down the line.

[@m.fadhilsyahrian4703]

hello can you help with my error i have added my link react router dom and its working fine site url goes to my path but i have to reload browser to show other component

[@KitFuderich]

That’s a strange one and would need to see more of your code. With the new router 6 docs make sure you have an element tag and are passing the component you want to render into the route like this-

[@root1996]

It doesn't work in deployment ! Do you have any idea ?

[@KitFuderich]

I’m assuming you are running npm build and running your deployment off of the build folder. Depending on where you are deploying to you may need to prep your files for page routing. Here is a article for deploying to Netlify with tips on handling the routing: www.freecodecamp.org/news/how-to-deploy-react-router-based-app-to-netlify/amp/

[@user-gs8oe1zp7y]

Dude, slow down. I don't know what it is you're doing, I keep rewinding multiple times, but every single time I try to follow one of your steps I encounter a different error that leads me through a rabbit hole of debugging things that should have been done in an initial set up for first-timers. I've got strong foundations in html, css, and js and am trying to branch into React, but this video completely discouraged me every step of the way.

[@KitFuderich]

Sorry to hear the resource isn’t working for you. What kind of errors are you getting?

[@magnusherringelund6231]

There have been updates to react since this. I figured out how to overcome them, by using the chatbot on Bing. Creatively enough called "copilot", like everything else. It can access the web, which makes it very up to date. The framework has just been updated, in the past 3 years.

[@manideepadithya1120]

talk loud please

[@joazz111]

my solution for the page not reloading was to add the onClick thing like so Home {window.location.href="/about"}}>click for about