React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.

– Official React Documentation

Glossary:

React JS and React have been used interchangeably throughout the blog and mean the same thing.

React Native: React code that is usable across the web and  mobile.

Angular: MVC framework for UI.

Transpiler: A type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language. Transpiler and compiler can be used interchangeably.

DOM: Document Object Model is a tree of HTML objects.

Note: This blog has been written entirely from my perspective and is what I feel as a newbie to the world of React.

Let’s get started.

There’s a lot of good buzz about React out there.

It seems like React JS has become a library many want to try out but somehow, it’s always out of reach. This blog is aimed towards the audience who is looking for a perfect mix of theory and hands-on.

What is React?

React provides you a templating language and some function holders to primarily render HTML. That’s all React yields, HTML. React is mainly the view layer. React is listed in the same verticals as other JavaScript frameworks but ‘React vs Angular’ doesn’t make sense at all because they aren’t directly comparable. Angular is a complete framework (including the view layer).

Is it worth the hype? Why is it getting so popular?

These are some of the benefits which make React JS standout among its contemporaries:

• Easy to learn and easy to use:  Being able to do awesome things is great, but only if you don’t have to spend the rest of your life becoming perfect in a new technology. React is easy to learn and easy to use and comes with a good supply of documentation and an exponentially growing community.

  
  A Github Stars History for Angular, React & Vue (Source)

• Components: Everything in React is a component (will be explained later on). They are like the basic building blocks for your application . Components help you break your design into smaller parts that can be worked upon.
• The Virtual DOM: One of the really cool parts of React is the virtual DOM. Usually, when you develop an app that has a lot of user interaction and data changes, you have to carefully notice how your app’ design is going to influence performance. Even with quick client side browsers, extensive DOM manipulation can be a performance deteriorator and result in an annoying user experience. Worse, because the DOM is tree-structured, simple changes at the top level can cause huge problems. React caters this by using a virtual DOM. This is, as the name implies, a virtual representation of the DOM. Any new view changes are first performed on the virtual DOM, which lives in memory and not on your screen.

An efficient algorithm then determines the changes made to the virtual DOM to identify the changes that need to be made to the real DOM. It then determines the most suitable way to make these changes and then applies only those changes to the real DOM. This ensures a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around.

All that is fine but what’s up with all that jargon ?

• Component: A React app comprises of components. A component is a reusable piece of code which defines how some features should look. All the parts you see in the below picture can be broken down into different components like the button, the display panel, all clubbed as a single component.
• Properties (props): We can pass data to our components that remain unchanged throughout the lifecycle of that component. We can even pass methods as data in our props.
• State: A state, as the name suggests, defines the state of a component. Unlike props, they can change on user-based interactions and internal calculations. Think of them as observable data that control the behaviour of the component. 
• JSX: It is basically a flavour of JS that can constitute HTML as well. It is highly intelligible. JSX (JavaScript Extended) is not understood by the browser. So, the browser doesn’t freak out, we use a transpiler like Babel which converts JSX into regular JS and renders HTML out of it.

We will take up something to code on React in the next part of this blog…

My view about React Js 

Coming from JAVA background and having noob level knowledge about fronted (JS, CSS, HTML) lingo, React JS didn’t feel like something that couldn’t be done. A basic syntax of JS (maybe ECMA 6) is what you need to know to get started.

Effort required is a lot less as compared to other JS libraries and frameworks ( Angular for example).
Also when you know that you are getting into something that is largely industry friendly and has a great developer community, it just feels the right thing to do.
React JS when combined with react-router and react-bootstrap, serves as a complete package.

When I first encountered JSX as HTML being written inside JS, the idea itself sounded crazy. I thought why would anybody want that. But
after spending some time with it, everything made a lot of sense. The ability to re-render components based on state changes in the most efficient way is what makes React stand apart.