ProgrammingIntermediate
React Basics: Building Interactive UIs
Learn React fundamentals including components, props, and state to build dynamic web applications.
Written byAlex Rodriguez
PublishedNov 19, 2025
Time50 minutes
4clear steps
Before you begin
- JavaScript Basics: Variables and Data Types
- HTML & CSS: Building Your First Webpage
The walkthrough
Step by step.
01
Step 1 of 4
Setting Up React
Create a new React app using Vite for fast development.
bash
# Create new React project
npm create vite@latest my-app -- --template react
# Navigate to project
cd my-app
# Install dependencies
npm install
# Start development server
npm run devField note
- Vite is faster than Create React App
- Open localhost:5173 in your browser
02
Step 2 of 4
Creating Your First Component
Components are reusable pieces of UI. Create a functional component.
javascript
// Button.jsx
function Button() {
return (
<button className="btn">
Click Me
</button>
);
}
export default Button;
// App.jsx
import Button from './Button';
function App() {
return (
<div className="app">
<h1>My React App</h1>
<Button />
</div>
);
}Field note
- Component names must start with uppercase
- One component per file for organization
03
Step 3 of 4
Using Props
Props allow you to pass data to components.
javascript
// Button.jsx
function Button({ text, color, onClick }) {
return (
<button
className="btn"
style={{ backgroundColor: color }}
onClick={onClick}
>
{text}
</button>
);
}
// App.jsx
function App() {
const handleClick = () => alert('Clicked!');
return (
<div>
<Button text="Submit" color="blue" onClick={handleClick} />
<Button text="Cancel" color="red" onClick={handleClick} />
</div>
);
}Field note
- Props are read-only
- Destructure props for cleaner code
04
Step 4 of 4
Managing State with useState
State allows components to remember information.
javascript
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
<button onClick={() => setCount(count - 1)}>
Decrement
</button>
<button onClick={() => setCount(0)}>
Reset
</button>
</div>
);
}Field note
- Always use setState to update state
- State updates trigger re-renders
Guide complete
