first commit

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,45 @@
+# **What's a `useState` Hook?**
+
+First of all, let's take a second to demystify this whole _"hook"_ thing because it sounds way more intense than it actually is. A _hook_ in React is not some mystical creature living in your code. It's really just a _function_---a function that React gives you to make life easier in functional components.
+
+Now, why do we even need hooks? Well, before hooks, state management was done in class components, which, let's be honest, nobody really enjoyed writing. So React decided, "Hey, let's add hooks, which are just neat little functions that let us do more with functional components!" (I might have paraphrased that a bit, but you get it.)
+
+Okay, so **`useState`** is like this:
+
+- It's a hook that gives you **two things**: a _getter_ (which is just a fancy word for "here's your current value") and a _setter_ (which means "yo, change this value, please"). So you get a way to _hold_ the current state and a way to _update_ it. It's basically like React saying, "Hey, I'll store this value for you, and I'll also give you a button to change it whenever you want."
+
+Think of it like this: imagine you have a pet hamster in a cage (that's your **state**), and you want to check if it's asleep, eating, or running in its wheel. The **getter** is you peeking into the cage to see what the hamster is doing. The **setter** is you giving the hamster some food or spinning its wheel. React's job? Keeping that hamster's current state fresh, no matter what it's up to!
+
+## **Why Should We Care?**
+
+Look, not everything needs to be managed by a big, fancy global state manager. Sometimes you just need to keep track of a couple of simple things---like how many times a button has been clicked, or whether your user likes pineapples on pizza (the answer is always yes, btw). `useState` gives you that power right inside your component without needing to bring out the big guns like Zustand or Redux (don't worry, you'll see these later in the bootcamp).
+
+**But wait, there's more!**
+
+1.  **React's Virtual DOM Makes Re-renders Fast and Efficient:** Every time you update the state with `useState`, React doesn't just blindly re-render everything on the page---oh no, that would be inefficient and slow! Instead, React has this clever system called the _virtual DOM_. Think of it as a blueprint of the real DOM (the structure of your web page). Whenever you change state, React creates a new virtual DOM, compares it with the previous one (like a before-and-after photo), and only updates the parts of the actual DOM that have changed. This makes updating your UI super fast without the need to reload the whole page or re-render unnecessary components.
+
+In short, `useState` works hand-in-hand with the virtual DOM to keep things running smoothly and efficiently, so you don't have to worry about performance or handling the re-rendering of every single piece of your app manually. React's virtual DOM makes sure only the things that _need_ updating get updated, giving your users a seamless experience.
+
+## **How Do We Actually Use `useState`?**
+
+Alright, buckle up, because here's where it gets real:
+
+```js
+const [count, setCount] = useState(0);
+```
+
+- **`count`**: This is the _getter_, a.k.a the current state value. It starts at `0` because we passed `0` as the initial value to `useState(0)`. It's like saying, "Hey React, start the count at zero and let me know where it's at."
+
+- **`setCount`**: This is the _setter_. Whenever you want to change the value of `count`, you call `setCount(newValue)`. It's like telling React, "Hey, update the count and re-render this component so everyone knows what's up."
+
+## How it works in three easy steps:
+
+1.  **Initialization**: When the component renders for the first time, React sees the `useState(0)` and says, "Alright, I'm starting your count at zero." It's like a starting pistol for the state race.
+
+2.  **Updating the State**: Want to change the state? Just call `setCount`. It's like tapping React on the shoulder and saying, "Hey, I want to bump the count up a notch," and React goes, "Got it, boss!"
+
+3.  **Re-rendering the Component**: Every time the state changes (when you call `setCount`), React automatically re-renders the component with the new state. It's like having a hyper-efficient butler that makes sure your component always shows the freshest data without you lifting a finger.
+
+## Conclusion
+
+And there you go! `useState`, a hook that's really just a handy tool for keeping track of stuff, updating it, and making sure your UI is always in sync with the latest state. Simple as that. Now go out there and hook 'em!

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>The useState Hook</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>