Discover React.js Advanced Techniques: Components and State Handling

Introduction

Welcome back to our four-part series on React.js! In Part 1 🔗 , we discussed why React.js is a powerful framework for building dynamic web applications.

Now, in Part 2, we will delve deeper into the core concepts of React.js, including components, state, and props. By mastering these concepts, you'll gain a solid foundation to create more complex and interactive applications. So let's continue our React.js journey and unlock its full potential.

Components

The Building Blocks of React.js At the heart of React.js lies its component-based architecture. Components are the building blocks of React applications, allowing you to encapsulate reusable and self-contained pieces of the user interface.

• Functional Components

  Functional components are JavaScript functions that return JSX (JavaScript XML) elements. They are simpler and have concise syntax. Here's an example of a functional component:

import React from 'react';

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

• Class Components

  Class components are ES6 classes that extend the React.Component class. They offer additional features such as lifecycle methods and local state management. Here's an example of a class component:

import React, { Component } from 'react';

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

  render() {
    return <h2>Count: {this.state.count}</h2>;
  }
}

export default Counter;

State and Props

Managing Data in React.js State and props are essential concepts in React.js for managing and passing data between components.

• State

  State represents the internal data of a component. It allows components to manage and update their data over time. To initialize state in a class component, use the constructor() method. Here's an example:

constructor(props) {
  super(props);
  this.state = {
    count: 0,
  };
}

To update state, use the setState() method provided by the Component class:

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

• Props

  Props (short for properties) are read-only values passed from a parent component to its child components. They allow components to receive data and configuration from their parent. Here's an example of passing props to a functional component:

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

// Usage
<Greeting name="John" />;