Category Archives: React.Js

SUBSCRIBE TO UI STREET

WHY IS REACT JS MORE POPULAR THAN ANGULARJS?

Why is React JS more popular than AngularJS?

There are two reasons for the shift from AngularJS over to React. First, and the one that triggered interest, is speed. React was much faster and more memory efficient than Angular.

The second reason is more expansive and is what carried React into the stratosphere. Basically, the conception of React is more in-line with where the modern web is going.

AngularJS was born from the first era of web application development. To with, it was an era focused on the DOM. Coders wrote HTML and CSS then attached functionality to it with JavaScript. JQuery is nothing more than a DOM manipulation library, and AngularJS’s raison d’etre was literally to be what HTML would have been like if it had been created with applications in mind. The DOM was paramount.

React rejects the DOM as a thing. Instead, all that exists is the JavaScript application. The state of the application that outputs the DOM. The DOM is a result, not a thing. That is a massive paradigm shift. Suddenly, web pages are genuine applications.

React’s architectural concept was also more elegant and easier to understand. AngularJS relied on dirty-checking, where every component in the application was checked for changes ten times. It was a huge kluge (rhyming unintentional) and was slow as molasses with large DOMs.

React instead maintains a DOM state that is just a big JavaScript object. When the user does something, React creates a new DOM object and compares it to the old one. Any differences are then rendered to the UI. This is very easy to understand and very elegant.

This new philosophy now dominates and AngularJS has been completely obviated. Vue, Ember, Angular 2+, Bobril, and Aurelia all rely on some sort of virtual DOM or another, even though their change detection schemes are different. This new era has pushed frameworks to speeds that were unimaginable just two years ago, and much of this transition is thanks to React.

SUBSCRIBE TO UI STREET

TOP THINGS EVERY REACT.JS BEGINNER SHOULD KNOW

Top Things Every React.Js Beginner Should Know

React.js is presently the most hyped front-end framework(view). In this article we are trying to list out things every React.js beginner should know. We have pointed out top five reasons why React.js can be confusing. So let us get started.

IT’S JUST A VIEW LIBRARY

Let us get the basics out of the way. React is not another MVC framework, or any other kind of framework. It is just a library for rendering your views. If you are coming from the MVC world, the developer need to realise that React is just the ‘V’, part of the equation, and they need to look elsewhere when it comes to defining their ‘M’ and ‘C’, otherwise the developer is going to end up with some really disgusting React code.

JSX IS NOT HTML OR XML

React is meant at being developer friendly. It uses an XML-like syntax called JSX. It will appear like normal HTML, but has few catches. Class is a reserved keyword so the developer has to use className, this means the developer cannot use their HTML code directly, they have to do a bunch of replacements.

## Normal HTML

<div class=”row” … >

## Syntax for React

<div className=”row” …>

There are other catches the developer need to remember, they cannot use independent HTML tags such as <br> and <input>, it is required to close them like <br/> and <input />

MULTIPLE SYNTAX OPTIONS

Javascript is developing very fast with the advent of these new front-end frameworks. The current syntax is called as ES6, which is a bit different than the older version. This can be very confusing if the developer does not know this. In your quest to find something you may find resources which can be following the older syntax or the newer one.

## Older Syntax

var aComponent = React.createClass({

function: render() { … }

});

## Newer ES6 Syntax class ComponentB extends React.Component

{ render() { … } }

STATES & PROPS

Dynamic apps must need to pass data around the system. In React, data movement happens mostly among components and external services that provide the original data (eg HTTP, localStorage).

Props are immutable and dumb which means they can only be passed from parent components down and it cannot be changed. This poses a challenge because, modern applications do not rely on having all of its states ready on page load. Ajax or Events could happen and when data returns, someone needs to be responsible for making updates. This is where React states comes in.

COMPONENT INTERACTION

What if we had a button (or more) in a child component that incremented and decremented an integer managed in a parent component. What do we do?

React component interaction comes in two forms i.e., flow of data from parent to child component and flow of data from child to parent.

To achieve child to parent data flow in react, we use handlers passed in to the child component through the parent component as props. The parent knows that such activity could occur in its child so it sets up a handler when the activity occurs.

SUBSCRIBE TO UI STREET

ADVANTAGES & DISADVANTAGES OF REACT.JS

Advantages & Disadvantages of React.JS

The world is changing on a daily basis, it’s hard to devote your time to learn new frameworks especially when the framework is ultimately becoming a stand-off. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like iOS, Android, and many more.

WHAT IS REACT?

React (sometimes referred as React.js or ReactJS) is a Javascript library created by a collaboration of Facebook and Instagram. It allows developers to create fast user interfaces. React views are typically rendered using components that contain additional components specified as custom HTML tags. One of the unique features of React.js is not only it can perform on the client side, but it can also be rendered on the server side, and they can work together interoperably.

It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the resulting differences, and then updates the browser’s displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change while the React libraries only render the subcomponents that actually changes.

Every framework has its own advantages and disadvantages. Let’s see the major pros and cons of React.js.

THE GOOD:
React.js is extremely efficient: React.js creates its own virtual DOM where your components actually live. This approach gives you enormous flexibility and amazing gain in performance. React.js also calculates what are the changes needed to be made in DOM. This process of React.js avoids expensive DOM operations and make updates in a very cient manner.

It makes writing Javascript easier: React.js uses a special syntax called JSX, which allows you to mix HTML with Javascript. The user can drop a bit of HTML in the render function without having to concatenate strings, this is another fantastic thing. React.js turns those bits of HTML into functions with a special JSXTransformer.

It gives you out-of-the-box developer tools: When you start your journey with React.js, do not forget to install official React.js chrome extension. It makes debugging your application much easier. After you install the extension, you will have a direct look into the virtual DOM as if you were browsing a regular DOM tree in the elements panel. Isn’t it pretty amazing!

It’s awesome for SEO: One of the biggest issue with Javascript frameworks is that they are not search engine friendly. Though there have been some improvements in this area, search engines generally have trouble reading Javascript heavy applications. React.js stands out from the crowd because you can run React.js on the server, and the virtual DOM will be rendered to the browser as a regular web page.

UI Test Cases: It is extremely easy to write UI test cases because the virtual DOM system implemented entirely in JS.

THE BAD:
* React.js is only a view layer.
* Integrating React.js into a traditional MVC framework such as rails would require some configuration (i.e., substituting erb with React.js).
* There is a learning curve for beginners who are new to web development.

WHY YOU SHOULD USE REACT.JS:
* React.js works great for teams, strongly enforcing UI and workflow patterns.
* The user interface code is readable and maintainable.
* And also, there is now a lot of demand for developers with ReactJS experience.