Setting Up Your Development Environment

create-react-app is a utility that enables rapid creation of a React development environment. Built on top of Webpack, it abstracts away configuration complexity and provides an out-of-the-box solution. Execute the following command:

npx create-react-app my-react-app

Breakdown of the command:

1. npx is a Node.js utility for finding and executing npm packages
2. create-react-app is the core package (standard syntax)
3. my-react-app is the project name (customizable)

If the above command fails, try using yarn instead:

yarn create react-app my-react-app

Alternative methods for creating React projects are also available.

Understanding JSX

JSX stands for JavaScript XML (HTML) and represents a syntax extension that allows developers to write HTML template structures directly with in JavaScript code. It serves as React's primary approach for building UI templates.

const greeting = 'Welcome to our app';

function App() {
    return (
        <div>
            <h1>This is the heading</h1>
            {greeting}
        </div>
    );
}

Benefits of JSX:

1. Declarative template syntax similar to HTML
2. Full programming capabilities from JavaScript

How JSX Works Under the Hood

JSX is not native JavaScript syntax—it's a syntax extension that browsers cannot interpret directly. It requires transformation through build tools before execution in the browser.

A JSX expression like:

<div>
    Sample content
</div>

Gets transformed into:

import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("div", {
  children: "Sample content"
});

You can observe this transformation process using the Babel REPL website.

Embedding JavaScript Expressions in JSX

JSX supports curly brace syntax for embedding JavaScript expressions, including variables, functon invocations, method calls, and more.

function App() {
    const count = 42;

    return (
        <div className="app-container">
            Main content
            {/* String literals */}
            {'Welcome message'}
            {/* Variable references */}
            {count}
            {/* Function invocations */}
            {getUserName()}
            {/* Method calls */}
            {new Date().getFullYear()}
            {/* Object usage - outer braces for JSX, inner braces for object literal */}
            <div style={{color: "blue"}}>Styled content</div>
        </div>
    );
}

Rendering Lists

• Use JavaScript's native map method to iterate and render list items in JSX

const users = [
    {id: 1, name: 'alice'},
    {id: 2, name: 'bob'},
    {id: 3, name: 'charlie'}
];

function App() {
    return (
        <div className="app-container">
            <ul>
                {users.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

Key considerations: Include a unique key prop for each item (string or number, typically using id). Keys help React's internal reconciliation process optimize updates.

Conditional Rendering

• React supports basic conditional rendering through logical AND operators and ternary expressions

const isAuthenticated = true;

function App() {
    return (
        <div className="app-container">
            {isAuthenticated && <span>User is logged in</span>}
            {isAuthenticated ? <span>Welcome back</span> : <span>Please login</span>}
        </div>
    );
}

For more complex scenarios:

const postType = 2;

function renderContent() {
    if (postType === 0) {
        return <div>Text-only post</div>;
    } else if (postType === 1) {
        return <div>Single image post</div>;
    } else {
        return <div>Gallery post</div>;
    }
}

function App() {
    return (
        <div className="app-container">
            {renderContent()}
        </div>
    );
}

Event Handling

Basic click handler:

function App() {
    const handleClick = () => {
        console.log('Button was clicked');
    };

    return (
        <div className="app-container">
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

Accessing the event object:

function App() {
    const handleClick = (event) => {
        console.log('Button clicked', event);
    };

    return (
        <div className="app-container">
            <button onClick={handleClick}>Click me</button>
        </div>
    );
}

Passing custom arguments:

function App() {
    const handleClick = (username) => {
        console.log('Button clicked by', username);
    };

    return (
        <div className="app-container">
            <button onClick={() => handleClick('admin')}>Click me</button>
        </div>
    );
}

Passing both the event object and custom parameters:

function App() {
    const handleClick = (username, event) => {
        console.log('Button clicked by', username, event);
    };

    return (
        <div className="app-container">
            <button onClick={(e) => handleClick('admin', e)}>Click me</button>
        </div>
    );
}

Note: The event binding requires a function reference, not a direct function call. Use arrow function syntax when you need to pass arguments.