In This Blog, you are going to learn working of constructor in react app and also you are going to learn super keyword and its working with source code.
Constructor Definition According To JavaScript OOP
- In OOP, Constructor is a member of class.
- In OOP, Constructor is used to initialize the object.
- In OOP, Constructor automatically called when an object is created.
CONSTRUCTOR IN REACT JS
- In React JS, the constructor is a method used to initialize an object’s state in a class.
- In React JS, constructor automatically called during the creation of an object in a class.
- In React JS, constructor’s concept of a constructor is the same in React.
- In React JS, If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.
- In React JS, when you implement the constructor for a React component, you need to call super(props) method before any other statement.
- In React JS, If you do not call super(props) method, this.props will be undefined in the constructor and can lead to bugs.
Source Code – Constructor In JavaScript OOP
MyScript.js
class Student
{
constructor(name, age)
{
this.name = name;
this.age = age;
// console.log("Hello I am Constructor");
}
}
const std = new Student("Adil",22);
console.log(std.name);
console.log(std.age);
const std1 = new Student("Kumar",23);
console.log(std1.name);
console.log(std1.age);
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="MyScript.js"></script>
</body>
</html>Source Code – Constructor In React JS
Code – Student.js Component
import React, { Component } from 'react'
export default class Student extends Component {
constructor(props)
{
super(props);
console.log("Constructor From Student");
}
render() {
return (
<div>
<h1>Hello World {this.props.name}</h1>
</div>
)
}
}
Code – Index.js File
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import MyClass from './MyClass';
import Student from './Student';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<Student name="Adil" />
</>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Download Notes & Source Code Of This Blog From The Link Given Below
https://www.mediafire.com/file/55orat5stu6uu6u/CONSTRUCTOR+IN+React+JS.rar/file
No responses yet