The componentDidCatch() method

This method allows us to catch the JavaScript errors in React Components. We can log those errors and display another fallback UI instead of the component tree that crashed.

Now we have a clear idea about component methods that are available in React Components.

Observe the following JavaScript code snippet:

<section>
<h2>My First Example</h2>
</section>
<script>
var root = document.querySelector('section').createShadowRoot();
root.innerHTML = '<style>h2{ color: red; }</style>' +'<h2>Hello World!</h2>';
</script>

Now, observe the following ReactJS code snippet:

var sectionStyle = {
color: 'red'
};
var MyFirstExample = React.createClass({
render: function() {
return (<section><h2 style={sectionStyle}>
Hello World!</h2></section>
)}
})
ReactDOM.render(<MyFirstExample />, renderedNode);

Now, after observing the preceding examples of React and JavaScript, we will have a clear idea of normal HTML encapsulation and ReactJS custom HTML tags.

React isn't an MVC framework; it's a library for building a composable user interface and reusable components. React is used at Facebook in its production stages and instagram.com is entirely built on React.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset