React

基础知识点 Part1

• Destructuring Function Parameters: function use destructuring to capture specific properties as <named parameters>

• The Virtual DOM: it makes webpages easier to manage, detects every node, and only refreshes the updated nodes.

• JSX

  1. Use className
  2. Self-Closing Tags: <img />, <input />
  3. Wrap your code in curly braces to treat it like ordinary JavaScript
  4. Event Listeners: on + event type (e.g., onClick)
  5. Conditionals: if works outside JSX; inside use ternary operator x ? y : z
  6. map ()
  7. <li> needs a key attribute like <li key="003">
  8. JSX needs an outermost element like <div></div>

• React Component

  1. react, reactDOM
  2. Function components use PascalCase
  3. Render component using createRoot & render from react-dom

Project: Click an Animal for a Fun Fact

1. Add a title using createRoot and ternary operator
2. Add background using a background variable
3. Add an array of images using for..in loop and push
4. Add fun facts: use array [index] and add event listener, use innerHTML to modify content

Authorization Form

1. Setup using ternary operator
2. Login form using <form> with two inputs
3. Show contact info with ternary operator
4. Toggle between views
5. Handle submit using event listeners

代码模版

import { createRoot } from 'react-dom/client'
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<Component />)

// COMPONENT
import React from 'react'
import ReactDOM from 'react-dom/client'

function MyComponent() {
  return <h1>Hello world</h1>
}

ReactDOM.createRoot(document.getElementById('app')).render(<MyComponent />)

基础知识点 Part2

• Components Interacting

  1. Props are info passed between components
  2. Props are an object holding component info
  3. Props are immutable
  4. Attach functions to elements as event handlers
  5. Naming: handleEvent, onEvent (e.g., handleClick, onClick)

• Hooks

  1. useState with spread syntax: {...oldObj, newKey: newValue}
  2. useEffect for dynamic change
  3. Call Hooks only at top level
  4. Only call Hooks from React functions
  5. Separate Hooks for separate effects
  6. useState with arrays/objects
  7. Event Object Properties: type, target, currentTarget, etc.
  8. Event Object Methods: preventDefault, stopPropagation, etc.

• React Programming Patterns

  1. Split into container (stateful) and presentational (stateless) components
  2. Presentational = UI only
  3. Container = data fetching, logic, state

• Intermediate Patterns

  1. Inline styles like <h1 style={{ color: 'red' }}>Hello</h1>
  2. Store style in a variable and inject via style={styles}

• Routing

  1. createBrowserRouter () makes the map
  2. <RouterProvider router={router}>
  3. <Route path="/"element={<Home />} />
  4. Route links path with component
  5. Link & NavLink are for navigation
  6. Dynamic Routes: :title like <Route path='/articles/:title' />
  7. useParams gets route param
  8. Nested Routes don’t include parent path
  9. Navigate redirects when rendered
  10. useNavigate navigates imperatively
  11. Query Parameters: ?order=DESC

Project: CodeyOverflow Forum

1. Divide into parts
2. Add props to each part
3. Assemble components
4. Render it

Project: Passing Thoughts

1. useState with array
2. Add thought: handleText, onChange, handleSubmit, onSubmit
3. Delete thought: removeThought, filter, bind to component
4. Auto-delete: useEffect, setTimeout, bind deletion

Project: Adopt a Pet!

1. Install react-router-dom
2. Create route
3. Use nested/index routes
4. Use URL params in components
5. Replace <a> with <Link>
6. Add search
7. Add 404 for pet details

代码模版

const [currentState, setCurrentState] = useState ();

//input form
export function AddThoughtForm (props) {
  const [text, setText] = useState ('');

  const handleTextChange = (event) => {
    setText (event.target.value);
  };

  return (
    <form className="AddThoughtForm">
      <input type="text" value={text} onChange={handleTextChange} />
      <input type="submit" value="Add" />
    </form>
  );
}

//submit + add
const handleSubmit = (event) => {
  event.preventDefault ();
  const thought = {
    id: generateId (),
    text: text,
    expiresAt: getNewExpirationTime (),
  };
  props.addThought (thought);
};

//manually delete
const removeThought = (thoughtIdToRemove) => {
  setThoughts ((thoughts) =>
    thoughts.filter ((thought) => thought.id !== thoughtIdToRemove)
  );
};

//router setup
npm install --save react-router-dom@6;

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  Link,
  NavLink,
  RouterProvider,
} from 'react-router-dom';
import About from './About';
import Home from './Home';

const router = createBrowserRouter (
  createRoutesFromElements (
    <>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </>
  )
);

function App () {
  return (
    <RouterProvider router={router}>
      <nav>
        <Link to="/">Go to Home</Link>
        <NavLink to="/about">Go to About</NavLink>
      </nav>
    </RouterProvider>
  );
}

export default App;

//useParams
import { Link, useParams } from 'react-router-dom';

export default function Article () {
  let { title } = useParams ();
  return (
    <article>
      <h1>{title}</h1>
    </article>
  );
}

//useNavigate
import { useNavigate } from 'react-router-dom';

export const ExampleForm = () => {
  const navigate = useNavigate ();
  const handleSubmit = (e) => {
    e.preventDefault ();
    navigate ('/');
  };

  return <form onSubmit={handleSubmit}>{/* form elements */}</form>;
};

//useSearchParams
import { useSearchParams } from 'react-router-dom';

export const SortedList = () => {
  const [searchParams, setSearchParams] = useSearchParams ();
  const sortOrder = searchParams.get ('order');
  console.log (sortOrder); // "DESC"
};