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:
github.com/QuentinWatt/React-...
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)
app.honeypot.io/ref/mDJbyi5GM2...
South Africa: (Cape Town, Johannesburg & Pretoria)
www.offerzen.com/z/V0ImHT
---
Subscribe:
/ quentinwatt
I also make videos here:
/ quentin
Donate with Paypal:
www.paypal.com/cgi-bin/webscr...

[@badripaudel77]

You explained things easily. Keep it up man 👍

[@QuentinWatt]

Thank you. I'm glad you liked it.

[@patricioarguello4324]

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 (






);
}
export default App;

[@santhoshm1847]

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

[@QuentinWatt]

Haha, no. I mean, you have learned quite a lot so far though. :)

[@QuentinWatt]

The next video is up :)

[@santhoshm1847]

Thank you 🤩

[@themajesticbeard1497]

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

[@QuentinWatt]

Any time!

[@nuej2021]

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'
import HelloWorld from '../components/HelloWorld';
function Home() {
const [showName, setShowName] = useState("Manuel")
return (
This is the Home Page
setShowName(showName)} />

)
}
export default Home;
Why it does not show my name on:
import React, { Component } from 'react'
function HelloWorld(props){
return(
Hello, {props.name}
);
}
export default HelloWorld;
Thanks!

[@QuentinWatt]

Yikes. That looks more like it creates some kind of infinite loop. Haha.
Just pass the variable into the prop like this:
const [name, setName] = useState("Manuel")
You can use another button, or input to change the variable.
e.g.

[@nuej2021]

Got it! So when is it proper to use arrow functions to pass values to attributes and when to use normal variables (props)? Thank you!