Chapter-17 PropsTypes
====================
Step-1 :- App.js
=========================
import React, { Component } from 'react'
import { PropTypes } from "prop-types";
export default class App extends Component {
constructor(props)
{
super(props);
this.state={
roll:this.props.id,
name:this.props.name
}
}
render() {
return (
<div>
<h1>Roll No : {this.state.roll}</h1>
<h1>Roll No : {this.state.name}</h1>
</div>
)
}
}
App.PropTypes={
id:PropTypes.number.isRequired,
name:PropTypes.string.isRequired
}
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);
const eid ="101";
const ename = "Nani";
data.render(<App id={eid} name={ename}/>);
Chapter-18 Default PropTypes
============================
Step-1 App.js
-------------------
import React, { Component } from 'react'
import { PropTypes } from "prop-types";
export default class App extends Component {
constructor(props)
{
super(props);
this.state={
roll:this.props.id,
name:this.props.name
}
}
render() {
return (
<div>
<h1>Roll No : {this.state.roll}</h1>
<h1>Name is : {this.state.name}</h1>
</div>
)
}
}
App.propTypes={
id:PropTypes.number.isRequired,
name:PropTypes.string.isRequired
}
App.defaultProps={
id:501,
name:"Nani"
}
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);
const eid ="101";
const ename = "Nani";
data.render(<App id={eid} name={ename}/>);
Chapter -19 Children
====================================
Step-1 App.js
--------------------------
import React, { Component } from 'react'
import { PropTypes } from "prop-types";
export default class App extends Component {
constructor(props)
{
super(props);
this.state={
roll:501,
name:"King"
}
}
render() {
return (
<div>
<h1>Roll No : {this.state.roll}</h1>
<h1>Name is : {this.state.name}</h1>
<h1>Data : {this.props.children}</h1>
</div>
)
}
}
App.propTypes={
id:PropTypes.number.isRequired,
name:PropTypes.string.isRequired
}
App.defaultProps={
id:501,
name:"Nani"
}
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);
const ename = "Nani"
data.render(<App>My name is : {ename}</App>);
Chapter-20 :- Changing State Properties
===============================
Step-1 App.js
-------------------
import React, { Component } from 'react'
export default class App extends Component {
constructor(props)
{
super(props);
this.state={
roll:501,
name:"King"
}
}
dataclick=()=>{
this.setState({roll:101,name:"Nani"})
}
render() {
return (
<div>
<h1>Roll No : {this.state.roll}</h1>
<h1>Name is : {this.state.name}</h1>
<button onClick={this.dataclick}>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/>);
Chapter-21 :- Changing State Properties
================================
Step-1 App.js
--------------------
import React, { Component } from 'react'
export default class App extends Component {
constructor(props)
{
super(props);
this.state={
ticket:0
}
}
dataclick=()=>{
this.setState({ticket:this.state.ticket+1})
}
render() {
return (
<div>
<h1>Book Movie Tickets : {this.state.ticket}</h1>
<button onClick={this.dataclick}>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/>);
Chapter-22 :- Changing State Properties
===============================
Step-1 App.js
-------------------
import React, { Component } from 'react'
import "./index.css"
export default class App extends Component {
constructor(props)
{
super(props);
this.state={
ticket:0
}
}
dataclick1=()=>{
this.setState({ticket:this.state.ticket+1})
}
dataclick2=()=>{
this.setState({ticket:this.state.ticket-1})
}
render() {
return (
<div>
<h1>Book Movie Tickets : {this.state.ticket}</h1>
<button className='b1' onClick={this.dataclick1}>+</button>
<button className='b1' onClick={this.dataclick2}>-</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/>);
Chapter -23 :- Reading State & Props Properties
====================================
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/>);
