Class Component in React.js - #8 #ClassComponent #ReactJS #ReactDevelopment #FrontendDevelopment

#ClassComponent #ReactJS #ReactDevelopment #JavaScript #FrontendDevelopment #WebDevelopment #ReactComponents #Programming #CodeWithReact #ReactJSLifecycle #StateManagement #ComponentBasedArchitecture #LearnReact #ReactJSBasics #ReactJSTutorials

Defining a Class Component
Class components are JavaScript classes that extend from React.Component. They must include a render() method, which returns the JSX to be rendered.

Basic Structure
Here's the basic structure of a class component:

JSX code
import React, { Component } from 'react';

class MyComponent extends Component {
render() {
return (
div
h1Hello, world!/h1
/div
);
}
}

export default MyComponent;
Adding Props

Example with Props
JSX code:
import React, { Component } from 'react';

class Greeting extends Component {
render() {
}
}

export default Greeting;
In this example, Greeting takes a name prop and displays it.

To use this component:

JSX code:
import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

function App() {
return (
div
Greeting name="Alice" /
Greeting name="Bob" /
/div
);
}

Chapter :
00:00 Introduction
00:08 Basic Structure
00:45 Adding Props (Properties)
01:11 How to use Component
01:33 Summery

Thank you for watching this video
Everyday Be coding