#2 Components in React

Functional vs. Class Components

React components can be written as either functional or class components. Each type has its own syntax and use cases.

Functional Components

Functional components are simpler and easier to read. They are plain JavaScript functions that accept props as arguments and return React elements. Since React 16.8, functional components can also handle state and lifecycle methods using hooks.

import React from 'react';

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

export default Greeting;

Class Components

Class components, on the other hand, are ES6 classes that extend from React.Component. They have a render method that returns React elements. Before hooks, class components were the only way to handle state and lifecycle methods.

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

Creating and Using Components

Creating components in React involves defining a component function or class and then using it within other components.

1. Define the Component

Functional Component:

import React from 'react';

function Welcome(props) {
  return <h1>Welcome, {props.name}!</h1>;
}

export default Welcome;

Class Component:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Welcome, {this.props.name}!</h1>;
  }
}

export default Welcome;

2. Using the Component

You can use your custom components just like HTML elements within other components.

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

export default App;

Component Lifecycle (Class Components)

Class components have several lifecycle methods that you can override to run code at particular times in the component’s life.

1. Mounting: These methods are called when an instance of a component is being created and inserted into the DOM.
   • constructor()
   • static getDerivedStateFromProps()
   • render()
   • componentDidMount()
2. Updating: These methods are called when a component is being re-rendered as a result of changes to its props or state.
   • static getDerivedStateFromProps()
   • shouldComponentUpdate()
   • render()
   • getSnapshotBeforeUpdate()
   • componentDidUpdate()
3. Unmounting: This method is called when a component is being removed from the DOM.
   • componentWillUnmount()

Example of using lifecycle methods:

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

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

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

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

export default Timer;

Props and State

Props

Props (short for properties) are read-only attributes passed from parent to child components. They allow data to flow down the component tree.

import React from 'react';

function User(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default User;

State: State is a built-in object that holds data or information about the component. State can be modified using this.setState in class components or the useState Hook in functional components.

Class Component with State:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Functional Component with State:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Conclusion

React components are essential for building modern web applications. Understanding the differences between functional and class components, how to create and use them, the component lifecycle, and how to manage props and state will help you build more efficient and maintainable applications. In the next chapters, we’ll dive deeper into advanced component patterns and best practices.

#React #JavaScript #FrontendDevelopment #WebDevelopment #ReactComponents #FunctionalComponents #ClassComponents #ComponentLifecycle #Props #State #Programming #Coding #SoftwareDevelopment #UIDevelopment #ReactTutorial