Scribd
Upload
16 views

React - 4

react-4

Uploaded by

balapadmarajum
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views

React - 4

react-4

Uploaded by

balapadmarajum
Copyright
© © All Rights Reserved
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