Learn Basics of React.js in 11 Minutes

If you are new to React.js this tutorial will give you introduction to all basic concepts in react.

What and Why?

This article is not going to cover details of what and why? Although you should be knowing by now that React is a JavaScript library aimed to create user interfaces and used extensively by social networking platforms like Facebook and Instagram to name a few.. It is fast, responsive, modular, we can create reusable files. It is scalable and flexible. Many more advantages but we will jump right into some basic concepts.

What is Virtual DOM?

• DOM(Document Object Model) is the UI components, like elements, attributes.
• Virtual DOM is node tree listing of components, which is light weight in memory representation of real DOM.
• The render() method in react creates it.
• Each time the underlying data changes, new virtual DOM is created, comparing differences between previous virtual DOM and only the changes are updated in real DOM.
• So, the special thing about ReactDOM.render() is that it only updates DOM elements that have changed. Aha!!!

What is JSX?

• JavaScript extension, JSX is not valid JavaScript that browsers can read. It’s a JavaScript file…