Let's Create Our First React App

1. What You will Learn

• How to install NodeJS and ReactJS on your computer
• How to properly organize your React app's codebase
• How to create React components to hold the UI for your frontend app
• How to create basic routes for your app's components
• How to apply styling to your React components
• About best practices for learning and developing React apps (and apps in general)
• ... and a few tips and notes here and there about developing web apps using the React library.

2. Install NodeJS and ReactJS

• NodeJS: This is the V8 engine that runs JavaScript and JavaScript-based programs and packages such as NodeJS, ExpressJS and ReactJS. See the official installation guide for instructions on how to install NodeJS on your computer
  
  
• ReactJS: This is the frontend library/framework that we commonly call "React". It contains features and tools to enable us build frontend apps using JavaScript, HTML and CSS. See the [React installation guide for how to properly install React on your system.

3. What we are Going to Build

• Contain a home page, an "about me" page and a "contact me" page.
  
  
• Use simple CSS styling to give some of the UI components of the app a better "look and feel", but nothing overly complex.
  
  
• Implement simple state management within the app's components.
  
  
• Do some routing for the components (so that our users can navigate through the "pages" of the app.)

4. Create the React App

• Using CRA: `Create-React-App` was the original/default way of starting a React app.
  
  When you run the `create-react-app` command from your command line, all the necessary packages and libraries are installed into the React app's root folder, and the sub-folders (`public/`, `src/`) and files (`package.json`, `README`, etc.) are generated.
  
  See the official CRA documentation for details on how to start a React app using the CRA command line tool.
  
  
• Using Vite: This is a more recent tool that you can use to start frontend apps for the VueJS, ReactJS, etc. frameworks.
  
  When you run the `vite` command, a React app's folder is created, the initial packages and libraries are installed and the initial folders of the React app are created. See the Vite documentation for how to start a React app using Vite.

npm install create-react-app

create-react-app personal

5. Create React App's Structure

• Components: These are the pieces of the app's UI. They are essentially the "pages" of the app.
  
  But a component doesn't have to mimic a full "page".
  
  It could be a simple unit of the page, such as a form, the footer or header of the app.
  
  We will create a few components as we work through this guide. So, hang in there even if just for a while.
  
  
• Styling: These can be the custom CSS stylesheets you created or CSS classes from a CSS framework.
  
  It also can be "raw" CSS you write inline (i.e. inside the HTML/JSX markup of your React components). We will be doing some bare-bones styling in this guide.
  
  
• API Calls: If your React app is even barely more than "child's play", it will be making CRUD requests over HTTP to a backend API server to get, update, delete and create new data for/from the app's components.
  
  There are a number of tools to help you make and manage these API calls, including the Fetch API and axios-http. We won't be covering either in this guide.
  
  
• Routes: This is how you determine and manage navigating between the components of the app. These can simple or complex. We will be doing some routing in this guide.
  
  
• State Management: This is how you manage the state (i.e data) of your app's components. React has built-in state management solutions and also supports third-party state managers.
  
  We will be covering simple local component state management in this guide.
  
  
• Testing: No serious app (whether backend or frontend) is complete without thorough automated tests. There are a number of testing libraries (and approaches) for writing automated tests for your React apps.
  
  We won't be covering testing in this guide.

6. Create the App Folders

cd personal/src/

mkdir components

7. Create the App Components

• PersonalHome: This will be the default "page"/UI that a user sees when he/she visits the root URL of your web app.
  
  
• AboutMe: This component will contain some biographical details about you.
  
  
• ContactMe: This component will contain a form that a user can fill in to send you a message.

So, let's start developing each of these components (inside the `src/components/` folder of your React app.)

7.1: Create the Home Component

touch PersonalHome.js

import React from 'react'

const PersonalHome = () => {
  return (
    <div>
        <h3> Welcome to My Personal Site Online</h3>
        <p>
            "The Personal" is the web app where I live online. 
            It is my virtual home away from my brick-and-mortar home.
        </p>
        <p>
            So, welcome! 
        </p>
    </div>
  )
}

export default PersonalHome

1. import our custom `PersonalHome` component into it.
   
   
2. Register the `PersonalHome` component inside `return()` statement of the root `App` component.

//  src/App.js
import './App.css';
//  Any additional imports go here too
//  Other imports removed for brevity

import PersonalHome from './component/PersonalHome';

function App() {
return(
  <PersonalHome />
)
}

export default App;

7.2: How Components are Rendered in React

1. Add it to the Root `App` Component: When you first start your React dev server (with `npm run start` or `yarn run dev`), you will see the contents of the root `App` component (which is in the `src/App.js` file) rendered in the browser.
   
   So, it follows that if you add anything (another component, HTML/JSX tag, text, etc.) into the `App.js` file, then it should be rendered as well when you visit the app in the browser. We will demonstrate this shortly.
   
   
2. Add it to Another Rendered Component: So, for example, if an app's `PostDetail` component is already rendered, then if we add a `CommentDetail` component inside the (already rendered) `PostDetail` component, then the `CommentDetail` component will also now be (automatically) rendered when you view the app in the browser.
   
   We will also use this approach in some of our `personal` app's components as we work through this guide.
   
   
3. Create a Route for the Component: If you configure routing for your React app, then any component that has a route created for it will also be rendered when the component's route/URL path is visited in the browser.
   
   We will do some basic routing in our `personal` app in this guide too.
   
   

Now, that we know how to create and render a component, let's touch on one other very important issue: "what goes into building a React component?"

7.3: What Goes into Creating a React Component

1. The Markup: At the end of the day, what gets rendered for your viewers is the HTML markup that make up your component.
   
   Those headers, divs, paragraphs, lists and links are all HTML tags/elements. Except in React, your HTML is smarter and is actually an extension of JavaScript. And, the markup is not simply HTML; it is JSX.
   
   
2. Styling: To give your component a better "look and feel" and make it appealing to your users, you have to use CSS to style the JSX tags/elements. This can be done using inline styling, JavaScript style objects or external stylesheets.
   
   See our Simple and Dynamic Styling in React guide for details of how to style your React components.
   
   
3. API Calls: If your component is anything more than a trivial blurb of static text, you will need to make API calls to a backend server to GET, POST, UPDATE and DELETE data used in your React components.
   
   Many tools/libraries exist to help you do this.
   
   See my Learn How to Use the `axios-http` Library in your React App to Make API Calls over HTTP to your Backend Server guide for details.
   
   
4. State Management: Each component will have some data attached to it.
   
   This could be the title and body of your `BlogPost` component or the form fields in your `Registration` component, the product price and description in your `ProductDetail` component, the name and profile picture in your `UserProfile` component, etc.
   
   These pieces of data in your components are what we call "state" in React lingo.
   
   If your component's state is simple, then you can use built-in hooks like `useState()`, `createContext()` and `useContext()` to manage it.
   
   If your React app's component state is more complex, then you can use a more complex state management solution like the Context API or the Redux Toolkit to manage that complex state across different components of your React app.
   
   In our example `personal` app's components in this guide, we will be using the `useState()` hook to manage a component's local state.
   
   
5. Event Handling: If you build your app to be used by users (duh, I know), then your users will be clicking around, dragging things, filling in form fields and a host of other interactions with your apps.
   
   All these actions trigger what we call "events" in the web development world.
   
   So, as a serious frontend developer, you need to be able to learn how to handle events in your React components.
   
   I wrote a great guide (if I say so myself), to be published in a few days, titled "The Frontend Developer's Guide (and Cheatsheet) to Web Events, Event Listeners and Event Handling in React" that you should check out if you want to be sufficiently-knowledgeable on how to handle events in your React components.

Depending on the nature, scope and complexity of your React app, you may need to do other things (perform calculations, track device orientation, draw on the UI, load sounds in the background, etc.) in your React components. But the above-mentioned 5 things are usually the most common aspects of developing a React component.

7.4: Create the 'About Me' Component

cd src/components
touch AboutMe.js

import React, {useState} from 'react'

const AboutMe = () => {
    const [firstName, setFirstName] = useState("Muhammad")
    const [jobTitle, setJobTitle] = useState("Frontend Developer")
    const [cityName, setCityName] = useState("New York")
    const [hobbies, setHobbies] = useState([
        "Coding", "Poetry", "Running", "Writing", "Traveling"
    ])
    const [website, setWebsite] = useState("https://Jalloh.com/")
    
  return (
    <div>
        <h3> About Me </h3>
        <p>
            My name is {firstName}. I am a {jobTitle} from {cityName}.
        </p>
        <p>
            I have a few hobbies including:
        </p>
        <ul>
            {hobbies.map(hobby => (
                <li> {hobby} </li>
            ))}
        </ul>
        <p>
            I am also a poet. You can read my elegies, eulogies and romantic verses on {website}.
        </p>
    </div>
  )
}

export default AboutMe

• Used the built-in React `useState()` hook to help initialize (and, later, if needed, set the new values of) the component's pieces of state.
  
  
• Initialized various types of state: A React component's state can be of any valid JavaScript data type. So, it can be a string, number, boolean, array or object. Try creating a `userInfo` state (with `firstName`, `lastName` and `yearOfBirth` keys and values) and try rendering that inside the `return()` statement of your component.
  
  
• Implemented conditional rendering: There a few ways to do conditional rendering in your React components.
  
  The `condition && (<> render this </>)` format is what we used here to conditionally render a paragraph only if there is a valid value for the component's `website` state.
  
  Make the "website" state empty (i.e. "") and see how that affects how your component renders.
  
  For other ways of implementing conditional rendering in your React components, please, see (soon-to-be-published) JSX: The Cheatsheet for the Frontend/React Developer guide.

7.5: Create the 'Contact Me' Component

import React, {useState} from 'react'

const ContactMe = () => {
    const [name, setName] = useState('')
    const [senderEmail, setSenderEmail] = useState('')
    const [messageTitle, setMessageTitle] = useState('')
    const [message, setMessage] = useState('')

  return (
    <div>
        <h2> Leave me a Message </h2>
        <form style={{ margin: '25px', padding: '30px'}}>
            <input 
                type="email" 
                value={senderEmail}
                onChange={(e) => setSenderEmail(e.target.value)} 
                style={{ width: '100px', marginBottom: '15px'}}
            />
            <input 
                type="text"
                value={messageTitle}
                onChange={(e) => setMessageTitle(e.target.value)}
                style={{ width: '100px', marginBottom: '15px'}}
            />
            <textarea 
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Enter your message here."
                style={{ width: '100px', marginBottom: '15px'}}
            />
            
            <button type="submit" style={{ margin: '10px auto'}}> Send Message </button>
            
        </form>
    </div>
  )
}

export default ContactMe

• used the built-in React `useState()` hook to initialize and set the value of the component's various pieces of state (`name`, `senderEmail`, etc.)
  
  
• used the `value` attrribute to tie a piece of the component's state (e.g. `senderEmail`) to input from an element on a form (such as the <input > element of type "email".)
  
  
• made use of the `onChange` event listener to listen/watch out for any user input in the form so that we can update/set the associated component state (such as setting the value of the component's `message` to what the user entered into form's `<textarea />` element.)
  
  
• used some basic inline styling to give our form and its sub-elements a better look and feel than would have been the default.

For a more detailed guide on the various ways of styling your React components, please, see my How to Implement Simple and Dynamic Styling in your React App guide.

• create a new function (within the component itself) where we will implement the logic for what to do with the form data (that's also now the new state of the component).
  
  We can call this function anything (sensible); we will go with `sendMessage()` to keep it simple and sensible. The `sendMessage()` function is what is called an "event handler" because it handles an event (in this the "submit" event on the form).
  
  
• add an `onSubmit` event listener to the `<form>` tag itself to "listen for" when a user hits the "submit" button on the form.
  
  
• pass the `sendMessage` event handler (without the braces `()` so that the function doesn't get executed immediately when the component renders) to the `onSubmit` event listener.
  
  This way, once a user hits the "submitt" button, the contents of the `sendMessage()` event handler will be executed.

import React, {useState} from 'react'

const ContactMe = () => {
    const [name, setName] = useState('')
    const [senderEmail, setSenderEmail] = useState('')
    const [messageTitle, setMessageTitle] = useState('')
    const [message, setMessage] = useState('')
    const [formError, setFormError] = useState('')

    function sendMessage(e){
        e.preventDefault() 
        //  So that the form doesn't get submitted to the current URL path, 
        //  which is the "default" behavior when a "submit" button on a form is clicked
        if(name && senderEmail && messageTitle && message){
            // Only process the form's input data if all the form fields were filled in correctly
            const contactMessage = {
                name: name,
                senderEmail: senderEmail,
                messageTitle: messageTitle,
                message: message
            }
            const messageJson = JSON.stringify(contactMessage)
            //  Now, you can decide what to do with the JSONified message: messageJson
            //  Usually, this would involve calling a backend API to send the message
            //  to yourself or a chosen team member. 
            //  But we don't have an external API to call to do that. 
            //  So, we will settle for just console logging it
            console.log(`${name} from ${senderEmail} sent you this message: ${message}`)
        }else {
            //  If the form wasn't correctly or fully filled in, render an error for the user.
            setFormError("Please, fully and correctly fill in all the form fields.")
            
        }
    }
  return (
    <div>
        <h2> Leave me a Message </h2>
        {formError && (
            <> {formError} </>
        )}
        <form onSubmit={sendMessage} style={{ marginTop: '25px', padding: '30px'}}>
            <input 
                type="email" 
                value={senderEmail}
                onChange={(e) => setSenderEmail(e.target.value)} 
                style={{ width: '100px', marginBottom: '15px'}}
            />
            <input 
                type="text"
                value={messageTitle}
                onChange={(e) => setMessageTitle(e.target.value)}
                style={{ width: '100px', marginBottom: '15px'}}
            />
            <textarea 
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Enter your message here."
                style={{ width: '100px', marginBottom: '15px'}}
            />
            
            <button type="submit" style={{ margin: '10px auto'}}> Send Message </button>
            
        </form>
    </div>
  )
}

export default ContactMe

• implemented the `sendMessage()` event listener (function's) logic.
  
  
• added a new piece of the component's state - `formError`- so that we can render an error message if some of the form's fields were not fully or correctly filled in.

import React, {useState, useEffect} from 'react'

const ContactMe = () => {
    const [name, setName] = useState('')
    const [senderEmail, setSenderEmail] = useState('')
    const [messageTitle, setMessageTitle] = useState('')
    const [message, setMessage] = useState('')
    const [formError, setFormError] = useState('')

    function sendMessage(e){
        e.preventDefault() 
        // So that the form doesn't get submitted to the current URL path, 
        //  which is the "default" behavior when a "submit" button on a form is clicked
        if(name && senderEmail && messageTitle && message){
            // Only process the form's input data if all the form fields were filled in correctly
            const contactMessage = {
                name: name,
                senderEmail: senderEmail,
                messageTitle: messageTitle,
                message: message
            }
            const messageJson = JSON.stringify(contactMessage)
            //  Now, you can decide what to do with the JSONified message: messageJson
            //  Usually, this would involve calling a backend API to send the message
            //  to yourself or a chosen team member. 
            // But we don't have an external API to call to do that. So, we will settle for just console logging it
            console.log(`${name} from ${senderEmail} sent you this message: ${message}`)
        }else {
            //  If the form wasn't correctly or fully filled in, render an error for the user.
            setFormError("Please, fully and correctly fill in all the form fields.")
            
        }
    }

    useEffect(() => {

    }, [formError])

  return (
    <div>
        <h2> Leave me a Message </h2>
        {formError && (
            <> {formError} </>
        )}
        <form onSubmit={sendMessage} style={{ marginTop: '25px', padding: '30px'}}>
            <input 
                type="email" 
                value={senderEmail}
                onChange={(e) => setSenderEmail(e.target.value)} 
                style={{ width: '100px', marginBottom: '15px'}}
            />
            <input 
                type="text"
                value={messageTitle}
                onChange={(e) => setMessageTitle(e.target.value)}
                style={{ width: '100px', marginBottom: '15px'}}
            />
            <textarea 
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Enter your message here."
                style={{ width: '100px', marginBottom: '15px'}}
            />
            
            <button type="submit" style={{ margin: '10px auto'}}> Send Message </button>
            
        </form>
    </div>
  )
}

export default ContactMe

8. Create the Routes for the App's Components

npm install react-router-dom

yarn add react-router-dom

import './App.css';
//  Any additional imports go here too
//  Other imports removed for brevity

// import the react-router-dom routing package
import {BrowserRouter, Routes, Route} from 'react-router-dom';
// import our app's custom components
import PersonalHome from './component/PersonalHome';
import AboutMe from './components/AboutMe';
import ContactMe from './components/ContactMe';

function App() {
return(
  
    <PersonalHome />

)
}

export default App;

• `/`: This is the root route of the app. It is the first thing you see when you load up the app in the browser. This route will render the `PersonalHome` component.
  
  
• `/about`: This will render the `AboutMe` component.
  
  
• `/contact-me`: This is where the `ContactMe` component will get rendered.

import './App.css';
//  Any additional imports go here too
//  Other imports removed for brevity

// import the react-router-dom routing package
import {BrowserRouter, Routes, Route} from 'react-router-dom';
// import our app's custom components
import PersonalHome from './component/PersonalHome';
import AboutMe from './components/AboutMe';
import ContactMe from './components/ContactMe';

function App() {
return(
  <>
    <PersonalHome />

    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<AboutMe />} />
        <Route path="contact-me" element={<ContactMe />} />
      </Routes>
    </BrowserRouter>
  </>
)
}

export default App;

import React from 'react'
//  import the {Link} component from the `react-router-dom' package
import { Link } from 'react-router-dom'

const PersonalHome = () => {
  return (
    <div>
        <h3> Welcome to My Personal Site Online</h3>
        <p>
            "The Personal" is the web app where I live online. 
            It is my virtual home away from my brick-and-mortar home.
        </p>
        <p>
            So, welcome! 
        </p>
        <p>
            By the way, you can learn more about me on my <Link to={`/about`}>About Me</Link> page.
        </p>
        <p>
            You can also <Link to={`contact-me`}> contact me </Link> by sending me a message.
        </p>
    </div>
  )
}

export default PersonalHome

• imported the `<Link />` component from the `react-router-dom` package that we installed earlier to use for routing
  
  
• used the `<Link />` component to link to other components (instead of using the usual HTML `<a href="">` tag and attribute.)

9. Styling React Components

• Inline: This is what we did in the `ContactMe` component using the `style` property of the HTML/JSX tags.
  
  
• External Stylesheet: This could be from a CSS framework (such as Bootstrap) or your own custom CSS stylesheets.
  
  
• JavaScript Styling Object: Where you write raw CSS inside a JavaScript object and use it inside your component's JSX markup.
  
  
• Styled Components: These are pre-styled React components that you can install and use in your app's components. Examples include `react-bootstrap`, `react-mdl`, etc.
  
  
• Dynamic Styling: Implemented using one of the first three styling options above.
  
  For a detailed coverage of how to style components in your React apps, see my How to Implement Simple and Dynamic Styling in your React App guide.

10. Best Practices

• Don't Mess with the Root `App` Component File: Your React app's root `App` component (in the `src/App.js` file) is not a place to write CSS styles, handle the complex logic for your app's global state, make API calls or to write the code and JSX markup for your "Home" component.
  
  Keep the `App` component clean, simple and bug-free. Only use it to:
  
  
  • import app-wide modules, stylesheets and libraries
    
    
  • implement app-wide routing for your components
    
    
  • wrap your app's components in the global context (provider) object
    
    
  • and so on ...
    
    But don't put calculations, JSX markup and UI styles in there. That's stuff that should got into your component or CSS files. Only use it for app-wide code and setup that can't be put into any other component or file.
    
    
• Keep it Simple and Progressive: When you first start out learning how to develop frontend apps using the ReactJS framework, you will start to hear (from forums, groups, newsletters, blog posts and everywhere else) about new "cool" things that just made another tool "obsolete" or a new way of doing things or <somethingElse/ >.
  
  Don't fall for the "shiny object syndrome". Learn the basics, apply simple tools and then progressively learn more complex stuff and use more specialized tools and libraries to achieve better results. But don't take on so much so early in your learning journey.
  
  Don't put lipstick on a pig.
  
  Learning the newest version of that state management library will do you more harm than good if you haven't even learned about the variety of ways (and hooks and API) that React provides for managing both simple and complex state in your React app.
  
  Then, learn how to properly use `useEffect()`, `useRef()` and other built-in React hooks before you go "shopping" for or "comparing" packages/libraries/frameworks to help you manage your app's "side effects."
  
  The same thing goes for styling: Learn to use inline styles, then JavaScript Object styling, then external stylesheets before you resort to installing and using a "styled components" framework.
  
  The same applies to making API calls: Learn to use the global `Fetch API` before you learn `axios` or other (more complex) tools.
  
  And, so on. Keep your React learning journey simple and progressive and productive. Don't be that guy that knows a thing about everything but can't implement anything with any tool even if his life depends on it.
  
  
• Learn from the Official Docs: There are two ways you can learn any open source tool (package, library, framework, etc.): through _third-party tutorials (on Youtube, blog posts, workshops, etc.) or using the official documentation.
  
  I can bet you that you will be better off first learning from the official docs (and any "get started" guides) that the creators of the framework/library/package have put together than you will from a favorite Youtuber or blogger. Many times, those tutorials are littered with the developer's tool bias, "shortcuts", "bad practices", "experience deficiency" and personal preference. (There are exceptions, I know. But the exceptions don't count in the general scheme of things).
  
  So, avoid adopting another user's opinions, mistakes and worst practices and go for the official docs first. You will learn about the various APIs and tools available and any design decisions that went into developing various aspects of the framework.
  
  These pieces of insights will help you better learn and use the framework. You will also know if (and when) you need to switch parts of the framework/library without breaking it.
  
  So, learn from the official docs of whatever framework or library or package you are learning to use (and there will be dozens of them along the way).
  
  Later on, you can supplement that knowledge with your own experience using it and the opinions and insights from other developers, Dev Youtubers, bloggers and members of your developer community.
  
  
• Develop More Apps More Often: What's better than watching every Youtube video or reading any blog post or reading all the official docs related to React (or whatever other library, package or framework you are using)? Developing more apps, that is!
  
  The marker of how much you know and master a technology is not how much time you have spent learning it. It is about how much time and effort you put into perfecting those skills by creating as many apps as possible that implement the features and API of that technology (library, framework or package).
  
  You should develop at least three apps for each skill (styling, state management, API calls, testing, etc.) that you want to master. Why at least 3 apps?
  
  That is because:
  
  
  1. The first time you create an app around that skill, you will be referring to the official docs, other tutorials you have come across and your own personal notes.
     
     You will also be googling the errors you get and will endup on StackOverflow and other developer blogs more often than you can imagine. So, your first app (to master that skill) is a rough ride, to say the least.
     
     
  2. The second app you create around that skill, you will encounter less bugs, fix more errors on your own (because you encountered and fixed them the first time around) and will be looking at the code from your first app.
     
     You will also be referring to your "bug database" (that is, the notes you keep to document the errors and bugs you encountered during the first app's development and the solutions you used to fix those bugs and errors, including links to StackOverflow threads and forum discussions that were useful to you.)
     
     But, by and large, you will be building the app with more experience, confidence and awareness of what will be popping up at you (in terms of gotchas, bugs, errors and warnings).
     
     
  3. The third app you build to master that skill, you will trigger much fewer bugs, fix most of the errors on your own and avoid more technical "gotchas" (silent bugs) and spend less time consulting your personal notes and "bug database".
     
     At this point, you can talk about that library or framework and code apps using it almost without any technical reference (barring a few edge cases.)
     
     

  So, yeah, build at least three apps around a skill (state management, styling, routing, API calls, testing, etc.) if want to really come close to mastering a skill. The more complex a skill (or its related library/framework) is, the more apps you should build around it.

   
  And, when building an app, focus most of your energy on perfecting that skill and less of it on other skills. For example, if you are creating an app to master state management in React using the Redux Toolkit, focus less on styling your components and creating complex routes and more on implementing the state management structure and logic of your app. Anything else should be secondary even if they are necessary.
  
  
  Then, push your code to a repo you create for that app on your Github account. Then, link to that in your resumé (if you are looking for a job or consulting gig or just want to up your personal developer brand among your peers).

11. Technical Reference

• Free "React Developer" Email Course
  
  
• How to Learn and Master ReactJS App Development Systematically
  
  
• How to Properly Structure your React App
  
  
• How to Implement Simple and Dynamic Styling in your React Component
  
  
• "The Frontend Developer's Guide (and Cheatsheet) to Web Events, Event Listeners and Event Handling in React"
  
  
• React.dev Official Docs/Tutorial
  
  
• react-router-dom