Professional Documents
Culture Documents
The focus of this article is about React’s popularity and not how it compares to other frameworks or libraries
Here are a few reasons why React has become so popular so quickly:
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 1/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
skills are what make you a better React developer. There are no
barriers to entry. A JavaScript developer can become a productive
React developer in a few hours.
But there’s a lot more to it than just that. Let’s attempt to cover all the
reasons behind React’s rising popularity. One reason is its Virtual DOM
(React’s reconciliation algorithm). We’ll work through an example to
show the actual practical value of having such an algorithm at your
command.
React’s o cial de nition states that it’s a JavaScript library for building
User Interfaces. It’s important to understand the two di erent parts of
this de nition:
2. The thing that React does really well is the second part of the
de nition: building User Interfaces. A User Interface is anything we
put in front of users to have them interact with a machine. User
Interfaces are everywhere, from the simple buttons on a
microwave to the dashboard of a space shuttle. If the device we’re
trying to interface can understand JavaScript, we can use React to
describe a User Interface for it.
When you hear the statement that “React is declarative,” this is exactly
what it means, we describe User Interfaces with React and tell it what
we want (not how to do it). React will take care of the “how” and
translate our declarative descriptions (which we write in the React
language) to actual User Interfaces in the browser. React shares this
simple declarative power with HTML itself, but with React, we get to be
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 2/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
declarative for HTML interfaces that represent dynamic data, not just
static data.
React has three main design concepts that drive its popularity:
Components are exactly the same; we call their input “properties” and
“state”, and a component output is a description of a User Interface
(which is similar to HTML for browsers). We can reuse a single
component in multiple User Interfaces, and components can contain
other components.
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 3/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
When we receive just the data from the server (in the background, with
AJAX), we need something more than HTML to work with that data.
It’s either using an enhanced HTML, or using the power of JavaScript
itself to generate the HTML. Both approaches have advantages and
disadvantages. React embraces the latter one, with the argument that
the advantages are stronger than the disadvantages.
In fact, there is one major advantage that can make the case for this
approach by itself; using JavaScript to render HTML makes it easy for
React to keep a virtual representation of HTML in memory (which is
commonly known as The Virtual DOM). React uses the Virtual DOM to
render an HTML tree virtually rst, and then, every time a state
changes and we get a new HTML tree that needs to be taken to the
browser’s DOM, instead of writing the whole new tree React will only
write the di erence between the new tree and the previous tree (since
React has both trees in memory). This process is known as Tree
Reconciliation, and I think, it is the best thing that has happened in Web
Development since AJAX!
In the following example, we’ll focus on this last concept and see a
simple practical example of the tree reconciliation process and the big
di erence it makes. We’ll write the same HTML example twice, rst
using native Web APIs and vanilla JavaScript, and then we’ll see how to
describe the same HTML tree with React.
We’ll start this example from scratch. Create a new directory, and
launch your favorite editor there:
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 4/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
mkdir react-demo
cd react-demo
atom .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Demo</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Open the index.html le in your browser and make sure you can see
the empty template without problems, and that you can see in the
Console dev-tools tab the console.log test message that you put in
script.js :
Now, let’s bring in the React library itself, which we can include from
the Reactjs website. Copy both the react and react-dom scripts, and
include them in index.html :
<script src="https://unpkg.com/react@15/dist/react.js">
</script> <script src="https://unpkg.com/react-
dom@15/dist/react-dom.js"></script>
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 5/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
We’re including two di erent scripts here for an important reason: The
React library itself can be used without a browser. To use React with a
browser, we need the ReactDOM library.
When we refresh the browser now, we should see both React and
ReactDOM available on the global scope:
With this simple setup, we can now access both React and ReactDOM
APIs, and of course, we also have access to the native Web APIs and
JavaScript which we are going to use rst.
<div id="js"></div>
Now in script.js , let's grab this new div element by its id and put it
in a constant. Let's name this constant jsContainer . We can use
document.getElementById to grab the div from HTML:
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 6/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
To control the content of this div , we can use the innerHTML setter
call on the div element directly. We can use this call to supply any
HTML template that we want inserted in the DOM. Let's insert a div
element with a class of "demo" and the string "Hello JS" as its content:
jsContainer.innerHTML = `
<div class="demo">
Hello JS
</div>
`;
Make sure this works in the browser. You should see the “Hello JS” line
on the screen now.
This demo div is our User Interface so far. It’s a very simple one. We just
output a text for the user to see.
React acts like our agent for the browser, and we mostly need to
communicate with just React, our agent, and not the browser itself. I
say mostly because there are cases where we still need to communicate
with the browser, but those are rare.
To create the exact same User Interface that we have so far but with
React API this time, let’s create another div element and give it an id
of "react" . In index.html , right under the div#js element, add:
<div id="react"></div>
Now, in script.js , create a new container constant for the new div :
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 7/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
This container will be the only call we make to the native web API.
ReactDOM needs this container to know where to host our application
in the DOM.
With the react container identi ed, we can now use the ReactDOM
library to render React's version of the HTML template to this
container:
ReactDOM.render(
/* TODO: React's version of the HTML template */,
reactContainer
)
Here’s the equivalent HTML User Interface we have so far with React:
ReactDOM.render(
React.createElement(
"div",
{ className: "demo" },
"Hello React"
),
reactContainer
);
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 8/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
• The rst argument is the HTML tag, which is div in our example.
We can test this now. The browser should render both “Hello JS” and
“Hello React”. Let’s style the demo divs as a box, using this CSS, just so
that we can visually split the screen. In index.html :
<style media="screen">
.demo {
border: 1px solid #ccc;
margin: 1em;
padding: 1em;
}
</style>
We now have two nodes, one being controlled with the DOM Web API
directly, and another being controlled with the React API (which in
turn uses the DOM Web API). The only major di erence between the
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 9/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
ways we are building these two nodes in the browser is that in the JS
version we used a string to represent the content, while in the React
version we used pure JavaScript calls and represented the content with
an object instead of a string.
Let’s now add some more features to our simple User Interface. Let’s
add a text box to read input from the user.
jsContainer.innerHTML = `
<div class="demo">
Hello JS
<input />
</div>
`;
We can do the same with React by adding more arguments after the
3rd argument for React.createElement . To match what we did in the
native JS example, we can add a 4th argument that is another
React.createElement call that renders an input element (remember,
every HTML element is an object):
ReactDOM.render(
React.createElement(
"div",
{ className: "demo" },
"Hello React",
React.createElement("input")
),
reactContainer
);
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 10/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
At this point, if you’re questioning what we’re doing and thinking “this is
complicating a simple process”, you are totally right! But there is a very
good reason for what we’re doing. Keep reading.
jsContainer.innerHTML = `
<div class="demo">
Hello JS
<input />
<p>${new Date()}</p>
</div>
`;
ReactDOM.render(
React.createElement(
"div",
{ className: "demo" },
"Hello React",
React.createElement("input"),
React.createElement(
"p",
null,
new Date().toString()
)
),
reactContainer
);
Both JS and React versions are still rendering the exact same HTML in
the browser.
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 11/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
As you can see, so far, using React is actually a lot harder than the
simple and familiar native way. What is it that React does so well that’s
worth giving up the familiar HTML and having to learn a new API to
write what can be simply written in HTML? The answer is not about
rendering the rst HTML view, it’s about what we need to do to update
any existing view in the DOM.
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 12/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
</div>
`;
ReactDOM.render(
React.createElement(
"div",
{ className: "demo" },
"Hello React ",
React.createElement("input"),
React.createElement(
"p",
null,
new Date().toString()
)
),
reactContainer
);
}
setInterval(render, 1000);
This is the moment when React will potentially blow your mind. If you try
to type something in the text box of the JS version, you won’t be able to.
This is very much expected because we’re basically throwing away the
whole DOM node on every tick and regenerating it. However, if you try
to type something in the text box that’s rendered with React, you can
certainly do so!
Although the whole React rendering code is within our ticking timer,
React is changing only the timestamp paragraph and not the whole
DOM node. This is why the text input box was not regenerated and we
were able to type in it.
You can see the di erent ways we’re updating the DOM visually if you
inspect the two DOM nodes in a Chrome dev tools elements panel. The
Chrome div tools highlights any HTML elements that get updated.
You’ll see how we are regenerating the whole “js” div on every tick,
while React is smartly only regenerating the paragraph with the
timestamp string.
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 13/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
Using the virtual DOM, React keeps the last DOM version in memory
and when it has a new DOM version to take to the browser, that new
DOM version will also be in memory, so React can compute the
di erence between the new and the old versions (in our case, the
di erence is the timestamp paragraph).
React will then instruct the browser to update only the computed di
and not the whole DOM node. No matter how many times we
regenerate our interface, React will take to the browser only the new
“partial” updates.
Not only is this method a lot more e cient, but it also removes a big
layer of complexity for the way we think about updating User
Interfaces. Having React do all the computations about whether we
should update the DOM or not enables us to focus on thinking about
our data (state) and the way to describe a User Interface for it.
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 14/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
Thanks for reading! You can view the source code of my demo here,
and you can see the demo running here.
. . .
I dedicated a big part of my 2017 to writing books which are all now
available on Amazon:
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 15/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 16/17
2/5/2018 Yes, React is taking over front-end development. The question is why.
https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76 17/17