Your First React Application

Now that you have your development environment set up, let's build your first interactive React application! We'll create a simple counter app that demonstrates the core concepts of React.

Starting Your Project

If you haven't already created a React project, let's create one now:

# Create a new React project
npx create-react-app my-first-react-app

# Navigate to the project directory
cd my-first-react-app

# Start the development server
npm start

Your React app should now be running at http://localhost:3000.

Understanding the Default App

Let's first understand what Create React App gives us by default. Open src/App.js:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Breaking It Down:

1. Import Statements: We import the logo image and CSS styles
2. Function Component: App is a React functional component
3. JSX Return: The function returns JSX (JavaScript XML)
4. Export: We export the component so it can be used elsewhere

Building Your First Interactive Component

Let's replace the default content with our own interactive counter app. Replace the content of src/App.js with:

import React, { useState } from 'react';
import './App.css';

function App() {
  // Declare a state variable called 'count' with initial value 0
  const [count, setCount] = useState(0);

  // Function to handle increment
  const handleIncrement = () => {
    setCount(count + 1);
  };

  // Function to handle decrement
  const handleDecrement = () => {
    setCount(count - 1);
  };

  // Function to reset counter
  const handleReset = () => {
    setCount(0);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>My First React App</h1>
        <div className="counter-container">
          <h2>Counter: {count}</h2>
          <div className="button-group">
            <button onClick={handleDecrement} className="counter-btn">
              -
            </button>
            <button onClick={handleReset} className="counter-btn reset">
              Reset
            </button>
            <button onClick={handleIncrement} className="counter-btn">
              +
            </button>
          </div>
        </div>
      </header>
    </div>
  );
}

export default App;

Adding Styles

Now let's add some styles to make our app look better. Replace the content of src/App.css with:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  padding: 40px;
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

.counter-container {
  background-color: #3a3f47;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  margin: 20px;
}

.counter-container h2 {
  font-size: 2.5rem;
  margin-bottom: 30px;
  color: #61dafb;
  text-shadow: 0 0 10px rgba(97, 218, 251, 0.3);
}

.button-group {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

.counter-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 15px 25px;
  font-size: 1.5rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
  min-width: 60px;
}

.counter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.counter-btn:active {
  transform: translateY(0);
}

.counter-btn.reset {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  min-width: 100px;
}

.counter-btn.reset:hover {
  box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
}

@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
  }
  
  .counter-btn {
    width: 100%;
    max-width: 200px;
  }
}

Understanding the Code

Let's break down what we just built:

1. React Hooks - useState

const [count, setCount] = useState(0);

• useState is a React Hook that lets you add state to functional components
• count is the current state value
• setCount is the function to update the state
• 0 is the initial value

2. Event Handlers

const handleIncrement = () => {
  setCount(count + 1);
};

• Event handlers are functions that respond to user interactions
• We use setCount to update the state
• React will automatically re-render the component when state changes

3. JSX Elements and Event Binding

<button onClick={handleIncrement} className="counter-btn">
  +
</button>

• onClick is a JSX attribute that binds the click event
• {handleIncrement} is the function to call when clicked
• className is used instead of class (JavaScript reserved word)

4. State Interpolation

<h2>Counter: {count}</h2>

• {count} displays the current state value
• Curly braces {} let you embed JavaScript expressions in JSX

Key React Concepts Demonstrated

1. Component-Based Architecture

• Everything in React is a component
• Components are reusable pieces of UI
• Components can have their own state and logic

2. Declarative Programming

• You describe what the UI should look like
• React handles how to update the DOM
• No manual DOM manipulation needed

3. Unidirectional Data Flow

• Data flows down from parent to child components
• Events flow up from child to parent components
• State changes trigger re-renders

4. React Hooks

• Hooks let you use state and other React features in functional components
• useState is the most basic hook for managing component state

Experimenting with Your App

Try these modifications to understand React better:

1. Add a Step Counter

