React: Building Single-Page Applications with JavaScript. What is React?

Summary:

1. React is a JavaScript framework for creating fast web apps, developed by Facebook in 2011.

2. It uses components which are written in JSX (a JavaScript syntax extension).

3. It is easy to learn and use, has fast rendering capabilities and great third-party integrations/tools.

4. Commonly used for single-page applications (SPAs) and multi-page applications, with Server-Side Rendering available as well through libraries like Next.js or Remix.

5. Benefits of SSR include improved SEO, user experience, social sharing; drawbacks are longer time to interactive and vendor lock-in

Introduction

React is a JavaScript (JS) framework for creating fast web apps. While in the past it ran exclusively on the client-side (in browsers), it now may run on the server-side as well (ever since version 18 with React Server Components).

History of React

React was developed by Facebook in 2011 to make their websites more dynamic and engaging. The project was started by Jordan Walke, a software engineer at Facebook. Since then, the piece of software has become an open-source library used by developers worldwide. It has a large and active community of developers who contribute to its development.

Released to the public in 2013, it underwent many changes to get to where it’s at now. You may see how the creators envisioned the project would look like in 2013 in a GitHub repository. One thing that you won’t see there are React Hooks. They were added, because the distinction between stateful and stateless components does not function anymore.

Overview of React

React is a JavaScript library that allows developers to create interactive interfaces. It uses components, which are pieces of code that can be reused or combined to create a full application. React is mainly used for creating user interfaces, but it also has server-side rendering capabilities.

At its core, React is a component-based framework. A component is a piece of code that can be reused and combined to create a full application. Components are written in JSX, a JavaScript syntax extension, that looks very much like HTML.

What Are the Differences Between React and JSX?

Contrary to popular opinion, React and JSX are two separate projects. JSX is the language extension that allows you to write HTML-like markup in your JS, while React (and React-DOM) is behind rendering everything to the screen.

To put it in other words: JSX provides a concise way to create elements, while React provides the means of outputting those elements. To put it simply, JSX is what you write and React handles what you do with it.

Benefits of React

Easy to Learn and Use

In Vue or Angular, besides having a good knowledge of JavaScript and/or TypeScript, you also must learn the built-in directives, and in the case of Angular, the sea of first-party libraries that complement the framework, and the exact way to use them.

In React’s case, it’s different. The library is (or used to be) the small piece of the web apps cake. You will need to add other libraries, and the way to use them, but you will be able to choose which ones.

(Relatively) Fast Rendering

Even since React 18, the library supports streaming, and server components, which make the experience much faster for everybody. Browsers don’t need to parse tons of unnecessary JavaScript, when you are using Server Components, and Streaming ensures that users see something (a loading placeholder of your choosing) on their screens as soon as possible. While seeing a spinner doesn’t seem too impressive, it improves user experience.

Great Third-Party Frameworks and Libraries

Remix, Next.js, Gatsby, Create React App, Storybook and so on. Those are only some of the frameworks built on top of React. Each one uses it or expands on it in their way.

In addition to the tools, there is a wider React ecosystem, with libraries, components, and plenty of other resources that will make your life easier when developing a React-based web application. The most popular third-party libraries:

• React Testing Library (Testing)
• Redux & Redux React (State management)
• React Router and React Router DOM (Routing)
• React Helmet (SEO)
• Tailwind CSS (styling)

Application of React in Web Development

Creating Single-Page Applications (SPAs)

Single-page applications are web apps that are composed of a single HTML page with its underlying assets like CSS, JavaScript, and others. They allow users to interact with the web app without having to reload it. An example of an SPA is Gmail.

These applications are the most common ones you will write using React. We will even go as far as to say that this will be almost exclusively what you will create.

Multi-Page Applications

This is the old way of creating websites. You would have multiple HTML files, and the browser had to fetch the contents of the next page, before you would see a new one. This meant you had to see a complete reload of a page before you could see what you wanted to see. Furthermore, when submitting a form, you would also have to wait for the browser to reload the page.

You may still create this kind of websites using e.g., Gatsby, though over the past few years we have seen a steady, and heartbreaking decline in usage of the framework.

React Native Web

When you create your app with React Native (RN), you may also reuse the code, thanks to RN Web. While some libraries won’t work in the web mode, a lot of them will. You won’t have to look far to see an example. Take Twitter’s mobile app, and their mobile version of a site.

For an answer to the question “what is React Native “ go here.

Server-Side Rendering with React

Server-side rendering assembles pages on the server before sending them to the client. It can be done using Next.js, Remix or Razzle.

Advantages of SSR

- Reducing the burden on lower-end devices,

- Improves SEO,

- Improves user experience,

- Social sharing

Disadvantages

- Longer time to interactive

- Vendor lock-in

- More expensive

Vue vs React, Angular vs React

These comparisons may only be made at a surface level.

With that being said:

• Angular is the most robust framework. It’s also the heaviest, and has the fewest number of third-party integrations
• Vue is conceptually between React and Angular. It allows for some flexibility, and you may use the “normal” HTML-like Vue syntax, or enable the JSX mode
• React is the most minimal of the three. No choices are made for you, but only some. Even though people used to see Redux as almost inseparable from React, it’s not the case anymore.

Why Should You Choose React?

React is a framework developed by Facebook, which means that it’s used in many popular websites. Besides being maintained by Facebook, the open-source library has an active community of developers who constantly improve on its capabilities and update it often to ensure web apps are running smooth as butter. Google Trends, also show that there is a steady increase in demand for JavaScript engineers with React knowledge.

What’s more important: despite being created over ten years ago, the framework hasn’t lost popularity or usage at all. In fact, its popularity has only grown steadily over the years!

Originally published at https://www.itmagination.com.