Learn how to initialize a professional React project using Vite. We’ll cover the project directory structure and how to launch your fast development environment.
Previously in this course, we explored the introduction-to-component-based-architecture-in-react and why the understanding-the-virtual-dom-and-react-performance is critical for modern web apps. Now that you understand the "why" behind React, it’s time to move to the "how" by building our professional development environment.
We will use Vite (pronounced "veet"), the industry standard for modern React development. Unlike older tools that bundle your entire application before starting the server, Vite uses native ES modules to serve code instantly, making your "save-refresh-see" loop near-instant.
To begin our movie-browser app, ensure you have Node.js (LTS version) installed on your machine. Open your terminal and run the following command:
Bashnpm create vite@latest movie-browser -- --template react
When prompted, follow these steps:
React as the framework.JavaScript (we'll stick to standard JS for now to focus on React fundamentals).Once the scaffolding finishes, navigate into your directory and install the dependencies:
Bashcd movie-browser npm install npm run dev
The terminal will provide a local URL (usually http://localhost:5173). Open that in your browser, and you’ll see the default Vite starter page. You have successfully initialized your project setup!

A professional development environment relies on a clear, predictable structure. Here is what your new project folder looks like:
node_modules/: This folder contains all the external libraries your project needs. Never edit this directly; it's managed by npm.public/: Assets here are served as-is. Use this for static files like favicon.ico or global images that don't need processing.src/: This is where you will spend 99% of your time. All your React components, CSS, and logic reside here.index.html: The entry point of your app. Notice the <div id="root"></div>—this is the "hook" where React mounts your entire component tree.vite.config.js: The configuration file for Vite. You’ll rarely need to touch this as a beginner, but it's where you configure plugins or proxy settings later.package.json: The manifest of your project. It lists your dependencies and the scripts (like npm run dev) that drive your workflow.When you run npm run dev, Vite starts a local development server with Hot Module Replacement (HMR). HMR is a game-changer: when you change a line of code in a component, Vite updates only that specific part of the page without reloading the entire browser window.
src/App.jsx.<h1> tag to "My Movie Browser".npm install before running npm run dev. Without the node_modules folder, the dev server will crash because it can't find React.package.json lives).public vs src folder: A common mistake is putting images in public when they should be imported in src. If a file needs to be optimized or processed (like a component icon), put it in src. If it’s a global asset, put it in public.You now have a functional Vite environment ready for development. We’ve initialized the project, toured the directory structure, and confirmed that the development environment is responsive via HMR. You are now ready to start writing your own components to bring our movie-browser to life.
Up next: Mastering JSX Syntax.
Learn how to write valid JSX, embed JavaScript expressions, and handle DOM attributes correctly to build clean, declarative React components.
Read moreReact reconciliation is the engine behind your UI updates. Learn how DOM diffing works and how to minimize mutations to keep your React app fast.
Creating Static Components
Styling Components
Passing Data with Props
Dynamic Movie Cards
Component Composition
Conditional Rendering
Rendering Lists of Data
The Key Prop Explained
Introduction to React State
Managing State with useState
Building an Interactive Search Bar
Handling Click Events
Updating State Based on Previous State
Filtering the Movie List
Handling Form Submissions
Controlled Components
Event Bubbling and Propagation
Building a Movie Filter Toggle
Introduction to Side Effects
useEffect Dependencies
Fetching Data from an API
Handling Loading States
Managing Errors
Cleanup Functions in useEffect
Debouncing Search Input
Refactoring for Clean Code
Folder Structure Best Practices
Extracting Custom Hooks
Prop Drilling and Context API
Polishing the UI
Finalizing the Movie Browser
Review of Component Lifecycle
Review of State Management
Building a Modal Component
Introduction to PropTypes
Performance Optimization Basics
Handling Browser History
Working with LocalStorage
Building a Favorites List
Handling Media in React
Introduction to Testing
Debugging React Apps
Deployment Basics
Using External Libraries
Advanced