What is the difference between Functional and Class Components? | Tekolio

What is a component?

State and Props

Difference between State and Props

Difference between the functional and class components

Functional Components

Syntax

import React from 'react'

const App = () => {
return (
<>

</>
)
}

export default App

Class Components

Syntax

import React, { Component } from 'react'

export class App extends Component {
render() {
return (
<>

</>
)
}
}

export default App

Ex — Making a Counter that increases and decreases itself when the button is clicked

Using Functional Components

import React, {useState} from 'react';
const App = () => {

const[Input, setInput] = useState(0)
const Increase = () => {
setInput(Input + 1);
}

const Decrease = () => {
if(Input > 0) {
setInput(Input - 1);
}else{
setInput(0);
alert("Reached minimum value")
};
}
return(
<>
<div className="main">
<div className="text_area">{Input}</div>
<br /><br/>
<button className="one" onClick={Increase}>Increase</button>
<button className="two" onClick = {Decrease}>Decrease</button>
</div>
</>
)
}
export default App;

Using Class Components

import React from "react";

class ClassComponent extends React.Component{
constructor(){
super();
this.state={
count :0
};
this.increase=this.increase.bind(this);
}

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

render(){
return (
<div style={{margin:'50px'}}>
<h1>Welcome to Geeks for Geeks </h1>
<h3>Counter App using Class Component : </h3>
<h2> {this.state.count}</h2>
<button onClick={this.increase}> Add</button>
</div>
)
}
}

export default ClassComponent;

Conclusion

--

--

--

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ateev Duggal

Ateev Duggal

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

More from Medium

All About Prototypes in JS

Challenge By Controlled Forms In A Mock Interview

Overview of React JS in 2 minutes

Overview of React Js

React.js Basics: Context API (Hook)

Component Structure For Context API