Chase's Notes

Here I'm going to put some notes for me to refer to throughout the process of coding this website. Just so I remember how to recreate this

Setting up Vite + React

Before even starting, be sure verify that node.js and npm (node's package mananger) is installed. Check their versions by running

node -v
npm -v

To create the project navigate to where you want to create it and run

npm create vite@latest acme-labs-ui -- --template react-ts
cd acme-labs-ui
npm install
npm run dev

Example Code from ChatGPT

Here are some example things that Chat gave me that I figure I would just put here:

The first thing that it did was create a process where the user enters a number of samples, and then the computer would compute those samples and take the average of them all.

Defining State Variables
First we have our state variables in pairs, the variables themselves, and the function we call to update them

const [n, setN] = useState<number>(10)
const [result, setResult] = useState<number | null>(null)

Creating a Function
The we have the function that the will be called when the user clicks the button

function handleRun() {
  const values = Array.from({ length: n }, () => Math.random())
  const avg = values.reduce((s, x) => s + x, 0) / n
  setResult(avg)
}

Updating a state variable
Next, in the return block we have the area where the user can enter their input, doing so calls an arrow function, and uses the setN function to set N to the number that the user inputted

<label>
  n:
  <input
    type="number"
    value ={n}
    onChange={(e) => setN(Number(e.target.value))}
    style={{ marginLeft: "0.5rem" }}
  />
</label>

Calling a Function
Then we have where the previously made function is called. You can see that when the button is clicked it executes the event "onClick"

<button onClick={handleRun} style={{  marginLeft: "0.5rem"  }}>
  Run Experiment
</button>

Conditionally Rendering a Variable
We can then display our variable, but do it conditioned upon whether or not the variable has a value

{result !== null && (
  <p>
    Average of {n} random samples: <strong>{result.toFixed(4)}</strong>
  </p>
)}

Using tailwind

This project uses TailwindCSS for styling. Tailwind provides low-level utility classes (e.g., flex, text-center, p-4) that make it easy to design custom UIs without writing traditional CSS files.

In the past I have used Bootstrap as my CSS framework. Tailwind is different from Bootstrap and other CSS frameworks in that Tailwind is a "utility first" CSS framework, whereas Bootstrap is a "Component first" CSS framework. So Bootstrap gives you components to work with while Tailwind gives you just the utility classes to work with.

While researching frameworks I also found a list of CSS frameworks that may be useful.

Component Frameworks

• Material UI (MUI) → component library
• Bulma → component-based CSS framework
• Foundation → component-based CSS framework
• Chakra UI → React component library (utility-ish)
• DaisyUI → Tailwind component library

Utility Frameworks

• Tailwind CSS
• Tachyons

Traditional Frameworks

• Bulma
• Foundation

Below are the exact steps used to set up Tailwind in this project.

I had just written out the steps that chat had given me to get started with Tailwind CSS, but then I checked the documentation and realized it was totally wrong. It was using steps for an old version of Tailwind. So then I referred to https://tailwindcss.com/docs/installation/using-vite. Since this is setup using Vite I referred to those steps.