React Basics

Explore & Discover

Open your browser and go to [react.dev](https://react.dev) — React's official site. Click through the "Learn" section and read the intro. You don't need to understand everything yet; just get a feel for what React actually is. React is the JavaScript library that powers apps like Facebook, Instagram, and tons of Utah startups. Watch a few YouTube searches for "what is React explained for beginners" and notice what problems it solves. Ask yourself: what's the difference between a webpage and a web *app*? You're ready for the next step when you can explain in your own words what React does and why developers use it instead of plain HTML.

Learn the Basics

Head to [react.dev/learn](https://react.dev/learn) and work through "Describing the UI" and "Adding Interactivity." These are free, interactive tutorials built right into the browser — no installs needed yet. Learn what a *component* is (think of it like a reusable LEGO brick for web pages), what JSX looks like, and how *props* pass information between components. Take notes on new vocab: component, JSX, props, state. The official docs have live code editors — use them, change things, break stuff on purpose. You're ready for the next step when you can write a simple React component from memory and explain what JSX is.

Build Your First Project

Set up your first real React project using the free tool Vite. Open a terminal and run `npm create vite@latest my-first-app -- --template react`, then follow the prompts. Use [VS Code](https://code.visualstudio.com/) (free) as your editor. Your goal: build a simple personal homepage with at least three components — a Header, an About section, and a hobbies list. Use `useState` to make at least one thing interactive, like a button that toggles dark mode or shows/hides text. Push your project to [GitHub](https://github.com) (also free). You're ready for the next step when your app runs in the browser and has at least three working components with one interactive feature.

Experiment & Iterate

Now make things more interesting. Add React Router (free, `npm install react-router-dom`) so your app has multiple pages. Fetch real data from a free public API — try the [OpenWeatherMap API](https://openweathermap.org/api) to show Salt Lake City's weather, or use `fetch` with any free JSON API you find interesting. Learn `useEffect` for fetching data and handling side effects. Break things intentionally — delete a prop, misname a variable — and read the error messages carefully. Error messages are your best teachers. You're ready for the next step when your app has at least two routes and displays live data fetched from an API.

Advanced Techniques

Level up your React skills with three advanced concepts. First, learn **Context API** to share data across components without prop-drilling — the official docs at react.dev cover this well. Second, explore **custom hooks**: pull repeated logic out of components into reusable functions that start with `use`. Third, add **TypeScript** to your project (`npm install typescript @types/react`) for type safety that catches bugs before they happen. Also explore [Tailwind CSS](https://tailwindcss.com/) (free) for fast, clean styling. Check out Utah-based developer blogs and the React subreddit for real-world patterns. You're ready for the next step when you have a working custom hook and your app uses Context to manage at least one piece of shared state.

Final Project Showcase

Build a complete, original React app from scratch and share it with the world. Ideas: a Utah hiking trail tracker, a local events board, a study tool for your school, or a game. Your app must include: multiple routes, fetched external data, custom hooks, TypeScript, and clean component structure. Deploy it free on [Vercel](https://vercel.com) or [Netlify](https://netlify.com) so anyone can visit it. Write a short README on GitHub explaining what it does and how you built it. Share the link in the SLCTrips community. You're ready for the next step when your finished app is live on the internet and a friend can use it without you explaining anything.