Structure of Plain React, Create React App (CRA), and React + Vite

Posted by on


 

React Project Structures Comparison

Plain React

npm init -y
npm install react react-dom 
project/
├── node_modules/
├── package.json
├── public/
│   └── index.html
└── src/
    ├── App.js
    └── index.js

Create React App (CRA)

npx create-react-app my-app 
my-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── package.json
├── README.md
└── .gitignore

React + Vite

npm create vite@latest
# then select "React" 
my-vite-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Note: Folder structures may vary slightly based on package versions and configuration choices.



How React Apps Load & Update

Plain React (No Build Tool)

app.js (ES Modules/CDN)
↓
React renders App into <div id="root">
↓
User edits app.js
↓
Must manually refresh browser

Notes:

  • No automatic JSX compilation (must use CDN or Babel)
  • No hot reload - manual browser refresh required
  • Minimal setup but very limited features
  • No production optimizations

Create React App (CRA)

Webpack bundles entire app
↓
Dev server serves bundle
↓
React renders App
↓
On file change: full re-bundle
↓
Browser auto-refreshes

Notes:

  • Webpack handles JSX compilation, bundling
  • Full page refresh on changes (not HMR)
  • Slower updates due to full re-bundling
  • Includes production optimizations
  • Heavier dev dependencies

React + Vite

Native ES modules loading
↓
Vite serves unbundled files
↓
React renders App
↓
On file change: instant HMR
↓
Updates without full refresh

Notes:

  • Native ES modules + on-demand compilation
  • True Hot Module Replacement (HMR)
  • Near-instant updates without full refresh
  • Lightning-fast cold start
  • Optimized production builds
Web Services

Comments

Post a Comment