A typical React project entry point (index.js) uses ReactDOM.render to mount a root component into the DOM. Every component must import React.

import React from 'react';
import ReactDOM from 'react-dom';
import Dashboard from './Dashboard';

ReactDOM.render(<Dashboard />, document.getElementById('root'));

Class vs. Functional Components

Components can be defined as ES6 classes or functions.

Class component
Inherit from React.Component, call super(props), and implement render() to return JSX.

import React, { Component } from 'react';

class Profile extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <section>Welcome to the profile page</section>;
  }
}

export default Profile;

Functional component
A simple function that returns JSX. With arrow functions, omit the return keyword when using parentheses.

import React from 'react';

const Banner = () => (
  <header>React functional component</header>
);

export default Banner;

Managing State in Class Components

State holds component‑specific data. Initialize it in the constructor.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
      message: 'Initial state'
    };
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <span>{this.state.value}</span>
      </div>
    );
  }
}

Rendering Lists

Use JavaScript’s map to iterate over arrays and return JSX. Every element needs a unique key prop.

Single‑level list

class FruitList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fruits: ['Apple', 'Banana', 'Cherry']
    };
  }
  render() {
    return (
      <ul>
        {this.state.fruits.map((fruit, idx) => (
          <li key={idx}>{fruit}</li>
        ))}
      </ul>
    );
  }
}

Nested data (multi‑level)

class CategoryList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categories: [
        { name: 'Electronics', products: ['Phone', 'Laptop'] },
        { name: 'Clothing', products: ['Shirt', 'Jeans'] }
      ]
    };
  }
  render() {
    return (
      <div>
        {this.state.categories.map((cat, i) => (
          <div key={i}>
            <h2>{cat.name}</h2>
            <ul>
              {cat.products.map((prod, j) => (
                <li key={j}>{prod}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    );
  }
}

Separate Transformation and Rendering

You can build an array of JSX nodes first, then embed it.

class PreprocessedList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: ['react', 'redux', 'router']
    };
  }
  render() {
    const tagElements = this.state.tags.map((tag, idx) => (
      <span key={idx} className="badge">{tag}</span>
    ));

    return <div>{tagElements}</div>;
  }
}

Conditional Output

Using if/else outside JSX

class LoginPrompt extends Component {
  constructor(props) {
    super(props);
    this.state = { isLoggedIn: true };
  }
  render() {
    if (this.state.isLoggedIn) {
      return <div>Welcome back!</div>;
    }
    return <div>Please sign in.</div>;
  }
}

Ternary operator inside JSX

class StatusBadge extends Component {
  constructor(props) {
    super(props);
    this.state = { active: false };
  }
  render() {
    return (
      <p>
        Status: {this.state.active ? 'Active' : 'Inactive'}
      </p>
    );
  }
}

You can also use logical && for conditional rendering when only one branch is needed.

Key Reminders

• Components must import React. -add state inside the constructor and invoke super(props).
• Avoid if/else and for loops directly inside JSX expressions. Use map, ternary, and logical operators instead.
• Always assign a unique key when rendeering lists.