Class Based Component Vs Function Based Component In React Js

Understanding Class Components & Creating React App (News App) 🚀 In React, components are the building blocks of any application. There are two types of components: ✔ Class Components
✔ Function Components
Earlier, React applications were mainly built using Class Components. But now, Function Components with Hooks are more popular.

In this tutorial, we will learn:

What is a Class Component?

A Class Component is a JavaScript class that extends React.Component and must contain a render() method which returns JSX.

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello from Class Component 👋</h1>;
  }
}

export default Welcome;

Function Component Example

Function Components are simple JavaScript functions that return JSX.

function Welcome() {
  return <h1>Hello from Function Component 👋</h1>;
}

export default Welcome;

Difference Between Class & Function Components

Step 1: Create a New React App

Let’s create a new React project named News App.

npx create-react-app news-app

Step 2: Navigate to Project Folder

cd news-app

Step 3: Run the Application

npm start

Your React app will start on:
http://localhost:3000

Step 4: Create a Class Component in News App

import React, { Component } from "react";

export class News extends Component {
  render() {
    return (
      <div>
        <h2>Welcome to News App 📰</h2>
        <p>Latest news will appear here...</p>
      </div>
    );
  }
}

export default News;

Features and Learnings:-