Difference between this two js in react - reactjs

Question

I start to learn React JS and anyone can explain me the difference between those two files? Both of them do the same thing.
First JS
import React, { useEffect, useState } from 'react'
import Product from './Product';
import './Today.css';
import { Link } from 'react-router-dom';
import { render } from '#testing-library/react';
export default class Today extends React.Component {
state = {
loading : true,
fixture : null
};
async componentDidMount() {
const OPTIONS = {
method : 'GET',
headers : {
'X-RapidAPI-Host' : 'api-football-v1.p.rapidapi.com',
'X-RapidAPI-Key' : '###'
}
};
const url = 'https://api-football-v1.p.rapidapi.com/v2/fixtures/date/2020-07-18';
const response = await fetch(url,OPTIONS);
const fixtures = await response.json();
this.setState({ fixture: fixtures.api.fixtures, loading: false});
const teamData = fixtures.api && fixtures.api.fixtures > 0 ? fixtures.api.fixtures : [];
console.log(this.state);
}
render() {
return (
<div className="today">
{this.state.loading || !this.state.fixture ? (
<div><img src=""/></div>
) : (
<div>
<div>
{this.state.fixture.slice(0,10).map(fixtureToday => (
<div>{fixtureToday.homeTeam.team_name}</div>
))}
</div>
</div>
)}
</div>
)
}
}
Second one
import React, { useState, useEffect } from 'react';
import './AnotherDay.css';
import { Link } from 'react-router-dom';
function AnotherDay() {
useEffect(() => {
fetchItems();
},[]);
const OPTIONS = {
method : 'GET',
headers : {
'X-RapidAPI-Host' : 'api-football-v1.p.rapidapi.com',
'X-RapidAPI-Key' : '###'
}
};
const [fixtures, setItems] = useState([]);
const fetchItems = async () => {
const data = await fetch(
'https://api-football-v1.p.rapidapi.com/v2/fixtures/date/2020-07-18' , OPTIONS
);
const fixtures = await data.json();
const teamData = fixtures.api && fixtures.api.fixtures.length > 0 ? fixtures.api.fixtures : [];
console.log(teamData);
setItems(teamData);
}
return (
<div>
{fixtures.slice(0,10).map(fixture => (
<div>{fixture.homeTeam.team_name}</div>
))}
</div>
);
}
export default AnotherDay;
And in the App.js I have
import React from 'react'
import './Today.css';
import { Link } from 'react-router-dom';
import Today from './Today ';
import AnotherDay from './EvenimenteMaine';
function TodayEvents() {
return (
<div className="today">
<div className="todayEvents">
<Today />
</div>
<div className="anotherDayEvents">
<AnotherDay />
</div>
</div>
)
}
export default TodayEvents
I have the same result in the both divs. My question is, what is the difference? The first one is a class and the second one is a function?
Which one is the correct way?
Thanks, maybe is a noob question but I'm new to learning React.

Answer 1

The first example is a class component the second one is a functional component. React development is moving away from classes toward the functional components. useEffect is supposed to replace several life cycle functions from class components.
Two things to look into functional components and class components. The second set of things to look up is life cycle functions and functional component hooks.
Here is a link that will explain at a high level the differences.
https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg