Learn ReactJs using Interactive Examples

React is a library developed and maintained by Facebook. React is used for creating reusable user interface components.

The target audience is JavaScript developers who are willing to learn ReactJs and for developers who wants to have a quick reference for all the topics in one place. To start working with ReactJS, you should have knowledge of JavaScript, HTML5 and CSS. All the examples use ES6 syntax, so having knowledge of these standards would be helpful.

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.

Prior to v15 React came as single library, but was split into two libraries React and ReactDOM. The main reason for splitting up the library is the introduction of React Native.

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.