React.js Essential Notes

https://create-react-app.dev/

node -v
npm -v
npx create-react-app react-essentials
cd .\react-essentials
npm start

也可以在线编辑：
网址react.new 跳转到codesandbox

Remember, a component is a function that returns UI.

const dishes = ["Macaroni and Cheese", "Salmon", "Tofu with vegetables"];
const dishObject = dishes.map((dish, i) => ({ id: i, title: dish })); 
// =>()加括号的函数体返回对象字面量表达式

Checkbox useReducer Testing

// Checkbox.js
import { useReducer } from "react/cjs/react.development";

export function Checkbox() {
  const [checked, toggle] = useReducer((checked) => !checked, false);

  return (
    <>
      <label for="checkbox">{checked ? "checked" : "not checked"} </label>
      <input id="checkbox" type="checkbox" value={checked} onChange={toggle} />
    </>
  );
}

// Checkbox.test.js
import { React } from "react";
import { render, fireEvent } from "@testing-library/react";
import { Checkbox } from "./Checkbox";

test("Selecting checkbox", () => {
  const { getByLabelText } = render(<Checkbox />);
  const checkbox = getByLabelText(/not checked/);
  fireEvent.click(checkbox);
  expect(checkbox.checked).toEqual(true);
});