Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

React.js and Front-End Development

DZone 's Guide to

React.js and Front-End Development

React has quickly become one of the most popular ways to make a front-end app. But is the hype justified? Read on and decide.

· Web Dev Zone ·
Free Resource

With more than 1,300 developers and over 94,000 sites utilizing React.js, it wouldn't be an overstatement to call React the future of front-end development. After all, Fortune 500 companies like Facebook, PayPal, Uber, Instagram, and Airbnb utilize this JavaScript-based UI library for a major part of their applications’ front-end development for web as well as mobile.

Before React Arrived

When React came around, Angular was the only major contender in the JS framework space. While Angular was a very complete framework (it still is), it was a nightmare for developers. They had to do a lot of coding, and with a steep learning curve even for seasoned JavaScript developers, AngularJS was never the most desirable way to build JS applications. It has more functionalities than most developers need.

React Isn’t a Framework

react is not a framework

Then came React.js and it revolutionized the way web applications are developed. However, React isn’t an MVC framework unlike Angular; it is a ‘view’ only library. That is, React.js doesn’t include state managers, routers, and API managers in the core library. It may look like a limitation to you but for React developers, this is simplicity at its best because front-end development in React centers around the React ecosystem, not just the core element, which at the end of the day removes unnecessary complications.

React Ecosystem

React Ecosystem

Technically speaking, developers can expand what the core React library can do via additional libraries. Using React together with those libraries forms the React ecosystem. For example, there is Redux for state management, React Router for routing, and Axios to facilitate API interactions. Tens of thousands of such libraries are part of the React Ecosystem. Unlike Angular, templates aren’t part of the React ecosystem. React doesn’t use templates rather; instead, it uses components. 

React Uses Components

This may be a no-brainer for most web developers and those looking to develop React applications. Just like not being an MVC framework has its advantages, the depreciation of templates also does. If you look closer, HTML templates restrict the set of abstractions you can include in your UIs.

There is a reason React is called the best library for building UIs. The way it approaches building user interfaces is unique yet approachable. React.js breaks UIs into independent, reusable pieces, and isolated components. This is how you define a component, ‘Welcome,’ in ES6.

react components

Moreover, you don’t have to write down every component while building applications in React. There are many component libraries available in the React ecosystem: React Material-UI, React-Bootstrap, and React Belle are a few examples.

All these awesome UI tips may make you think, 'don’t they bog down performance of the resulting application due to extensive DOM manipulations?' That’s a valid argument but did I mention the Virtual DOM?

Note: DOM elements form the part of an application the user sees.

The Virtual DOM

Extensive DOM manipulations are a known bottleneck to a web app’s performance regardless of how fast the client platform and the JavaScript engine is.

If you look at the image above, the DOM has a tree-like structure and simple change on the top level may take some time to reflect on the lower levels. This may delay UI responses and ultimately add hurdles to the user experience.

Virtual DOM

Fortunately, React solves the problem with a layer of the Virtual DOM between the user layer and actual DOM. The Virtual DOM is a virtual representation of the DOM, and it stays in memory rather than the user's screen. So the question arises, what goes on the user's screen?

Note: The Virtual DOM is conspicuous by its absence in Angular.

An algorithm keeps track of the changes made on the virtual DOM and determines which changes must make it to the real DOM and, thus, the user's screen. Let’s say the application contains a few React components with their own logic and rendering. Since React is fundamentally JavaScript, a single change in one of the components will manipulate the entire DOM, which, if it happens frequently, may affect the performance as I described above.

This is where the Virtual DOM comes in. It absorbs any changes to the DOM and keeps them in memory. The algorithm then detects on which component the change was made and updates that part of the DOM. This change will be reflected on the user's screen without disturbing the other components.

In React applications, only the component changes. That means that the page remains the same regardless of user interaction. So how can you make the page discoverable to search engines?

Server-Side Rendering

Server-Side Rendering Your React App to Output HTML Content

React needs server-side rendering to deliver an HTML response when a user or crawler hits a page. We handle the requests on the client-side and render the React components on the server.

A major problem is Google's crawlers can’t yet render JavaScript. That is the crawler will return a blank page upon rendering a block of JavaScript code. To make React pages understandable to Google crawlers, we need server-side rendering for React.

With server-side rendering, React will render JavaScript pages with the same consistency they do HTML and XML pages. Better SEO will ensure your web application is more discoverable by search engines and return a better value.

JSX and Final Thoughts

The idea of mixing JavaScript with HTML may sound intimidating at first. Purist web developers even feel guilty mixing the two.

jsx

JSX is actually a syntax extension to JavaScript, which is like template languages except it comes with the full power of JavaScript. React, as I described in the section above, separates concerns with components rather than putting markup and logic in separate files. Of course, React doesn’t require JSX but it acts like a visual aid when working with user interfaces in JavaScript that no React developer tends to ignore. It also makes debugging easier with useful error codes and warnings.

Frankly speaking, whether JSX is an initiative in the right direction is a matter of great debate. While it makes coding way simpler when compared with Angular, people debate that it violates the fundamental rule of programming, separation of concerns, which is a bad coding practice in the first place.

Topics:
web dev ,react.js ,front-end development ,react developers

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}