Final Project :D

GitHub - hackutd/f24-react-workshop-planty at final

Using online code editor (recommended for workshop)

Hackutd - F24 React Workshop Planty - StackBlitz

Code it on your laptop

1. Install Node (This’ll let you run and compile React code :o )

   1. https://nodejs.org/en/download

2. Download the project from GitHub

   https://github.com/hackutd/f24-react-workshop-planty/

   1. On this website → click the green code button → download it as a ZIP → then extract it

   

3. Make sure to have an editor like vs code installed to edit it!

   1. https://code.visualstudio.com/download

4. Open the folder you extracted from step 2 in vs code

   1. Open the terminal from the top ribbon find Terminal → New Terminal

      

   2. and run these 2 commands:

      1. “npm install” to install the required libraries
      2. “npm run dev” to run it!

      

      

      Sweet! Now the project should be up and running on your machine!

Implementing React

Navbar.jsx

import React from "react";

function Navbar() {
  return (
    <div className="w-full my-8">
      <h1 className="text-center font-jua text-4xl text-primary">
        🌱 My Garden
      </h1>
    </div>
  );
}

export default Navbar;

No coding needed, but this shows a simple component

• Notice how a component is just a Javascript function that returns some HTML
• We use export default Navbar so that we can import it with the following:

import Navbar from "./components/Navbar.jsx";

Menu.jsx

import React from "react";

function Menu({ gold, water, buyWater, openPopup }) {
  // ... other code

  return (
    <>
      <div className="flex flex-wrap justify-center gap-4">
        <NumberDisplay name="gold" value={gold} />
        <NumberDisplay name="water" value={water} />
      </div>
    </>
  );
}

function NumberDisplay({ name, value }) {
  return (
    <div className="w-44 flex flex-row justify-evenly items-center bg-backgroundDark border-backgroundDark border-[3px] rounded-xl font-bold text-xl font-balsamiq">
      <h1 className="px-2 basis-5/12 text-primary text-center bg-backgroundDark">
        {name}
      </h1>
      <div className="h-full grow flex justify-center bg-background rounded-r-xl">
        <h1 className="text-text">{value}</h1>
      </div>
    </div>
  );
}

// ... other code

export default Menu;

Takeaways:

• Notice here we have a component NumberDisplay that takes in name and value as properties. These properties are used within the HTML using brackets. React will fill in the values using the value of the properties and display it.