React - Meet and Greet
Tags: react
Published: 2022-02-02 22:10:02

---
title: React - Meet and Greet
published: true
date: 2022-02-02 11:09:57 UTC
tags: React
series: React
canonical_url: https://www.underthehoodlearning.com/react-meet-and-greet
cover_image: https://res-1.cloudinary.com/under-the-hood-learning/image/upload/q_auto/v1/blog_images/Meet-and-Greet.png
---

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.

<!--kg-card-begin: markdown-->

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

<!--kg-card-end: markdown-->
## 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.

<!--kg-card-begin: markdown-->

![React - Meet and Greet](https://res-1.cloudinary.com/under-the-hood-learning/image/upload/q_auto/v1/blog_images/2021-11-23-10_07_20-React---A-JavaScript-library-for-building-user-interfaces.png)

<!--kg-card-end: markdown-->

**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.

<!--kg-card-begin: markdown-->

![React - Meet and Greet](https://res-1.cloudinary.com/under-the-hood-learning/image/upload/q_auto/v1/blog_images/2021-11-26-06_06_40-React---A-JavaScript-library-for-building-user-interfaces.png)

<!--kg-card-end: markdown-->

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

<!--kg-card-begin: markdown-->
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.

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.**

<!--kg-card-end: markdown-->
## 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.

<!--kg-card-begin: markdown-->

![React - Meet and Greet](https://res-3.cloudinary.com/under-the-hood-learning/image/upload/q_auto/v1/blog_images/Concept-Map.png)

<!--kg-card-end: markdown-->
- **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.