Scribd
Upload
6 views

11 A

The document discusses how to create and use class components in React. It explains key concepts like state, properties, lifecycle methods and updating state using setState. An example BankAccount class component is provided to demonstrate these concepts in action.

Uploaded by

venkateshkodi236
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

11 A

The document discusses how to create and use class components in React. It explains key concepts like state, properties, lifecycle methods and updating state using setState. An example BankAccount class component is provided to demonstrate these concepts in action.

Uploaded by

venkateshkodi236
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

\\---------------------------------------------------------------------------------

-------------------------

=> class
=> super() super(props)
=> javascript object
=> this.state I
=> this.props | props
=> this.setState()
=> onChange()
=> handler method
=> .bind(this)

\\---------------------------------------------------------------------------------
-------------------------

01)class component rastey---> react import cheyali eg:import React from


"react";

02)extends-->provides relationship parenent(React.component) & chilid


(BankAccount)-
-means parentprotery ani child lo vasthayi
03)constructor() rastey super() rayali lekuntety-> this.state is not defined
error vasthadhi
constructor lo super() andhukuantey--> React.component proerty
tesukoravadam kosam
04) super() payiana am rasina avi work kavvu eg below:
ex:
constructor()
{
this.state={a:1,b:3}// super paina rayakudahu
super()
}
}

04)constructor(props) rastey super(props) rayali lekuntety-> this.state is not


defined error vasthadhi
props-->property-->inputparameter

05)this.state...? or what is state in react js?


=> this.state is nothing but a Private property of a class component >or It
is a mutable property of a class component
=> It is used to maintain internal state inside a class
component(BankAccount sambandinchina data maintaining)
=> but using this.state, we can't pass any data from one component to
another, because every class component contains it's own state
note: this.state not used in functional component

ex: javascript lo object alano react lo this.state anneydhi data hold chesathdhi
// js var object={ id:1,name:"venkatesh"}

// react this.state={
accountName:'venkatesh',
accountNumber:'11111111'
}
06) class component data screen medha disply kosam render() method use
chesthamu
07) retrun lo div andhuku--> div anney tag anni tags ni combine or group
chesthadhi--> to display multilple tags at time
08) constructor,render class component oka lifecycle methods
09)this.state or state vunna data ni update cheyalantey handlechange method
usechesthamu(custom->user defined not component lifecycle method) endhulo
//this.setState({}) use chesthamu
//handle mehod work kavalantwey compulsry constructor lo bind cheyali

ex
handleChange()
{
this.setState({accountName:'pony'})
}

\\---------------------------------------------------------------------------------
-------------------------
src folder under create BankAccount.js

import React from "react";

class BankAccount extends React.Component


{
constructor()
{
super()

this.state={
accountName:'venkatesh',
accountNumber:'11111111',
ifsCode:'SBIN00021',
branchName:'naspur',
city:"mancherial"
}

this.handleChange=this.handleChange.bind(this) ;
}

handleChange()
{
this.setState({accountName:'pony',accountNumber:'2222222',
ifsCode:'andhraN00021',branchName:'srnagar',city:"Hydrebad"})
}

render()
{
return(<div>
<h1>{this.state.accountName}</h1>
<h1>{this.state.accountNumber}</h1>
<h1>{this.state.ifsCode}</h1>
<h1>{this.state.branchName}</h1>
<h1>{this.state.city}</h1>
<button onClick={this.handleChange}> change data</button>
</div>)
}
}
export default BankAccount;

App.js injecting BanckAccoount.js

import logo from './logo.svg';


import './App.css';
import Employee from './Employee';
import BankAccount from './BankAccount';

function App()
{
return (
<div className="App">
<h1> This is first functionial component</h1>
<hr></hr>

<Employee></Employee>
<BankAccount></BankAccount>

</div>
);
}

export default App;

\\---------------------------------------------------------------------------------
-------------------------
vishaka

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {


const [data, setData] = useState([]);

useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/photos")
.then((res) => res.json())
.then((json) => setData(json));
});
return (
<div className="App">
<h2> APi Data </h2>
<div className="f-wrap">
{data.map((e) => (
<div className="grid">
<div>
<img className="img-1" src={e.url} />
</div>
<div> {e.title}</div>
</div>
))}
</div>
</div>
);
}

.App {
font-family: sans-serif;
text-align: center;
}

.img-1 {
width: 200px;
height: 200px;
}

.grid {
width: 200px;
border: 1px solid #ccc;
padding: 5px;
margin:10px;
}
.f-wrap{
display:flex;
flex-wrap: wrap;
}

\\---------------------------------------------------------------------------------
-------------------------

You might also like