React First App
Building your first React application step by step
🎉 Your First React App
Let's build your first React application! We'll create a simple interactive app that displays a greeting message and responds to user clicks with dynamic content.
function MyFirstApp() {
return <h1>Hello, React Developer!</h1>;
}
What We'll Build
Greeting Component
Display personalized messages
Interactive Button
Handle user click events
Styled Components
Add CSS styling to elements
Dynamic Content
Update UI based on state
🔹 Step 1: Basic Component
Let's start with a simple component that displays a welcome message. This is the foundation of every React app.
// src/App.js
import React from 'react';
function App() {
return (
<div>
<h1>Welcome to My First React App!</h1>
<p>This is my first component.</p>
</div>
);
}
export default App;Output:
Welcome to My First React App!
This is my first component.
🔹 Step 2: Adding Styles
Make your app look better by adding CSS styles. You can use inline styles or external CSS files.
// src/App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="app-container">
<h1 className="title">Welcome to My First React App!</h1>
<p className="description">Learning React is fun!</p>
</div>
);
}
export default App;/* src/App.css */
.app-container {
text-align: center;
padding: 50px;
background-color: #f0f0f0;
}
.title {
color: #61dafb;
font-size: 2.5em;
}
.description {
color: #333;
font-size: 1.2em;
}Output:
Welcome to My First React App!
Learning React is fun!
🔹 Step 3: Adding Interactivity
Let's add a button that responds to clicks. We'll use a function to handle the click event.
// src/App.js
import React from 'react';
import './App.css';
function App() {
// Function to handle button click
function handleClick() {
alert('Hello! You clicked the button!');
}
return (
<div className="app-container">
<h1>Welcome to My First React App!</h1>
<p>Click the button below:</p>
<button onClick={handleClick}>
Click Me!
</button>
</div>
);
}
export default App;Output:
Welcome to My First React App!
Click the button below:
🔹 Step 4: Using State
State allows components to remember information. Let's create a counter that increases when you click a button.
// src/App.js
import React, { useState } from 'react';
import './App.css';
function App() {
// Create state variable
const [count, setCount] = useState(0);
// Function to increase count
function handleClick() {
setCount(count + 1);
}
return (
<div className="app-container">
<h1>Counter App</h1>
<p>You clicked {count} times</p>
<button onClick={handleClick}>
Click to Count
</button>
</div>
);
}
export default App;Output:
Counter App
You clicked 0 times
🔹 Step 5: Complete First App
Here's a complete first app combining everything we've learned - components, styling, events, and state.
// src/App.js
import React, { useState } from 'react';
import './App.css';
function App() {
const [name, setName] = useState('Friend');
const [count, setCount] = useState(0);
return (
<div className="app-container">
<h1>Hello, {name}!</h1>
<p>Welcome to React Development</p>
<div className="counter-section">
<h2>Button Clicks: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase Count
</button>
<button onClick={() => setCount(0)}>
Reset
</button>
</div>
<div className="input-section">
<input
type="text"
placeholder="Enter your name"
onChange={(e) => setName(e.target.value)}
/>
</div>
</div>
);
}
export default App;Output:
Hello, Friend!
Welcome to React Development
Button Clicks: 0
🔹 Understanding the Code
Let's break down what each part does in our first React app:
- useState: Creates state variables that can change
- onClick: Handles button click events
- onChange: Handles input field changes
- JSX: HTML-like syntax inside JavaScript
- Arrow Functions: Modern way to write functions
- Event Handlers: Functions that respond to user actions