React.createElement()
function, giving us expressiveness of JavaScript along with HTML like template syntax.<h1>
tag is returned as JavaScript function to the render function.class App extends React.Component {
render() {
return(
<div>
<h1>{'Welcome to React world!'}</h1>
</div>
)
}
}
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>
}
class Greeting extends React.Component {
render() {
return <h1>{`Hello, ${this.props.message}`}</h1>
}
}
React.PureComponent
is exactly the same as React.Component
except that it handles the shouldComponentUpdate()
method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won't compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate
is called. class User extends React.Component {
constructor(props) {
super(props)
this.state = {
message: 'Welcome to React world'
}
}
render() {
return (
<div>
<h1>{this.state.message}</h1>
</div>
)
}
}
render()
mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, <group>,<div>
etc. This function must be kept pure i.e., it must return the same result each time it is invoked.