How I Think About React (A Mental Model for Beginners) | Part 1: What is React?

In a previous article, I wrote about my mental model for understanding JavaScript types. I made the effort to record this mental model after receiving several questions from some friends how were trying to learn frontend development with no programming background.

Those same friends have not only asked recurring questions about JavaScript fundamentals, but also the main concepts of React. So, I thought I would take the time to write another article recording my mental model for React.

What is React?

An experienced JavaScript developer might answer the question by saying: "React is a JavaScript framework for building UIs."

To the experienced ear, this sounds like a clear and concise definition. However, to the inexperienced ear, this doesn't seem to communicate much. What is a framework? What is a UI, and how do I build one?

To start describing a mental model for beginners, we can't overlook the basics.

I would start by saying: "React is a way to write instructions (code) to create a web application (you know...something like Twitter, Facebook, etc)."

Of course, this needs to be unpacked a bit.

So, what is a web application?

Well, think about a job application.

To "build" a job application, someone first puts together a document with different sections to be filled out by the applicant.

The applicant then interacts with the document, filling out each section with personal data (information).

Finally, someone will handle interpreting the applicants interactions and responding to them (i.e. scheduling an interview).

A web application is kinda similar.

A web application is an application that runs in the browser (Chrome, Firefox, etc).

It starts off as a blank document, like opening Word when beginning the process of building a job application.

We can write instructions (code) via JavaScript to populate the document with different sections. Each section is composed of different elements, or building blocks, that make up a section when put together.

With a job application, you will have some elements that the applicant does not interact with (i.e. headings, instructions, etc). However, there are other elements that the applicant does interact with (i.e. checkboxes, multiple choice questions, etc).

With a web application, you also have some elements that a user (the equivalent of the applicant) does not interact with and some elements that a user does interact with.

The elements that a user does interact with (i.e. an "input" for the username when logging in) can be populated with data.

The user's interactions (i.e. typing their username) and the data (i.e. what the user typed as their username) need to be handled and responded to by your instructions (JavaScript code) (the equivalent of the employer who built the job application).

Putting it all together, a web application is a visually-sophisticated document that a user interacts with in a browser in order to achieve a desired goal.

Similar to a job application, a web application consists of 1) a document, 2) visual sections composed of elements, 3) a user's interactions and population of data, and 4) handling of said interactions and data.

Specific to a web application is the writing of instructions (code) to "build" the application using JavaScript.

A web application consists of code for building what the user sees and interacts with (the user interface, or "UI" for short) and handling those interactions of the user.

So, I can build a web application with JavaScript? Then, why did you say that I need to use React to build a web application?

React is a "shortcut" for building web applications.

Sticking with the job application analogy, a job application can be "built" by hand or using a tool like Microsoft Word.

So, I can build a job application using pen and paper? Yes.

So, I can build a job application using a computer? Yes.

Whether by hand or by computer, a pen and paper as well as a computer are both means to the same end (building a job application).

While you can go with either option, Microsoft Word will have some serious advantages.

Similarly, you can write instructions (code) to build web applications using JavaScript or React. They are two means to the same end (building a web application), but React is a more efficient option.

However, this is where the job application analogy breaks down a bit.

JavaScript and React are not two unrelated, different means to a same end.

React is related to JavaScript in a way that Microsoft Word is not to pen and paper.

JavaScript is a programming language that can be used for building a web application, but it can also be used for a lot of other things.

React is a JavaScript "framework." It provides a "shorthand" way of doing a particular thing that JavaScript can do, and it does it really well.

It provides a more efficient way to write instructions (code) to build web applications, specifically the user interface (what the user sees and interacts with).

Instead of writing JavaScript code from scratch to build a user interface (the equivalent of building a job application by hand), you can build a user interface by writing React code. React, in turn, translates the instructions (code) you gave it into JavaScript instructions (code).

To build the frame of the house, you need a foundation.

JavaScript is the foundation, and React is the frame. Hence why it is called a "framework."

React is built on JavaScript. You write instructions for building a user interface in the "shorthand" way using React, and React translates it into the "longhand" JavaScript code.

Another way to think of it, therefore, is that React is a translator between you and the JavaScript code that is required to build a user interface.

React gets your slang and shorthand comments and translates it into the full instructions for JavaScript to build a user interface.

Putting it all together, React, as a framework, offers a shorthand way to 1) add visually-sophisticated sections composed of elements to a web "document", 2) populate those elements with data, and 3) handle a user's interactions and inputs.

In a follow-up articles in this series, we'll go over my mental model for understanding the core concepts of the React shorthand/framework.