Understand Functional/Class Component & Props in ReactJS speak khmer

Hi everyone, in this tutorial I will show you how to use Functional Component and Class Component along with Props in both Components.
If you have watch video how to setup React project with Vite can watch video here.

Functional Component

A Functional Component is simple and modern way to create component. It uses a JavaScript function that takes props as an argument and returns JSX.

The Features:

Does not require a class; just a function.

Before React 16.8, functional components were stateless.

Easier to write and read, with less code.

More ReactJS playlist

1.Getting start with ReactJS + Vite (Video Tutorial)
2.Understand Functional/Class Component & Props
3.Basic Events Handling in ReactJS plus Form Event
4.React State Management: Functional vs. Class Components and Handling Multiple States
Basic Routing with React Router

Class Component

A class component is a more traditional way to create components.

The Features:

Requires extending the React.Component class.

Can maintain and manage internal state using this.state.

Lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount are used for handling side effects.

Can handle complex logic but requires more boilerplate code.

Video example of Functional Component vs Class Component in ReactJS with shortcuts

What is Props in ReactJS

props (short for "properties") are used to pass data from a parent component to a child component.

Video Example of using Props in Functional vs Class Component

ReactJS + Vite :Back 👈 👉 Next:Basic Events Handling