React must have basic setup

Installation

npx create-react-app appName

OR with typescript

npx create-react-app appName --template typescript

Absolute path

Absolute path help us to not care about the folder structure changes even in the middle of development or frequent folder structure changes as it can access files from the root or src folder

Create a file as jsconfig.json in the root of application and paste the code below:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Don't go with CSS

SCSS instead of inbuilt CSS

Just include the below line in the dependencies inside the package.json file

"node-sass": "npm:sass@^1.49.9"

Ignore the above if you are using any style system

Choose any UI library like bootstrap

Make page attractive even if its a assignment or learning based project
Paste it inside index.html

 <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />

---

optional

Router Config

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

Set the config of path

<BrowserRouter>
        <div className="container">
            <Nav />
            <Routes>
              <Route index path="/" element={<Landing />} />
              <Route path="about" element={<About />} />
              <Route path="profile" element={<Profile />} />
            </Routes>

        </div>
 </BrowserRouter>

Use them

 <NavLink to="/" className="nav-link"> Home </NavLink>