From Episode 1 to Episode 2: Setting Up Your Real React App

From Episode 1 to Episode 2: Setting Up Your Real React App

Episode 1 taught you React via CDN. Episode 2 moves you to a real project setup with npm, a bundler, and a proper file structure. This transition trips up many beginners. Here is a roadmap to make it clean.

Step 1: Install Node.js and Verify npm

Before anything else, install Node.js LTS and verify npm works from your terminal. Without this, none of the following steps work.

Step 2: Initialize the Project

Create a project folder and run npm init to generate a package.json, or use a starter that sets it up for you. This file is the manifest for everything that follows.

Step 3: Install React and ReactDOM

Install react and react-dom as dependencies. These are the core packages your app needs to run.

Step 4: Add a Bundler

Install Parcel (or Vite) as a devDependency. Configure an npm script to start the dev server so you can run your app locally.

Step 5: Create an Entry Point

Create an index.html and a JavaScript entry file, typically src/index.js. Mount your React app to a root element using createRoot.

Step 6: Set Up a Basic Structure

Create components and utils folders. Keep it minimal. Structure grows with the project; do not over-organize on day one.

Step 7: Add Git and .gitignore

Initialize Git and add node_modules to .gitignore. Commit your work. This protects you and builds a history.

The Common Mistake

Learners try to add styling, linting, testing, and routing all in Episode 2. That is too much at once. Get the app running first, then layer tools as the course introduces them.

The Takeaway

Episode 2 is about turning React from a CDN script into a real project. Follow the steps in order, keep it minimal, and add complexity only when the next episode requires it.