Copy below HTML code into a HTML file which you like and run the HTML.
ex: Copy the code
create a test.html blank file in your PC
Paste the code and Run it.
<!DOCTYPE html>
<html>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = { username: '',
age: 10,
sex: "Male",
errormessage: '',
description: 'The content of a textarea goes in the value attribute'};
};
myChangeHandler = (xx) => {
// this.setState({username: xx.target.value});
let name = xx.target.name;
let val = xx.target.value;
this.setState({[name]: val});
}
myChangeAge = (xx) => {
// this.setState({username: xx.target.value});
let name = xx.target.name;
let val = xx.target.value;
let err = '';
if (name="age"){
if (!Number(val)){
// alert("Not a number")
err = <strong>Your age must be a number</strong>; // Error handling
}
}
this.setState({errormessage: err});
this.setState({[name]: val});
}
render() {
let header = '';
{/*Conditional rendering */}
if (this.state.username) {
header = <h1>Hello {this.state.username}</h1>;
} else {
header = '';
}
return (
<form>
{header}
<p>Enter your name:</p>
<input
type='text'
name='username'
onChange={this.myChangeHandler}
/>
<div>
<input
type='text'
name='age'
onChange={this.myChangeAge}
/>
</div>
<div>
<input
type='submit'
/>
</div>
{this.state.errormessage} {/*<-- Error message displaying */}
<textarea value={this.state.description} />
<div>
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</div>
</form>
);
}
}
class Hello extends React.Component {
render() {
return <h1>Hello {this.props.test2} !</h1>
}
// when this component is unmounted from a process, then this function getting execute
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
}
class Men extends React.Component {
constructor(props){
super(props);
this.state={
val1: 1,
val2: 2,
val3: 3,
show: false
};
}
//The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.
changeval=(props)=>{
this.setState({val1: this.props.var1});
}
//The getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.
changeva2=()=>{
this.setState({val1: 11});
}
//this keyword should represent the component that owns the method.
showval=(props)=>{
this.setState({show: this.props.show2});
};
regularfunction = function(){
document.getElementById("div3").innerHTML += this;
}
arrowfunction = () =>{
document.getElementById("div4").innerHTML += this;
}
showval2=()=>{
if (this.state.show == false)
{
this.setState({show: true});
}
else
{
this.setState({show: false});
}
}
paramfunc=(x, y)=>{
alert(x + y);
}
paramfuncevent=(x, y, ev)=>{
alert(x + y + " " + ev.type);
}
//The componentDidMount() method is called after the component is rendered.
componentDidMount() {
setTimeout(() => {
this.setState({val1: 10})
}, 8000)
}
//method is called right before rendering the element(s) in the DOM.
//first method that is called when a component gets updated.
//shouldComponentUpdate is not a matter at this level;
//***** if this method is executed, that mean, you cannot change this val1 value agaian.
//Line is commeneted due to other values not working because of this function
/*static getDerivedStateFromProps(props, state) {
return {val1: props.var1};
//changeval;
}*/
//if you need to lock the component as unmuted, then this is a way
shouldComponentUpdate() {
return true;//if false, components are never updates, default is anyway true;
}
//This will identify each state of a component and can compare with the current and the
//previouse values
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Before the update, the favorite was " + prevState.val1;
}
//Once the componen changes, this function is executing. Specially if you impliment getSnapshotBeforeUpdate()
// you must have this function too.
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"The updated favorite is " + this.state.val1;
}
render(){
let hel1;
if (this.state.show){
hel1 = <Hello test2={this.props.test2}/> ;
}
return (<div>
<h1> Men class {this.props.test} {this.state.val1} </h1>
{hel1}
<p> value is {this.state.val1} </p>
{/* Events are in Camel cases, ex: onClick(). event handlers are in {this.changeva2}, ex: onClick={this.changeva2}
A good practice is to put the event handler as a method in the component class:*/}
<div><button id="b1" type="button" onClick={this.changeva2}>Change value</button></div>
<div><button id="b2" type="button" onClick={this.showval}>Show</button></div>
<div><button id="b2" type="button" onClick={this.showval2}>Togle</button></div>
<div>
{/* with arrow functions there are no binding of "this".
In regular functions the this keyword represented the object that called the function
With arrow functions, the this keyword always represents the object that defined the arrow function
<div><button id="b3" type="button" onClick={this.regularfunction}>Show</button></div>*/}
<div><button id="b4" type="button" onClick={this.arrowfunction}>Togle</button></div>
</div>
{/* calling a function with params}*/}
<div><button id="b5" type="button" onClick={()=>this.paramfunc("Test one", " Two")}>Param func</button></div>
<div><button id="b6" type="button" onClick={(ev)=>this.paramfuncevent("Test one", " Two", ev)}>Param func event</button></div>
<div id="div1"></div>
</div>) ;
}
}
ReactDOM.render(<Men test="woow" test2="xx" var1="8" show2={true}/>, document.getElementById('mydiv2'))
ReactDOM.render(<MyForm />, document.getElementById('div6'));
</script>
<body>
<div id="mydiv2"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div6"></div>
</body>
</html>
No comments:
Post a Comment