Skip to main content

1. Setup & React Fundamentals

Goal for this page: have a running React app on your machine and understand the three things every React app is made of — components, JSX, and props.

Step 1.1 — Install your tools​

What & why: You need a JavaScript runtime (Node.js), a package manager (npm, comes with Node), a code editor, and Git.

Learn / install:

Your task: Install all three. In a terminal, confirm each works by checking its version (node, npm, git). Install the ESLint and Prettier extensions in VS Code.

Step 1.2 — Set up Git & GitHub​

What & why: Git is the version-control system that tracks your code history; GitHub is where that code lives online and where teams collaborate through pull requests. You'll use both every single day at AquaGen, so set them up now — not later. You'll version-control your practice app from day one.

Learn / do:

Your task: Create a GitHub account. Configure your Git name and email locally. Create an empty repository on GitHub called dev-directory — you'll push your practice app to it in the next step, and you'll practice the full branch/PR workflow later in Best Practices & Workflow.

Step 1.3 — Scaffold the practice app​

What & why: A scaffold gives you a working project structure so you can focus on learning React instead of build config.

Learn:

Your task: Create a new app called dev-directory using Create React App. Start the dev server and open it in the browser. Then open the project in VS Code and find where the main component lives. Finally, commit it to Git and push it to the dev-directory GitHub repo you created in Step 1.2 (git init if needed, add the remote, commit, push) — from here on, commit as you go.

Where this is heading

Right now everything lives in one folder — that's fine for today. Over the next pages you'll split DevDirectory into the four layers every AquaGen feature library uses (dataSource / controller / store / components), so the structure you end up with mirrors the real codebase. See the practice-project overview.

Step 1.4 — JavaScript & TypeScript essentials​

What & why: React is "just JavaScript." The modern syntax below shows up on every line of React code, so shore it up now. TypeScript adds types that catch bugs early — our production app is fully TypeScript.

Learn (JavaScript):

Learn (TypeScript):

Your task: Write a few tiny standalone functions to practice map, filter, destructuring, and async/await against one of the dummy APIs' URLs in your browser console. Then decide: do the rest of this track in JavaScript first, or enable TypeScript now. (Either is fine — TypeScript is the industry default, so try it if you're feeling brave.)

Step 1.5 — Components & JSX​

What & why: A React UI is a tree of components — functions that return JSX (HTML-like markup). This is the single most important concept in React.

Learn:

Your task: Delete the default boilerplate in your app. Create a Header component and a Footer component and render them. Make a Card component that shows a title and a line of text.

Step 1.6 — Props​

What & why: Props pass data from a parent component into a child, so the same component can render different content. This is how you avoid copy-pasting UI.

Learn:

Your task: Make your Card accept title and description as props. Render three Cards with different content by passing different props — without duplicating the card's markup.

Checkpoint

You can scaffold and run a React app, and you understand components, JSX, and props. Next, make it interactive.

Next: → State, effects & lists