React - Meet and Greet

You have probably heard of React in a discussion about other well-known JavaScript libraries and frameworks such as Vue, Angular, Ember, Webpack, Redux, etc. We will kick-start this series with a quick introduction to React in the first two articles of this series.

In this Part 1 article, we will:

• Settle the debate on whether React is a library or a framework, for good 😜
• Explore all the major ingredients that make up a React application
• Explore features of React at a high-level overview

Is it a library or a framework?

Before we get started on learning about React, I think it's important that we get this question answered because it has real consequences for our development process. And the answer to the million-dollar question is:

React is a ... LIBRARY.

🎉🎉🎉👏👏👏😁

As a matter of fact, it's stated very clearly on their official website homepage.

React is written in JavaScript, but unlike other popular JavaScript frameworks such as Angular, Vue, Svelte, React is fundamentally unopinionated. But what does it even mean?

It means that React itself does not include many of the React-specific libraries you're going to need for most projects. The React and React DOM libraries give us the means of building a user interface with the JSX syntax, plus powerful state management tools via hooks, among other things. React does not enforce strict rules around code conventions or file organization allowing developer teams to set conventions that work best for them. Angular and Vue, by comparison, include many more tools all bundled within the core package itself.

For example, when you set up an Angular project, it is bootstrapped with nearly every single thing that you'll need to make a complete, large-scale app. Some built-in tools included in Angular are tools for common tasks such as creating forms, running automated tests, making network requests, etc.

That being said, it doesn't necessarily mean that React cannot be used to build complex and large-scale applications. However, the implication is that the burden is on you as a developer to choose the packages and tools that you need in order to build your applications. For example, React Hook Form or Formik are React-specific form libraries, React Testing Library and/or Jest can be used for automated testing, Fetch API or Axios can be used for making network requests.

The tools or libraries that you choose to use depend on the demands of the app and your preferences as a developer. This is one of the advantages of using React since it doesn't lock you into one choice or hold you to any specific libraries other than React itself. However, it does with a price because you will need to keep up with emerging libraries.

It's worth noting that there are frameworks out there that are based on React if you ever need it. Some of the most popular frameworks are Next.js, Gatsby, and Redwoord.js, all of which are used to create full-scale dynamic and static React applications.

React's Major Ingredients

React's mental model draws broadly on functional and object-oriented programming concepts and focuses on components as primary units for building with. In React applications, you create interfaces from components. React's rendering system manages these components and keeps the application view in sync for you.

Components often correspond to aspects of the user interface such as datepickers, headers, navbars, etc., but they can also take responsibility for things like client-side routing, data formatting, styling, and other responsibilities of a client-side application. Components in React follow a predictable lifecycle, can maintain their own internal state, and work with regular old JavaScript.

We will dive into these concepts in more detail in subsequent posts. For now, let's look at an overview of the major ingredients that go into a React application.

• Components
  Components are encapsulated units of functionality that are the primary unit in React. They utilize data (properties and state) to render your UI as output. Certain types of React components also provide a set of lifecycle methods that you can hook into. The rendering process outputs and updates the UI based on the data by interacting with the components via React's APIs.
• React libraries
  React uses a set of core libraries, which work with the react-dom and react-native libraries and is focused on component specification and definition. Using these libraries, we can build a tree of components that a renderer for the browser or another platform can use. react-dom is a renderer that is aimed at browser environments and server-side rendering, whereas react-native focuses on iOS, Android, and other native platforms.
• Third-party libraries
  React doesn't come with tools for data modeling, HTTP calls, styling libraries, or other common aspects of a front-end application. Therefore, developers are free to choose which additional modules or libraries they prefer to use.

React Features

Since we were browsing the React homepage, let's take a look at some of the features of React listed on the homepage to understand what this library promises to deliver.

We will discuss these features at a high level and will dive deeper into the declarative and component-based concepts in the next article.

1. Declarative
   Declarative programming is not a new concept but just got popularized by React in the JavaScript community in recent years. According to Wikipedia:

   Declarative programming is a programming paradigm — a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow.

   As nice as it is, I found this definition hard to comprehend. A good analogy that would help explain this better is as follows: declarative programming is like describing the picture, whereas imperative programming is the instructions for painting that picture. Does it make more sense now?🤔

   Let's try to understand this concept in the context of React. React follows the Unix philosophy because it focuses on just one thing, i.e. building UI, and it does it extremely well. It does it in a declarative manner meaning we use React to describe web UIs. The key word here is "describe". We describe UIs 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 (written in the React language) to actual UIs in the browser, on our behalf.

   Declarative programming makes codes more readable because it hides the lower-level details. In React, the DOM is declarative. This means that we never interact with the DOM, the UI is updated when we change the state making it easier to design and debug the UI. In other words, we can make the UI interactive by changing the state of the component and React will take care of updating the DOM accordingly.

   This mental model about modeling the UI based on a final state is easier to understand and work with, especially when the views have lots of data transitions. For example, let's use Facebook Messenger app as an example. It has a view that shows users the list of their friends that are currently online. That view's state will be just an array of users that are currently online. It does not care that a moment ago three friends came online, then one of them disconnected, and then two more joined. It just knows that at this moment, four friends are online. This is the reactive nature of React.

2. Component-Based
   When Facebook released React.js in 2013, it defined a new way in which front-end developers could build UI through a concept known as Component-Based Architecture (CBA), a method for encapsulating individual pieces of a larger UI into self-sustaining, independent micro-systems.
   Components have their own structure, their own methods, and their own API. Components are reusable, and their "independent nature allows developers to create a UI with many moving parts, e.g. one component can refresh without affecting other components or the UI as a whole.

3. Learn Once, Write Anywhere
   Developers can use React to build applications for whatever platform they choose, without the need to learn a fundamentally different set of technologies. React can render on the server using Node and power mobile apps using React Native.

What's Next?

For the remainder of this series, we will explore each of the core concepts of React as shown in the diagram below. Of course, listed here are just the core concepts that are typically encountered when building a React application. As we dive into each of these concepts, we will also discuss other relevant concepts as they come up.

• Virtual DOM: React implements a virtual DOM that sits between your program and the browser DOM allowing for efficient updates to the DOM using a fast diffing algorithm. This is the core of React's declarative programming.
• Component: Components are the most fundamental unit of React. Component composition and reusability are some of the most powerful aspects of React.
• Routes: Routing is a system for resource navigation and is an important part of web applications. Different parts of your site will need their own URLs (for example, /blogs, /tags, /about, etc.), and routing facilitates page navigation as it relates to URLs and resources such as images, HTML pages, scripts, etc.
• Styling and CSS: There are several options for styling a React app. We will discuss some of these options.
• Data: Modern web applications are mostly dynamic and filled with data that changes over time. We will explore how data flow between components via props and states. Lifecycle events are often used to handle various effects such as fetching data on the mount, cleaning up before the component unmounts, sanitizing props when the components updates, etc. React provides lifecycle methods and hooks that can be used to "hook" into different parts of a component's lifetime.
• Form: Most web applications involve forms to one degree or another. We'll look at how to implement forms in React.
• Redux: Redux is a library and application architecture for state management that results in a highly predictable, testable, and debuggable application by enforcing strict ways of working with data.