Skip to content

React Setup — Learning Log

To learn how about React and how to use React, I asked claude to teach me about React and then give me something cool to do with it. On my machine I went to http://localhost:5173/ to be able to see the website that I created using React.

A record of questions and answers from setting up React for the first time.

Q: How do I set up React?

A: Use Vite — the fastest and most modern option:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Prerequisites: Node.js must be installed. Check with node -v and npm -v. Download from nodejs.org if needed.

Once running, open http://localhost:5173 in your browser.

Q: What is React?

A: React is a JavaScript library for building user interfaces, created by Meta (Facebook). You build your UI out of components — reusable pieces that each manage their own structure, logic, and appearance.

Key concepts:

  • Components — functions that return HTML-like code (JSX)
  • JSX — syntax that lets you write HTML inside JavaScript
  • State — data that, when changed, automatically re-renders the component (managed with useState)
  • Props — how you pass data from a parent component to a child
  • Virtual DOM — React only updates what actually changed, making it fast

Simple example:

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Q: Can I install React on Windows?

A: Yes! Here's what you need:

Step 1: Install Node.js - Go to nodejs.org and download the LTS version - Run the installer (click through the defaults) - Verify with: node -v and npm -v

Step 2: Create your React app

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Windows tips: - Use Windows Terminal or VS Code's built-in terminal - VS Code is the most popular editor — download at code.visualstudio.com - If you get a permissions error: run PowerShell as Administrator and run Set-ExecutionPolicy RemoteSigned

Q: I see the "Get Started" page at localhost:5173 — what do I do next?

A: That means everything installed successfully! The page is just a placeholder — you're meant to replace it.

Your next steps: 1. Open src/App.jsx in VS Code and start editing 2. Changes save instantly thanks to HMR (Hot Module Replacement) 3. Build something — a to-do list, a dashboard, a form, etc.

The key file to edit is src/App.jsx — that's where all your visible content lives.

Q: What is my project folder — is that my-app?

A: Yes! Your project folder is my-app.

To open it in VS Code: 1. Open VS Code → File → Open Folder 2. Navigate to my-app and click Select Folder

Or from the terminal:

code .

Project structure:

my-app/
├── src/
│   ├── App.jsx      ← main file you'll edit
│   ├── App.css      ← styles for App
│   └── main.jsx     ← entry point (don't touch yet)
├── public/          ← static files like images
├── index.html
└── package.json     ← project config and dependencies

Q: Give me something cool to do

A: A color palette generator! Replace everything in src/App.jsx with:

import { useState } from "react"

function App() {
  const [colors, setColors] = useState(generateColors())

  function generateColors() {
    return Array.from({ length: 5 }, () =>
      "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, "0")
    )
  }

  function copyToClipboard(color) {
    navigator.clipboard.writeText(color)
    alert(`Copied ${color}!`)
  }

  return (
    <div style={{ fontFamily: "sans-serif", textAlign: "center", padding: "40px" }}>
      <h1>🎨 Color Palette Generator</h1>
      <button
        onClick={() => setColors(generateColors())}
        style={{ padding: "10px 24px", fontSize: "16px", marginBottom: "32px", cursor: "pointer" }}
      >
        Generate New Palette
      </button>

      <div style={{ display: "flex", gap: "16px", justifyContent: "center" }}>
        {colors.map((color, i) => (
          <div
            key={i}
            onClick={() => copyToClipboard(color)}
            style={{
              backgroundColor: color,
              width: "120px",
              height: "180px",
              borderRadius: "12px",
              cursor: "pointer",
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "center",
              paddingBottom: "10px",
              boxShadow: "0 4px 12px rgba(0,0,0,0.15)"
            }}
          >
            <span style={{ background: "rgba(0,0,0,0.4)", color: "#fff", borderRadius: "6px", padding: "2px 6px", fontSize: "12px" }}>
              {color}
            </span>
          </div>
        ))}
      </div>
      <p style={{ marginTop: "20px", color: "#888" }}>Click a color to copy its hex code</p>
    </div>
  )
}

export default App

What it does: - Generates 5 random colors on load - Click "Generate New Palette" to get new ones - Click any swatch to copy its hex code to your clipboard

React concepts you're learning: - useState — storing and updating data - .map() — rendering a list of elements - Inline styles in React - Event handlers (onClick)

Q: localhost:5173 is blank — what happened?

A: A blank page usually means a JavaScript error.

How to find it: - Press F12 → click the Console tab → look for red errors

Most common causes: - Didn't save the file (hit Ctrl+S) - Copy/paste cut off some code - Syntax error (console will show the exact line)

Q: Error — does not provide an export named 'default'

Full error:

Uncaught SyntaxError: The requested module '/src/App.jsx?t=...' does not provide an export named 'default' (at main.jsx:4:8)

A: The export default App line is missing or the file didn't save correctly.

Fix: 1. Click src/App.jsx in VS Code 2. Press Ctrl+A to select all 3. Press Delete to clear it 4. Paste the code fresh 5. Press Ctrl+S to save

Make sure the very last line of the file is exactly:

export default App

If VS Code shows a red circle with a number in the bottom bar, click it to see where the syntax error is.

In the end, I made the site below.

color pallette react