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:

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:

Kit's Garden Single Page App:

Remi Gets a Smartphone Single Page App:

[chidikevincent]

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

[JohnMcLeodBrown]

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

[YaswanthramReddy]

Thanks bro, This small application helped a lot . Keep doing !

[kingmicahtheinfamous]

GREAT

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'

[FIRE_EVERYTHING]

Great tutorial, you explained each step very clearly!

[krzysztofzabolotny]

Downgrading react-router and react-router-dom to version 5.2.0. will help with the Switch and withRouter errors.

[Rdu]

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

[jeffreychow]

Thanks great tutorial with very good explanation

[williamdevonshire]

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

[DavidKabs]

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

[alejandrotauste]

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.

[superraegun]

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?

[m.fadhilsyahrian]

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

[krzysztofzabolotny]

To refresh the page, not onlu the URL, wrap the <Switch> in <BrowserRouter>

<BrowserRouter>
<Switch>
<Route path='/home' component={Home}/>
<Route path='/about' component={About}/>
<Redirect to='/home'/>
</Switch>
</BrowserRouter>

[root]

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

[gsoezpy]

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.

[joazz]

my solution for the page not reloading was to add the onClick thing like so
<React.Fragment>
<div>Home</div>
<Link to='/about'onClick={() => for about</Link>
</React.Fragment>