Loading content...
Loading content...
You don’t install React. You directly load it from the internet using script tags.
html
<!DOCTYPE html>
<html>
<head>
<title>React CDN Example</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script>
const element = React.createElement("h1", null, "Hello World");
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(element);
</script>
</body>
</html>Learning basics, quick testing, small widgets
An official React setup tool (now considered outdated).
javascript
npx create-react-app my-app
npx startLegacy projects or beginners learning old setups
A modern and super fast build tool for React apps.
plaintext
npm create vite@latest my-app
cd my-app
npm install
npm run devA React framework for building full-stack and production-ready apps.
plaintext
npx create-next-app@latest my-appYou configure everything manually (Webpack, Babel, etc.)
plaintext
npm init -y
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-reactjavascript
my-app/
├── node_modules/
├── public/
├── src/
├── package.json
├── index.htmlThis folder contains all installed packages
Example react react dom etc
Do not edit or upload to git
This folder contains static files
Examples : index.html images favicon
These files are directly used by browser
This is the most important folder
All main code is written here
javascript
src/
├── assets/
├── components/
├── pages/
├── App.jsx
├── main.jsx
├── styles/Store images icons fonts
Example : logo.png
Examples : Navbar Footer Card
Examples : Home About Contact
Main component
All components and pages are used here
Entry point of app
React app starts from here
CSS files Example : App.css
plaintext
src/
├── components/
├── pages/
├── services/
├── hooks/
├── utils/
├── context/
├── assets/