Understanding Your React Project Structure

Overview

Before we dive into components and JSX, let’s take a quick look at the files and folders that make up your React app. If you’re coming from HTML, CSS, and JavaScript, this structure might look a little different than what you’re used to. Don't worry though, you don't need to memorize every detail, We just want you to have a general idea of what’s going on.

Here are the main parts you’ll see in your project folder:

node_modules/ - This is where all the dependencies (the libraries and tools your app needs) are stored. It can look intimidating with hundreds of files, but you can ignore it for now.

public/ - This folder holds any static files you want to include in your app like images and icons.

src/ - This is the most important folder and where you’ll spend most of your time. It contains your React components, styles, and other code.

App.jsx - This is the main React component that comes with your starter project. Think of it as the “homepage” component that other components plug into.

App.css - This is for styles you conceptually tie to the App component (like layout or styles used directly by App.jsx). It’s imported inside App.jsx.

index.css - This is typically for global styles that affect the whole app: CSS resets, base typography, variables, body/background, etc. It’s imported in main.jsx so it loads once for the entire app.

main.jsx - This file connects React to the actual web page. It tells React to render the App component inside the index.html file (which we'll go over in just a bit). You won’t need to change this often, but it’s good to know what it does.

index.html - This is the single HTML file your entire React app renders into. In Vite, it lives at the root (not in public/). Vite treats this as the entry point. The important part is <div id="root"></div>. React will “mount” your app into that div (as seen in the main.jsx file).

package.json - This file keeps track of your project’s settings and dependencies. It lists all the libraries your project needs (like React and Vite). It also has scripts you can run, like npm run dev to start your server.

vite.config.js - This file may not appear right away, but this is the configuration file for Vite. If you ever want to customize how your app builds, you’d use this. For now, you don’t need to touch it.

With that out of the way, you're ready to actually start writing code in React!