npm create vite@latest"type": "module" -> makes imports possible"scripts"
"dependencies""devDependencies"
"@types/react" -> type script definitions for IDE"@types/react-dom" -> type script definitions for react-domexport default Appnpm run dev
src Layout:
Fragment: <> … </>
const MainLayout = ({children}) => {const MainLayout = (props) => {abc.css -> will be included in the head of the html page (content included within script tag on the page)import styles from '../styles/AboutUs.module.css'npm install react-router-domimport { ... } from "react-router-dom"```
<RouterProvider router={router} /> in main.jsx<Route path="/" element={<MainLayout/>}><Outlet/>import { useState } from 'react'const [active, setActive] = useState(false);'react/prop-types': [disabled], in .eslintrc.cjsnpm run build
import { useEffect } from "react"AbortController#abort() -> for cancelling effects etc., used e.g. in effect cleanup
function handleChange(e:any) {
setPostData({ ...postData, [e.target.name]: e.target.value})
}
useRef usually has better performance compared to custom handlertext?: string|padding: [number, number?, number?, number?]action: () => voidchildren: React.ReactNodechildren: React.ReactElementlocalStorage.setItem("userState", JSON.stringify(...)localStorage.removeItem("userState")return <Navigate to="/"/>import { useNavigate } from "react-router-dom"const navigate = useNavigate()navigate("/")createContext()export const UserLoggedInContext = createContext<[boolean, Dispatch<SetStateAction<boolean>>] | null>(null) => how to avoid null? (see MainLayout.tsx )