Why We Use React To Build Websites

published on: December 23rd 2019

Why We Use ReactJS To Build Websites

At Whipstitch we all have different backgrounds, programming strengths, and preferred technologies that we like to use in our development stack. That said, the one thing that binds us is our love of developing with ReactJS and GatsbyJS (a React based static website generator). We are a group of coders that, to a person, are always on the look out for the latest great frontend platforms and technologies. Ideas that solve pesky development problems, makes our workflow more efficient, or streamlines a process. Most of us were designing and developing websites pre-React and remember when it first appeared. We all agree that after "trying" React out to see what the hubbub was all about; It stated creeping into all our workflows. Once we mastered the library it took over. You might ask Why? What?

What React is

The user interface (UI) and the webpage itself are built using three technologies (languages). HTML for structure, CSS for style, and JavaScript for function. That is how it's been and always will be. They are the languages of the web. (Technically a fourth was added Web Assembly, but it is really a helper for JS). React is a JavaScript library/framework created by Facebook in 2013 to solve problems they were having on their massive and growing site. Primarily the updating of the DOM (Document Object Model) during user interactions.

Why we use React

Simplistically put, before React if you clicked a button that altered the webpage in any way the parent element and the children elements would get instantly updated by manipulating the DOM and inserting the changes so the webpage reflected the action taken. That happens fast. However, when a site grows in complexity and size, the accumulated effect of the DOM changes slows a site down. React creates a vDOM (virtual DOM) along side the DOM. When users interact (click something) or make changes (add a comment) on the webpage, React makes the change in the vDOM and then compares it to the DOM. Then it goes into the DOM and alters the least number of elements that will reflect the user's intent. Not everything. This extra step keeps a site quick and would make React awesome on it's own, but it does something we developers love!!!!

BONUS - Reusable Components

A developer's dream. Before React we built each website part (like a button) in HTML and CSS. You typically want all the buttons of a website to have a uniform style or function. Therefore, we would copy and paste the code numerous times wherever we needed a button in our code. If we wanted to change the buttons, in any way, we would have to find them, one by one by one by one, throughout our code and change them. React allows a developer to create a website part (button) as a component (a single JavaScript function), that when calling it's name can be reused as many times as we want to. Any changes made to this component changes all the website parts (button) that were made with it- all at once. This is remarkable. All the buttons on a site, even if you had a million, could now be made with a couple lines of code. Like this:

const Button = ({title}) =>{

return(

<Button className="primaryButton">{title}</Button> ){

Now simply inserting <Button title={????}/> anywhere in the code will result in a button being created, named, and displayed. Any changes to that code will be reflected by all buttons at once.