React Getting Started

🚀 React — Getting Started

To start working with React, you need to set up an environment where React code can run. You can get started in three ways:

✅ 1. Using CDN (Quick Testing — No Installation)

Good for beginners who just want to experiment.

<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div><!– React (Core) –>
<script src=“https://unpkg.com/react@18/umd/react.development.js”></script><!– React DOM –>
<script src=“https://unpkg.com/react-dom@18/umd/react-dom.development.js”></script>

<!– Babel: Converts JSX to JS –>
<script src=“https://unpkg.com/@babel/standalone/babel.min.js”></script>

<script type=“text/babel”>
function App() {
return <h1>Hello React!</h1>;
}

ReactDOM.createRoot(document.getElementById(“root”)).render(<App />);
</script>
</body>
</html>

✅ 2. Using Create React App (Beginner-Friendly Setup)

This creates a fully ready development environment.

✔ Step 1: Install Node.js

If not installed, download from: https://nodejs.org

Check installation:

node -v
npm -v

✔ Step 2: Create Project

npx create-react-app my-react-app

✔ Step 3: Run Project

cd my-react-app
npm start

Your browser opens at:

👉 http://localhost:3000

✅ 3. Using Vite (Fastest & Modern Method)

Best for performance and modern development.

✔ Step 1: Create a Vite React app

npm create vite@latest my-app --template react

✔ Step 2: Install dependencies

cd my-app
npm install

✔ Step 3: Run the project

npm run dev

Vite will give a local link like:

👉 http://localhost:5173

📁 Project Structure (Common in React Apps)

my-app
┣ public/
┣ src/
┃ ┣ App.jsx
┃ ┣ index.js (or main.jsx)
┃ ┗ assets/
┣ package.json
┣ node_modules/
┗ README.md

Important files:

File Purpose
App.jsx Main UI component
index.js / main.jsx Entry point of React app
public/index.html HTML shell file

🧪 First React Component Example

Edit src/App.jsx:

function App() {
return (
<div>
<h1>Welcome to React 🚀</h1>
<p>This is my first React component.</p>
</div>
);
}export default App;

React will automatically refresh the page.

🎉 You’re Ready!

Now you understand:

✔ React setup options
✔ How to install
✔ How to run a project
✔ First working component

You may also like...