React JS for beginners: Tutorial 8 - React Router

In this video we'll use React Router to create pages for our web app.

#LearnReact #ReactTutorial #ReactForBeginners

Download the code:

Follow me on social media:
Twitter: @QuentinWatt
Facebook: @quentinwatt
Instagram: @quentinwatt

Looking for a job? Try one of these referral links.
-----
Europe: (London, Germany, The Netherlands, Barcelona & more)

South Africa: (Cape Town, Johannesburg & Pretoria)
---

Subscribe:

I also make videos here:

Donate with Paypal:

[badripaudel]

You explained things easily. Keep it up man 👍

[themajesticbeard]

You've saved me from the dreaded Google spiral. Thanks Quentin!

[santhoshm]

loving it!....curious about what product/project we are going to build at the end of complete react tutorial...I'm damn sure that it's not a simple TODO app... hahaha :P

[patricioarguello]

Hola Quentin !!! Gracias por los tutoriales. Consegui adaptar el archivo App.js, con la version "react-router-dom": "^6.9.0", comparto el archivo :

import React from 'react';
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom"

import Header from './Components/Header'
import Footer from './Components/Footer'

import Home from './Views/Home'
import About from './Views/About'
import Product from './Views/Product'

function App() {
return (
<div className="relative pb-10 min-h-screen">
<BrowserRouter>
<Header />
<div className="p-3">
<Routes>
<Route exact path="/"
element={<Home />} />
<Route path="/about"
element={<About/>} />
<Route path="/products/:id"
element={<Product />} />
</Routes>
</div>
<Footer />
</BrowserRouter>
</div>
);
}
export default App;

[nuej]

Hi, Quentin! Another beginner question. I changed the Home Component a little bit, trying to understand the use of useState:



import React,  {useState} from 'react'



 function Home() {
    const [showName,  setShowName] = useState("Manuel")
    return (
        <div>


            
        </div>
    )
}


export default Home;



Why it does not show my name on:


import React,  { Component } from 'react'


function HelloWorld(props){
    return(
    <h1>Hello,  {props.name}</h1>
    );
}




export default HelloWorld;




Thanks!