1. Setup Your Development Environment
Install VS Code: https://code.visualstudio.com/
Open Terminal (Mac) / Command Prompt (Windows)
npx create-react-app my-first-site cd my-first-site npm start
2. Your First React Component
Edit src/App.js
function App() {
return (
<div className="text-center py-12 bg-gradient-to-r from-indigo-100 to-purple-100">
<h1 className="text-4xl font-bold text-indigo-700">Hello, World!</h1>
<p className="mt-4 text-lg text-purple-600">Your first React app is running!</p>
</div>
);
}
3. Add Interactivity
Modify the component to include state and events:
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div className="text-center py-12 bg-gradient-to-r from-indigo-100 to-purple-100">
<h1 className="text-4xl font-bold text-indigo-700">Click Count: {count}</h1>
<button
className="mt-8 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
onClick={() => setCount(count + 1)}
>
Increment
</button>
</div>
);
}