React

const name = "ryan"
const jsx = <h1>Hello, {name}</h1>
{/*These are comments in JSX*/}

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

export default defineCOnfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true, // Open page when server starts
  }
})

import svgr from "vite-plugin-svgr"

export default defineConfig({
  plugins: [react(), svgr()],
})

// You have to add the ?react at the end
import svgIcon from "/path/to/svgfile.svg?react"

// Then you can use this svg like a component
<svgIcon />

import { VitePWA } from "vite-plugin-pwa"
import manifest from "./manifest"

export default defineConfig({
  plugins: [react(), VitePWA(manifest)],
})

const manifest = {
  manifest: {
    name: "",
    short_name: "",
    // etc
  }
}

export default manifest

function HelloReact(){
  const text = "some text"

  return <h2>Hello World! Here is {text}</h2>
  // If you want to return with multiple lines
  return (
    <h2>
      Hello Word! Here is {text}.
    </h2>
  )
}

export default HelloReact

// You can also set the className to style in css or put the css in the component itself
// CSS properties are in camel case
const styles = {
  card: {
    margin: 20,
    background: '#e8eaf6',
  },
  heading: {
    background: '#3f51b5',
    minHeight: 50, // pixels. Default unit is pixels
    fontSize: '1.2rem',
  },
};

function Card() {
  return (
    <div style={styles.card}>
      <div style={styles.heading}>Lorem ipsum dolor</div>
    </div>
  );
}

export default Card;

function Alert(props) {
  return (
    <div className={`alert alert-${props.type || 'success'}`} role="alert">
      {props.message}
    </div>
  );
}

// You can also destructure props in the argument
function Alert({type, message}) {
  return (
    <div className={`alert alert-${type || 'success'}`} role="alert">
      {message}
    </div>
  );
}

export default Alert;

import Alert from './components/Alert';

const message = 'Invalid user id or password';
const alertType = "danger"

function App() {
  return <Alert type={alertType} message={message} />;
}

export default App;

return (
  <Component>
    <div>This is embedded JSX</div>
  </Component>
)

// Inside Component
export default function Component(props){
  return (
    <div>
      {props.children} {/* This will render <div>This is embedded JSX</div> in this example*/}
    </div>
  )
}

  // Not recommended to use. JSX might put in the literal value of "false"
  {props.message &&
   <div>Some JSX</div>
  }

 // It is recommended to do
 {props.message ? <div>Some JSX</div> : null}

 // Usually conditional rendering is done with states
 {state ? (
    <div>True</div>
  ) : (
    <div>False</div>
  )}

import React from "react"
import { BrowserRouter as Router, Route, Routes, Link, Redirect } from "react-router-dom"
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import NotFound from './components/NotFound';

export default function Routes(){
  return (
    <Router>
      <Routes>
        <Route path="/" exact element={<Home />}/> {/*If the path is exactly /*/}
        <Route path="/about" element={<About />}/> {/*Any pathname that starts with /about */}
        <Route path="/contact" element={<Contact />}/>
        <Route path="/404" element={<NotFound />}/>
        <Route> {/* If no path is specified then it is the default filepath*/}
          <Redirect to="/404" />
        </Route>
      </Routes>
      <Link to="/">Home</Link>
      <Redirect from="/old-path" to="/new-path" />
    </Router>
  )
}

// Example path: /user/:id
import { useParams } from "react-router-dom"

export default User(){
  const { id } = useParams
  return <p>id</p>
}

// useParams can also handle multiple parameters
// Example path: /user/:username/:id
export default User(){
  const { username, id } = useParams
  return <p>id</p>
}

// Items is an array of objects being mapped over
return (
  <ul>
    {items.map(item => (
      <li key={item.uuid}>
        {item.value}
      </li>
    ))}
  </ul>
)

{items ? items.map((item) => (
  item ? (
    <Component />
  ) : null
)): null}

function Component(){
  function handleClick(name){
    alert(name)
  }

  return (
    <>
      <button onClick={handleClick}>Click Me</button>
      <button onClick={() => {console.log("clicked")}}>Click Me</button>
      <button onClick={handleClick("Ryan")}>Click Me</button> {/*This will invoke the function immediately. It will display the alert right away.*/}
      <button onClick={() => handleClick("Ryan")}>Click Me</button> {/* Instead do this to make the alert popup when the button is clicked. This is used for passing arguments into function in JSX*/}
    </>
  )
}

const [error, setError] = useState(false)

// This will not work
<div className="text--600"></div>

// This will work
<div className=""></div>

const width = "200px"

// This will not work
<div className="></div>

// This will work

import { useState } from 'react';
import './style.css';

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleInputChange = (event) => {
    const { name, value } = event.target;

    return name === 'firstName' ? setFirstName(value) : setLastName(value);
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();

    alert(`Hello ${firstName} ${lastName}`);
    setFirstName('');
    setLastName('');
  };

  return (
    <div className="container text-center">
      <h1>
        Hello {firstName} {lastName}
      </h1>
      <form className="form" onSubmit={handleFormSubmit}>
        <input
          value={firstName/*State variable*/}
          name="firstName"
          onChange={handleInputChange}
          type="text"
          placeholder="First Name"
        />
        <input
          value={lastName}
          name="lastName"
          onChange={handleInputChange}
          type="text"
          placeholder="Last Name"
        />
        <button type="submit">
          Submit
        </button>
      </form>
    </div>
  );
}

export default Form;

test: {
  globals: true, // VI keywords globally. DOn't need to import
  environment: "happy-dom",
  setupFiles: "./src/tests/setup.js"
}

import ReactDOM from "react-dom"

// Render a React component into a DOM element
ReactDOM.render(<App />, document.querySelector("#root")) // Puts app component in component with id "root"

// Remove component from DOM and cleans up its event handlers and state
  // What does this do and why is it needed?
ReactDOM.unmountComponentAtNode(container)

import { useEffect } from "react"

export default function Component(){
  useEffect(() => {
    const timer = setTimeout(() => {
      // Set timeout code
    }, 1000 /*1 second*/)
    return () => clearTimeout(timer)
  }, [])

  return <div></div>
}

// This component awaits for the return value from awaitFunc before loading
export default function Component(){
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    async function asyncFunc(){
      await awaitFunc()
      setLoading(false)
    }
    asyncFunc()
  }, [])

  if(loading) return null

  return (
    <div>
      Component
    </div>
  )
}