React Fundamentals

React has become one of the most popular JavaScript libraries for building user interfaces due to its simplicity, flexibility, and efficiency. In this article, we will explore the fundamentals of React, including JSX, components, props, state, and lifecycle methods, and provide illustrative examples to help you understand these key concepts.

1. JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write UI components using a syntax that closely resembles HTML. It provides a more readable and concise way to describe the UI components.

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

ReactDOM.render(element, document.getElementById('root'));

2. Components and Props

React components are the building blocks of a React application. They are reusable and encapsulate the UI logic. Props are used to pass data from parent to child components.

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

ReactDOM.render(<Welcome name="John" />, document.getElementById('root'));

3. State and Lifecycle

State allows React components to create and manage their own data. Lifecycle methods are special methods that execute at specific phases in a component's lifecycle.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ date: new Date() });
  }

  render() {
    return <h2>It is {this.state.date.toLocaleTimeString()}.</h2>;
  }
}

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

4. Handling Events

React events are named using camelCase, rather than lowercase. With JSX, you pass a function as the event handler, rather than a string.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };
  }

  handleClick = () => {
    this.setState((prevState) => ({
      isToggleOn: !prevState.isToggleOn,
    }));
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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

5. Conditional Rendering

Conditional rendering allows you to display different UI elements based on certain conditions.

const Greeting = (props) => {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
};

ReactDOM.render(<Greeting isLoggedIn={false} />, document.getElementById('root'));

6. Lists and Keys

Lists are a fundamental part of React applications. The map() function is often used to render a list of items.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);

ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

7. Forms and Controlled Components

Forms in React are slightly different from traditional HTML forms, and they often use controlled components to manage form data.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

Conclusion

React is a powerful library with a rich set of features and concepts that are essential for building modern web applications. In this article, we've covered some of the key React concepts, including JSX, components, props, state and lifecycle, handling events, conditional rendering, l