Setup

npm create vite@latest <project-name>
// go through the prompts
cd <project-name>
npm install 

npm install sass

// time to install eslint!
npm install vite-plugin-eslint --save-dev
npm install eslint --save-dev
npm install eslint-config-react-app --save-dev
touch .eslintrc
// put this in the .eslintrc file 
{
  "extends": [
    "react-app"
  ]
}

File structure: https://blog.webdevsimplified.com/2022-07/react-folder-structure/

React hook forms

Useful additional guide: https://www.copycat.dev/blog/react-hook-form/

Images (and other media content)

import starDec from "../assets/icons/sparkler.png";

Routers

Setup

// to install 
npm i react-router-dom

// Will need to change to hash router when you're using something like git pages
// routeSwitch.jsx(tsx)
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Profile from "./Profile" // example of a different route

const RouteSwitch = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
};

export default RouteSwitch;

//index.js(ts) will need to look like something similiar to:
import React from "react";
import ReactDOM from "react-dom/client";
import RouteSwitch from "./RouteSwitch";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouteSwitch />
  </React.StrictMode>
);

// to use a link on a page
import { Link } from "react-router-dom";

<li>
              <Link to="/">🌿 Home</Link>
            </li>
            <li>
              <Link to="/pictures-all">🌿 Pics</Link>
            </li>