Building Your First App with React

1. Why Choose React?

React is a powerful and widely-used JavaScript library developed by Meta (formerly Facebook) for building user interfaces. It is renowned for:

• Its component-based architecture which promotes reusability and maintainability.
• A virtual DOM that ensures high performance and efficiency.
• A massive ecosystem and community support, with millions of developers worldwide.

React is perfect for both small projects and large-scale applications such as Instagram, Airbnb, and Netflix.

2. Setting Up Your Development Environment

To get started, install Node.js and npm. These are essential tools for managing your project's dependencies and running your app. Once installed, run:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

This scaffolds your project and runs a development server at http://localhost:3000.

3. Components: The Building Blocks of React

React components can be either functional or class-based. Here’s a simple functional component:

function Welcome() {
    return <h1>Welcome to My First React App!</h1>;
}

Integrate this inside your App.js:

function App() {
    return (
        <div>
            <Welcome />
        </div>
    );
}

4. What is JSX?

JSX allows you to mix HTML with JavaScript, making your UI logic and layout coexist. Example:

const element = <h1>Hello, React!</h1>;

JSX looks like HTML but compiles into React.createElement() calls.

5. Managing State with Hooks

React introduced useState to handle component-level state:

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

6. Handling Forms and User Input

Controlled components let React manage input state:

function NameInput() {
    const [name, setName] = useState('');

    return (
        <div>
            <input 
                type="text" 
                value={name} 
                onChange={(e) => setName(e.target.value)} 
                placeholder="Enter your name" 
            />
            <p>Hello, {name}!</p>
        </div>
    );
}

7. Styling Your App

You can style React components with:

• External CSS files
• CSS-in-JS libraries (e.g., styled-components)
• Inline styles

Basic external CSS import:

import './App.css';

8. Props: Making Components Dynamic

Props make your components reusable:

function Greeting({ name }) {
    return <h1>Hello, {name}!</h1>;
}

Usage:

<Greeting name="Alice" />
<Greeting name="Bob" />

9. Fetching Data with useEffect

Use the useEffect hook to fetch external data:

import { useEffect, useState } from 'react';

function DataFetcher() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((res) => res.json())
            .then((json) => setData(json));
    }, []);

    return (
        <ul>
            {data.map((user) => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}

10. Deploying Your App

You can deploy your app via:

• Netlify - drag and drop build folders.
• Vercel - seamless with GitHub integration.
• GitHub Pages - deploy via gh-pages branch.

11. Best Practices

• Keep components small and focused.
• Write meaningful commit messages.
• Leverage React DevTools for debugging.
• Organize components in a clean folder structure (e.g., /components, /hooks).

12. Conclusion

Congratulations! 🎉 You now have a functional React app. This is just the beginning of your React journey. As you advance, explore routing (React Router), state management libraries (Redux, Zustand), and advanced hooks.

Next: Learn advanced React topics like Context API and Custom Hooks

---

Author: Hitesh Kanjariya | Full Stack Developer & Blogger