Start Coding :)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}

}

ReactDOM.render(
React.createElement(Hello, {toWhat: 'World'}, null),
document.getElementById('root')
);
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
state = {
name: "meena",
age: 32
}
render(){
return(
<div className="app-content">
<h1>Hi Pradeepa</h1>
<p>{ Math.random()*10 }</p>
<p>My name is: {this.state.name}</p>
<p>My age is: {this.state.age}</p>
</div>
)
}

}
ReactDOM.render(<App/>,document.getElementById('app'))
</script>
</body>
</html>
  • React Component is JavaScript code which returns HTML(JSX) dynamically. React.js library generates UI with the HTML(JSX). React.js library only updates the particular component which is needed to change with the help of virtual DOM. As a result the react application faster than other traditional web applications.

Lifecycle of Components

The three phases are: Mounting, Updating, and Unmounting.

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
state = {
name: "meena",
age: 32
}
clickMe = (e) => {
console.log(e.target+"state=="+this.state)
//this.sate.name = "ryan";
this.setState({
name: 'Ryan'
});
}
mouseOver(e){
console.log(e, e.pageX)
}
handleCopy(e){
console.log('Try to be original')
}
render(){
return(
<div className="app-content">
<h1>Hi Pradeepa</h1>
<p>{ Math.random()*10 }</p>
<p>My name is: {this.state.name}</p>
<p>My age is: {this.state.age}</p>
<button onClick={this.clickMe}>onClick</button>
<button onMouseOver={this.mouseOver}>onMouseOver</button>
<p onCopy={this.handleCopy}>What we think we become!</p>
</div>

)
}
}
ReactDOM.render(<App/>,document.getElementById('app'))
</script>
</body>
</html>
npx create-react-app my-app
cd my-app
npm start

I am open to cross-train and interested in learning new technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store