function App() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  const handleIncrement = () => {
    setCount(count + step);
  };

  const handleDecrement = () => {
    setCount(count - step);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>My First React App</h1>
        <div className="counter-container">
          <h2>Counter: {count}</h2>
          <div className="step-control">
            <label>Step: </label>
            <input 
              type="number" 
              value={step} 
              onChange={(e) => setStep(Number(e.target.value))}
              min="1"
            />
          </div>
          <div className="button-group">
            <button onClick={handleDecrement} className="counter-btn">
              -{step}
            </button>
            <button onClick={() => setCount(0)} className="counter-btn reset">
              Reset
            </button>
            <button onClick={handleIncrement} className="counter-btn">
              +{step}
            </button>
          </div>
        </div>
      </header>
    </div>
  );
}

2. Add Color Changes Based on Value

function App() {
  const [count, setCount] = useState(0);

  // Determine color based on count value
  const getCountColor = () => {
    if (count > 0) return '#4CAF50'; // Green for positive
    if (count < 0) return '#f44336'; // Red for negative
    return '#61dafb'; // Blue for zero
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>My First React App</h1>
        <div className="counter-container">
          <h2 style={{ color: getCountColor() }}>
            Counter: {count}
          </h2>
          {/* ... rest of the component */}
        </div>
      </header>
    </div>
  );
}

3. Add Conditional Messages

function App() {
  const [count, setCount] = useState(0);

  const getMessage = () => {
    if (count === 0) return "Start counting!";
    if (count > 10) return "Wow, that's a lot!";
    if (count < -10) return "Going pretty low!";
    if (count > 0) return "Positive vibes!";
    return "Going negative...";
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>My First React App</h1>
        <div className="counter-container">
          <h2>Counter: {count}</h2>
          <p className="message">{getMessage()}</p>
          {/* ... buttons */}
        </div>
      </header>
    </div>
  );
}

Common Beginner Mistakes

1. Mutating State Directly

❌ Wrong:

const handleIncrement = () => {
  count++; // Don't mutate state directly
};

✅ Correct:

const handleIncrement = () => {
  setCount(count + 1); // Use the setter function
};

2. Forgetting to Import useState

❌ Wrong:

import React from 'react';
// useState not imported

✅ Correct:

import React, { useState } from 'react';

3. Using class Instead of className

❌ Wrong:

<button class="counter-btn">Click me</button>

✅ Correct:

<button className="counter-btn">Click me</button>

Developer Tools

Open your browser's React Developer Tools (if you installed them) and:

1. Inspect Components: See the component tree
2. View State: Check the current state values
3. Debug Changes: Watch state updates in real-time

What You've Learned

Congratulations! You've built your first interactive React application. Here's what you've accomplished:

✅ Created a functional component with state
✅ Used the useState hook to manage component state
✅ Handled user events with onClick handlers
✅ Applied conditional styling and logic
✅ Structured JSX with proper syntax
✅ Styled your component with CSS

Practice Exercises

Try building these variations to reinforce your learning:

Exercise 1: Temperature Converter

Create a component that converts between Celsius and Fahrenheit.

Exercise 2: Todo Item

Build a single todo item that can be marked as complete/incomplete.

Exercise 3: Color Picker

Create a component with buttons that change the background color.

Exercise 4: Name Greeter

Build an input field that shows a personalized greeting.

Next Steps

In the next lesson, we'll dive deeper into JSX - the syntax that makes React components so powerful and expressive. You'll learn:

• JSX syntax rules and best practices
• Embedding expressions in JSX
• JSX vs regular JavaScript
• Common JSX patterns and techniques

Keep experimenting with your counter app and try adding new features. The best way to learn React is by building and breaking things!

Troubleshooting

App not updating when buttons are clicked?

• Check that you're using setCount to update state
• Make sure you imported useState from React
• Verify that your event handlers are properly bound

Styles not applying?

• Check that you imported the CSS file
• Verify className spellings match your CSS
• Use browser dev tools to inspect applied styles

Build errors?

• Check for missing semicolons or brackets
• Verify all imports are correct
• Make sure JSX is properly closed

Great job building your first React app! You're now ready to explore more advanced React concepts.