ReactJS - What is it?

So . . . How About React?

What happens when an impressive Facebook engineer gets assigned to port XHP - a PHP version primarily relied upon for data validation and scrubbing to combat XSS - to JavaScript and maybe gets a bit carried away with it [5]? React! ReactJS (also known as React.js or simply React) is a library of Javascript, a programming language pivotal in the rendering of webpage elements alongside HTML and CSS . While some libraries generally try to incorporate and adapt ‘the wheel’ to make some specialized processes easier, React joins the ranks of the increasingly many that set out to completely reinvent it in many parts.

Image courtesy of xpagexplorer.org [15]

Basically, what is it?

Basically speaking, Javascript is a programming language that can be used to alter the content of the website’s layout. ReactJS, like any library, utilizes its base language to ease and optimize complex sets of operations. Its features rework many elements considered fundamental in the modern browser’s data rendering scheme [2,3] implementing a reactive programming approach [1, 9, 15] and more efficient methods of DOM manipulation[1, 2, 4, 6, etc]. All of this is done to both simplify the building process and make more efficient and scalable products, aiding the whole way with complex algorithms and design principles present under the hood.

So, how does it do it?

We’ve said that it does stuff efficiently, but explaining it is a lot harder. What does it mean to use Virtual DOMs and how does it benefit over using the standard DOM (on that note, what’s a DOM , anyways [7])? How does React utilize a “diffing” heuristic tree-updating algorithm with O(n) complexity [6, 11]?Using immutable objects to speed up processes [4, 5]? A reactive language [1, 2, 9]? Clearly, there are both a lot of fundamentals and innovations to learn. While everything is not 100% better than some of the other new alternatives - specialization does this - but the stark benefits have allowed the library to make a strong presence, being relied upon by sites like Netflix, Walmart, and Airbnb [11].

Image courtesy of cleveroad.com [11]

In order to understand this, one has to dive into computer science constructs and conventions that are utilized throughout modern computing. Methods of efficient and optimized design are stretched across the computer science discipline, securing implementation in many modern and future computing machines. In general, what has been implemented in React can be applied to a variety of systems in some capacity regardless of proximity to websites. Concepts such as data trees, comparison algorithms, APIs , and special data types which are used throughout React connect the library to fundamental units of computer science and in the process raise considerations many other such computational instances throughout the world may very well have or need.

To keep the question simple, though, what can React do better and why? That is the million-dollar question.

Bibliography

Of note, this includes both content that I have used and that which I intend to use for future posts

ReactJS - Immutability

Value vs. Reference Equality The mutation of data in computer science is something everybody who has studied a common programming language has done at some point. You create a variable and they you change it ! Magic! All of a sudden, you have a variable that is completely different, with a different value and everything! Well, actually, there's something that probably didn't change; the location of the data in memory. The variable is still pointing to the same place it always did; a little section it found specifically for the variable. The contents of the section had changed, but the reference - a sort of ID, if you would - is still the same. This is called mutating the value, and can therefore be seen as mutability. ReactJS's Spin ReactJS has an interesting method of making rendering more efficient, and it involves the way you alter data. Instead of changing the values of a set object every time you need it to change (mutating it), you can actually adopt a st...

CMSC 150 - Fall 2017 - ReactJS Principles

Search This Blog