History lesson: what are class components in React?

Ofer Lis — Wed, 27 Sep 2023 14:48:56 +0000

Class Components: The Old Guard

As young developers using and learning React for the last few years, we are mostly familiar with functional components.

But class components are a topic that is often asked about in job interviews. Let me take you on a brief history lesson.

In the realm of React development, class components were once the undisputed champions. They were the go-to choice for building reusable and dynamic user interface elements. Why were they so popular, and why did developers rely on them for so long?

Class components, also known as stateful components, offered a structured way to create and manage complex UI elements. Developers could define a JavaScript class that extended React.Component, and within that class, they could encapsulate the component's logic, state, and lifecycle methods. Each class had to have a render method to show that returned the JSX. This approach provided a clear and organized structure for building dynamic web applications.

Here's a quick overview of the defining characteristics of class components:

1. Lifecycle Methods:

Class components came equipped with a range of lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. These methods allowed developers to respond to component events and manage side effects.

2. State Management:

Class components had a built-in state management system using this.state, enabling them to hold and update data that influenced the component's behavior and rendering.

3. Richer Feature Set:

In the earlier days of React, class components offered more advanced features for handling complex scenarios. They were essential for managing local component state, making network requests, and handling form submissions.

4. Component Hierarchy:

Class components were instrumental in organizing component hierarchies in larger applications. They allowed developers to create a clear structure for their code, making it easier to reason about and maintain.

import React, { Component } from 'react';

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

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

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

export default ClassComponent;

The Rise of Function Components

Fast forward to React 16.8, and a seismic shift occurred in the React ecosystem with the introduction of functional components. Functional components, often referred to as stateless or presentational components, were initially seen as lightweight and simplistic alternatives to class components. However, they've since become the new standard for React development. But why?

1. Simplicity:

Functional components, as the name suggests, are based on JavaScript functions. They are inherently concise and straightforward. This simplicity makes them easier to write, read, and maintain.

2. No More Classes:

Gone are the days of defining classes and constructors. Functional components allow you to define UI elements as pure functions that take in props and return JSX. This reduction in boilerplate code is a breath of fresh air for developers.

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

3. The Power of Hooks:

React's development team introduced hooks like useState and useEffect with functional components. These hooks revolutionized the way we handle state and side effects, bringing them on par with what class components offered.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

4. Community Adoption:

The React community overwhelmingly embraced functional components and hooks, leading to a wealth of resources, libraries, and best practices. This collective shift in focus away from class components has accelerated their decline.

Conclusion

In conclusion, class components, once the stalwarts of React development, have gradually taken a back seat to functional components. The simplicity, reduced boilerplate code, and the introduction of hooks have made functional components the preferred choice for modern React applications. As a developer, understanding both class and functional components will enable you to navigate legacy codebases while harnessing the power and elegance of functional components in your new projects.

ChatGPT: how I used it to convert HTTP requests to OpenAPI document

Ofer Lis — Mon, 10 Jul 2023 13:12:45 +0000

Hi everyone! 👋
As a junior software developer, I try to learn as much as I can about new technologies and how to enhance my skills.
Contributing to open-source projects is one of the best ways to do that.

The following article shows one of my recent contributions to
Sharkio, using ChatGPT.

What is Sharkio? 🦈

Sharkio is a developer tool for API developers. It makes the developer's work easier by aggregating and presenting the requests sent to our services in a clean and clear UI. It also allows the mocking of HTTP requests to make it easier for backend and frontend developers to work efficiently together.
Sharkio is an open-source project written in TS with a growing community and a long list of features requested by its developers and users.

My contribution - HTTP requests to OpenAPI

My contribution to Sharkio focused on a highly requested feature: auto-generation of standardized OpenAPI documentation using recorded HTTP requests. This feature addresses the need for consistent and comprehensive documentation in API development.

Why use ChatGPT?

Using ChatGPT in my development process was a game-changer. It reduced the time spent on formatting the OpenAPI document structure, saving me hours of research. This freed up my focus to prioritize coding and implementation, leading to greater efficiency and productivity in my work.

My prompt:

and the chat's output:

A few prompts later, I end up with 3 interface to represent the OpenAPI document:

I modified the code to match the code structure, extracted interfaces and added a form to get the name and version type in the UI.

You could see the code [in the PR].(https://github.com/idodav/sharkio/pull/95)

The outcome was a form and a page to create an OpenAPI document using HTTP requests:

Join us 👨‍💻 👩‍💻

If you're interested in learning more about Sharkio, I invite you to visit the repository and explore the project. Feel free to use the tool, provide feedback, and join the growing community of contributors. We welcome developers of all levels of expertise to join us on this exciting journey.

DEV Community: Ofer Lis