Scribd
Upload
31 views5 pages

React - 4

react-4

Uploaded by

balapadmarajum
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
31 views5 pages

React - 4

react-4

Uploaded by

balapadmarajum
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/ 5

Chapter -24

============
Step-1 App.js
----------------------

import React, { Component } from 'react'


import "./index.css"

export default class App extends Component {


constructor(props)
{
super(props);
this.state={
roll:501,
City:"Hyd"
}
}
dataclick1=()=>{
( ()=>{
console.log(this.state);
console.log(this.props);
}) ();
}

render() {
return (
<div>

<button className='b1' onClick={this.dataclick1}>ClickMe</button>


</div>
)
}
}

Step-2 Index.js
-------------------------

import React from "react";


import {createRoot} from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");


const data = createRoot(container);

data.render(<App eid={101} ename="Nani"/>);

Chapter -27 Bind Operations-3


==========================

Step-1 App.js
------------------------------

import React, { Component } from 'react'


export default class App extends Component {

state= {
roll:this.props.id,
sname:this.props.name
}

datavalue=(roll) =>{
console.log("Roll no: ",roll);
console.log(this);
}

render() {
return (
<div>
<h1>Roll No : {this.state.roll}</h1>
<h1>Name : {this.state.sname}</h1>
<button onClick={ () =>{this.datavalue(this,this.state.roll)}}>Click
Me</button>
</div>
)
}
}

Step-2 Index.js
----------------------

import React from "react";


import {createRoot} from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");


const data = createRoot(container);

data.render(<App eid={101} ename="Nani"/>);

Chapter - 28 Component Mounting -1


============================

Step-1 App.js
-------------------
import React, { Component } from 'react'
import Employee from './Employee'

export default class App extends Component {


render() {
return (
<div> Result Status

<Employee ename={"ATH"} exp={10}/>

</div>
)
}
}
Student.js
----------------
import React, { Component } from 'react'

export default class Student extends Component {


render() {
return (
<div>
<h1>10 Class % : {this.props.marks1} %</h1>
<h1>12 class % : {this.props.marks2} %</h1>
<h1> Degree % : {this.props.marks3} %</h1>
</div>
)
}
}

Employee.js
---------------------

import React, { Component } from 'react'


import Student from './Student'

export default class Employee extends Component {


render() {
return (
<div>Employee
<h1>Company name: {this.props.ename}</h1>
<h1>Experience : {this.props.exp}</h1>

<Student marks1={67} marks2={72} marks3={75} />

</div>
)
}
}

Step-2 Index.js
------------------------

import React from "react";


import {createRoot} from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");


const data = createRoot(container);

data.render(<App eid={101} ename="Nani"/>);

Chapter - 29 Component Mounting -1


============================

Step-1 App.js
-------------------
import React, { Component } from 'react'
import Employee from './Employee'

export default class App extends Component {


constructor()
{
super();
this.state={
id:101,
name:"Nani"
}
}

static getDerivedStateFromProps(props,state)
{
console.log("Property is called");
console.log(props);
console.log(state)
return null;
}

componentDidMount()
{
console.log("My-Com-data")
}
render() {
return (
<div> Result Status

<Employee ename={"ATH"} exp={10}/>

</div>
)
}
}

student.js
--------------
import React, { Component } from 'react'

export default class Student extends Component {


render() {
return (
<div> Student
<h1>10 Class % : {this.props.marks1} %</h1>
<h1>12 class % : {this.props.marks2} %</h1>
<h1> Degree % : {this.props.marks3} %</h1>
</div>
)
}
}

Employee.js
---------------------
import React, { Component } from 'react'
import Student from './Student'
export default class Employee extends Component {
render() {
return (
<div>Employee
<h1>Company name: {this.props.ename}</h1>
<h1>Experience : {this.props.exp}</h1>

<Student marks1={67} marks2={72} marks3={75} />

</div>
)
}
}

Step-2 Index.js
-----------------------

import React from "react";


import {createRoot} from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");


const data = createRoot(container);

data.render(<App eid={101} ename="Nani"/>);

You might also like