02-Functional and Class Component with Props in ReactJS with Video in Khmer

Hello my friends! Today let me show you step by step how to use Functional Component and Class Component in ReactJS, and how to pass Props between components! Very easy explanation with code examples and video demo in Khmer!

1. What is a Component in ReactJS?

A Component is like a custom building block or reusable piece of code that returns JSX (HTML inside JavaScript) to display on your web page. Learn more in the React Official Component Docs. If you haven't setup your project yet, check out 01 - Get Started with ReactJS + Vite first!

In ReactJS, we have 2 main types of components:

1. Functional Component (Modern & Standard)
2. Class Component (Legacy way)

Functional Component (Modern Way)

A Functional Component is just a simple JavaScript function that returns JSX. It is lighter, faster, and used everywhere in modern React development!

Example Welcome.jsx (Functional Component):

function Welcome() {
  return <h1>Hello, Welcome to my React Website!</h1>;
}

export default Welcome;

💡 Tip: In VS Code with ES7 Snippets extension, type rafce and press Tab — VS Code will generate a complete Functional Component boilerplate automatically!

Class Component (Legacy Way)

A Class Component is an ES6 class extending React.Component. It uses render() method to return JSX syntax.

Example WelcomeClass.jsx (Class Component):

import React, { Component } from 'react';

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

export default WelcomeClass;

💡 Tip: In modern React (React 16.8+), developers always prefer Functional Components with Hooks (useState, useEffect) over Class Components because code is cleaner and less boilerplate!

Watch Video: Functional Component vs Class Component in ReactJS with Shortcuts (Khmer)

2. What is Props in ReactJS?

Props (short for properties) are custom inputs passed from a Parent component down to a Child component — just like passing arguments into a JavaScript function!

Props allow your components to be dynamic and reusable with different data.

Using Props in Functional Component

In Functional Component, props are received as an argument in function parameter.

Child Component (UserCard.jsx):

// Destructuring props directly in parameter
function UserCard({ name, role }) {
  return (
    <div className="card">
      <h2>Name: {name}</h2>
      <p>Role: {role}</p>
    </div>
  );
}

export default UserCard;

Parent Component (App.jsx):

import UserCard from './UserCard';

function App() {
  return (
    <div>
      <UserCard name="Sok Dara" role="Web Developer" />
      <UserCard name="Keo Bopha" role="UI/UX Designer" />
    </div>
  );
}

export default App;

Using Props in Class Component

In Class Component, props are accessed inside render() method using this.props.

Child Component (UserCardClass.jsx):

import React, { Component } from 'react';

class UserCardClass extends Component {
  render() {
    const { name, role } = this.props;
    return (
      <div>
        <h2>User: {name}</h2>
        <p>Job: {role}</p>
      </div>
    );
  }
}

export default UserCardClass;

💡 Tip: Props in React are read-only (immutable)! A child component must NEVER modify its own props. If you want to change data dynamically inside a component over time, check out 05 - ReactJS State Management (useState)! Read more on the official React Props Guide.

💡 Tip: Use ES6 object destructuring const { name, role } = props so you don't need to write props.name or this.props.name many times!

Watch Video: Example of using Props in Functional vs Class Component (Khmer)

💡 Next Lesson: Move on to 03 - Basic Event Handling and Form to make your components interactive!

---

Hope this post helps you understand Functional vs Class components and Props in ReactJS! Don't forget to practice coding and watch the Khmer video tutorials. Happy coding my friends! Sharing is caring!