React is a library developed and maintained by Facebook. React is used for creating reusable user interface components.
All the examples will be using klipse interactive plugin. Do feel free to edit the examples on the fly and see the results.
Note: Don't change the container variable in
ReactDOM.render for any examples.
I would like to thank each and everyone who wrote wonderful blogs, articles on Reactjs which helped me to learn a lot of things. This is an attempt to bring all concepts together with working examples. Hope you enjoy this book. Happy learning !!
Note: All the content seen in block quotes is taken directly from docs
React is one of the popular front-end libraries and has good developer community support. It is used at Facebook, Instagram, Airbnb etc... In production. Its key features include server-side rendering, concept called Virtual DOM, which Facebook claims will help in faster rendering of DOM elements and Unidirectional data flow.
React is the main library used to create elements, components, implement life cycle hooks etc... Where as ReactDOM is the hook between React and native DOM. In simple words, we use ReactDOM mostly once in our application to hook React component into actual DOM.
Hello World !! example looks like below.
ReactDOM.render( <h1>Hello World !!</h1>, document.getElementById('container'));
It prints header "Hello World !!" inside DOM element with id "container"
ReactDOM takes three parameters react element, container DOM element and optional callback. Callback is triggered when react element is successful loaded or updated. Here render() method of ReactDOM will bind react component into container DOM element and kick starts your React application.