By using the export and import properties we can write the components separately in different files.
export default class ChildComponent
extends React.Component {
render () {
return(
<div>
<h1>This is a Child Component</h1>
</div>
)
}
}
import ChildComponent from ‘./childComponent.js’;
class ParentComponent extends
React.Component {
render() {
return (
<div>
<App />
</div>
)
}
}
Managing focus, text selection or media playback.
Triggering imperative animation.
Integrating with third-party DOM libraries.
Refs stand for References.
Used to return References to a particular element or component returned by render().
Useful when we need DOM measurements or to add methods to the components.
Cross browser wrappers around the browsers native event system.
Combines the browsers behaviors into one API.
Done to ensure events have consistent properties across different browsers.
class Display extends React.Component({
show(evt) {
//code
},
render() {
//Render the div with an onClick prop (value is a function)
return <div onClick={this.show}>Click here!</div>
}
});
Events are the triggered reaction to specific actions like mouse hover, mouse click, key press etc.
React events are similar to HTML, JavaScript events.
componentWillMount() is executed just before rendering both on client and server-side.
componentDidMount() is executed after first render only on the client side.
componentWillReceiveProps() is invoked as soon as the props are received from parent class before another render is called.
shouldComponentUpdate() returns true or false value based on certain conditions. If you want your component to update return true as return false. By default its false.
componentWillUpdate() is called just before rendering takes place.
ComponentDidUpdate() is called just after rendering takes place.
componentWillMount() is called after the component is unmounted from the dom. It is used to clear up the memory spaces.
Our company provides custom software development for businesses and also trains people with industry ready technology that help you achieve success in your career.