{"id":7801,"date":"2024-03-23T17:27:57","date_gmt":"2024-03-23T11:57:57","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=7801"},"modified":"2024-03-23T17:28:03","modified_gmt":"2024-03-23T11:58:03","slug":"react-class-components","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/react-class-components\/","title":{"rendered":"React Class Components"},"content":{"rendered":"\n

In Class base component has 2 features
1.State Management
2.Life Cycle Feature
Disadvantages<\/strong>
we cant not hooks in class base components
FORMATE OF CLASS COMPONENET<\/strong><\/p>\n\n\n\n

example:
import React,{Component} from ‘react’<\/p>\n\n\n\n

import Display from ‘.\/Display’
export default class App extends Component {<\/p>\n\n\n\n

state={<\/p>\n\n\n\n

name:”React”,<\/p>\n\n\n\n

}
render(){
return(<\/p>\n\n\n\n

<div><\/p>\n\n\n\n

<center>
<Display data={this.state.name}\/><\/p>\n\n\n\n

<br \/><\/p>\n\n\n\n

<button onClick={()=>this.setState({name:”Owner”})}>Change <\/button>
<\/center>
<\/div><\/p>\n\n\n\n

)
}
}
from above example declared a state varible and used
Props for class components <\/strong>
create js file with display
import React,{Component} from ‘react’<\/p>\n\n\n\n

export default class Display extends Component {<\/p>\n\n\n\n

render(){<\/p>\n\n\n\n

return(<\/p>\n\n\n\n

<div>
<h1>{this.props.data}<\/h1>
<\/div><\/p>\n\n\n\n

)<\/p>\n\n\n\n

}<\/p>\n\n\n\n

<\/p>\n\n\n\n

}
Life Cycle Of Components
3 types of components
1.Mounting
2.Updating
3.Un Mounting
1.Mounting<\/strong>
It is used to Putting Elements into DOM
mounting has 4 Buit-In Methods
1.Constructor()
2.getDerviedStateFromProps()
3.render()
4.ComponentDidMount()
<\/p>\n","protected":false},"excerpt":{"rendered":"

In Class base component has 2 features 1.State Management2.Life Cycle FeatureDisadvantageswe cant not hooks in class base componentsFORMATE OF CLASS […]<\/p>\n","protected":false},"author":504,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-7801","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-21P","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/504"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=7801"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7801\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=7801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=7801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=7801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}