I had to learn React few years to do some simple UI for some skunkworks project. But i didn’t use it for years, So it is about time to revive it.

The first step is to install yarn to use as package manager and runner.

npm install -g yarn

Run vite to create app. Vite is new packager to replace react-create-app.

$ yarn create vite
yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@5.2.3" with binaries:
      - create-vite
      - cva
✔ Project name: … test-project
✔ Select a framework: › React
✔ Select a variant: › JavaScript


Done. Now run:

  cd test-project
  yarn
  yarn dev

Done in 89.57s.

Then we can install dependency packages

yarn

Finally run development server

yarn run dev
# or build dist
yar run build

React cheatsheet Link to heading

function Header() {
  return (
    <header>
      <h1>Ny website</h1>
      <nav>
        <u>
          <i>About</i>
        </u>
      </nav>
    </header>
  );
}

function Food() {
  const food1 = "orange";

  return (
    <>
      <ul>
        <i>{food1}</i>
        <i>{new Date().getFullYear()}</i>
      </ul>
    </>
  );
}

function Card() {
  return (
    <div className="card">
      <h2>Hi there</h2>
      <p>text</p>
    </div>
  );
}

function Button() {
  return <div></div>;
}

function Student(props) {
  return (
    <div>
      <p>Name : {props.name}</p>
      <p>Student {props.isStudent}</p>
    </div>
  );
}

function UserGreeting(props) {
  const m1 = <h1>hey user</h1>;
  const m = props.isLoggedin ? m1 : <h1>not logged</h1>;
  return m;
}

function List(props) {
  // const fruits = ["a", "b"];
  // const listItems = fruits.map((fruit) => <li>{fruit}</li>);
  const fruits = [{ name: "apple", cal: 100 }];
  const listItems = fruits.map((fruit) => (
    <li>
      {fruit.name} : {fruit.cal}
    </li>
  ));
  return <ol>{listItems}</ol>;
}

function Button1() {
  let count = 0;
  const handleClick = (e) => {
    console.log(e);
    e.target.textContent = "ugh";
  };
  return <button onClick={(e) => handleClick(e)}>click</button>;
}

function App() {
  return (
    <>
      <Header />
      <Food />
      <Card />

      <Student name="sponge" isStudent={true}></Student>
      <UserGreeting isLoggedin={true}></UserGreeting>
      <List></List>
      <Button1></Button1>
    </>
  );
}

export default App;