Project Initialization

Initialize a new React application using the Create React App toolchain:

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

Streamline the project structure by retaining only essential files within the src directory: App.js and index.js.

Entry Points and Component Hierarchy

The index.js file serves as the application bootstrap, importing the root App component and mounting it to the DOM node identified as root:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
const root = ReactDOM.createRoot(domNode);
root.render(<App />);

The App component functions as the root container:

function App() {
  return (
    <div className="application">
      <h1>Application Root</h1>
    </div>
  );
}

export default App;

Understanding JSX Syntax

JSX extends JavaScript syntax to incorporate HTML-like templates directly within code. This delcarative approach combines markup with JavaScript logic, requiring transpilation for browser compatibility.

Embedding JavaScript Expressions

Curly braces {} demarcate JavaScript expressions within JSX, supporting variables, function invocations, and object references:

function App() {
  const user = 'Alice';
  const currentDate = new Date().toLocaleDateString();
  const calculateValue = () => Math.floor(Math.random() * 100);
  
  const visualStyles = {
    color: 'crimson',
    fontWeight: 'bold'
  };

  return (
    <div>
      <p>{'String literals'}</p>
      <p>User: {user}</p>
      <p>Generated: {calculateValue()}</p>
      <p>Today: {currentDate}</p>
      <div style={visualStyles}>Styled content</div>
    </div>
  );
}

Rendering Collections

Transform arrays into UI elements using the map method. Each rendered element requires a unique key property for efficient reconciliation:

function App() {
  const technologies = [
    { key: 1, label: 'TypeScript' },
    { key: 2, label: 'Rust' },
    { key: 3, label: 'Go' }
  ];

  return (
    <ul>
      {technologies.map(tech => (
        <li key={tech.key}>{tech.label}</li>
      ))}
    </ul>
  );
}

Conditional Rendering Patterns

Implement conditional logic using the logical AND operator (&&) or ternary expressions (condition ? true : false):

function App() {
  const isAuthenticated = true;
  const userRole = 'admin';

  return (
    <div>
      {isAuthenticated && <span>Welcome back</span>}
      
      {userRole === 'admin' 
        ? <button>Admin Panel</button> 
        : <span>Standard User</span>}
    </div>
  );
}

For complex conditional logic, encapsulate rendering logic within functions:

function App() {
  const contentType = 2; // 0: text, 1: image, 2: video

  const renderContent = () => {
    switch(contentType) {
      case 0: return <div>Text Article</div>;
      case 1: return <div>Image Gallery</div>;
      default: return <div>Video Player</div>;
    }
  };

  return <div>{renderContent()}</div>;
}

Event Handling Mechancis

Attach event listeners using camelCase attributes prefixed with on. Event handlers receive the synthetic event object as an argument:

function App() {
  const handlePress = (evt) => {
    console.log('Interaction detected', evt.target);
  };

  return <button onClick={handlePress}>Activate</button>;
}

Passing custom parameters requires arrow function wrappers to prevent immediate execution during render:

function App() {
  const processAction = (identifier, evt) => {
    console.log(`Processing ${identifier}`, evt.type);
  };

  return (
    <button onClick={(e) => processAction('item-123', e)}>
      Execute
    </button>
  );
}

Component Composition

React components are functions returning JSX, distinguished by PascalCase naming. Compose applications by nesting components as tags:

const ActionButton = () => {
  return <button>Perform Action</button>;
};

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

State Management with useState

The useState Hook introduces reactive state to functional components. It returns a state value and a setter function:

import { useState } from 'react';

function App() {
  const [score, setScore] = useState(0);

  const increment = () => {
    setScore(prev => prev + 1);
  };

  return (
    <button onClick={increment}>
      Current Score: {score}
    </button>
  );
}

State updates must preserve immutability. When modifying objects, create new references rather than mutating existing state:

function App() {
  const [profile, setProfile] = useState({ 
    username: 'developer', 
    status: 'active' 
  });

  const updateUsername = () => {
    setProfile(prevState => ({
      ...prevState,
      username: 'architect'
    }));
  };

  return (
    <div onClick={updateUsername}>
      User: {profile.username}
    </div>
  );
}

Applying Styles

React supports both inline styles (JavaScript objects) and external CSS classes:

import './styles.css';

function App() {
  const dynamicStyles = {
    backgroundColor: 'navy',
    padding: '20px'
  };

  return (
    <div>
      <span style={{ color: 'green' }}>Inline</span>
      <span style={dynamicStyles}>Object Style</span>
      <span className="highlighted">Class-based</span>
    </div>
  );
}

Practical Implementation: Comment System

The following demonstrates a complete comment interface with dynamic rendering:

import { useState } from 'react';
import './comment-styles.css';

const initialThreads = [
  {
    id: 101,
    author: { id: 'u1', handle: 'sarah_dev', avatar: '/avatars/sarah.png' },
    body: 'Excellent implementation details!',
    timestamp: '2 hours ago',
    likes: 24
  },
  {
    id: 102,
    author: { id: 'u2', handle: 'mike_codes', avatar: '/avatars/mike.png' },
    body: 'Could you explain the state management further?',
    timestamp: '5 hours ago',
    likes: 12
  }
];

const CommentSystem = () => {
  const [threads, setThreads] = useState(initialThreads);

  return (
    <section className="discussion-panel">
      <header>
        <h3>Discussion ({threads.length})</h3>
      </header>
      
      <div className="comment-stream">
        {threads.map(thread => (
          <article key={thread.id} className="comment-card">
            <img 
              src={thread.author.avatar} 
              alt={thread.author.handle}
              className="avatar"
            />
            <div className="content">
              <header className="meta">
                <span className="author">{thread.author.handle}</span>
                <time>{thread.timestamp}</time>
              </header>
              <p className="text">{thread.body}</p>
              <footer className="actions">
                <span>❤ {thread.likes}</span>
                <button>Reply</button>
              </footer>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

export default CommentSystem;