Move on from React already!

So first of all, sorry for the frightening title (and picture). I really don't want you to just ditch React. I just had to get your attention because this article is crucial for your career as a React developer.

I am a big fan of the React library and as for me, most frontend developers had chosen to develop their apps/websites with React (upon choosing from Vue or Angular).

React is indeed the most famous library in the market. For example, 22% of all development jobs(!) in the UK are related to React.

Had you noticed that I am calling React a library? But isn't React a framework?

In this article, we will explain why React is called a library and not a framework, but moreover, I will show you how to elevate your React library into one of two amazing frameworks - Gatsby.js or Next.js. This will really boost your React skills!

React is a library

When you enter Reacts' website you'll see the following concise explanation of what exactly is React:

A JavaScript library for building user interfaces

Ok, so React is definitely a library. But why? What is React different from its two main competitors - Vue and Angular which by definition are frameworks?

The answer for that is actually in the short quote from the React team above. React is a library for building user interfaces. That means that React only tells you how to do one thing - build user interfaces.

About the rest of the things you want to do in your app - like creating forms, running automated tests, making network requests, and much more - React does not tell you how to do it! You can choose the third-party libraries you want to create those functionalities.

This is not the case with frameworks like Vue and Angular - they come with everything ready for you out-of-the-box. There is also another term for that - React is "unopinionated" (you can choose what third-party libraries to use in your app) while Vue and Angular are "opinionated".

Sometimes having no opinion is better

So it sounds like it's a lot of hassle to deal with React. I mean, every time you set up a React app you need to install all those third-party packages.

Well, the good news is that you can, and sometimes you should use React as a framework by starting your React project with one of Reacts' frameworks - Next or Gatsby. We will see about that in the next section.

I want to point out a big advantage that React has for being "only" a library. This fact has made Reacts' third-party libraries compete with developers' attention. And as you already know - where competition is present quality improves.

For example, if you want a library to handle forms in React you have: React-hook-form, Formik, KendoReact form, React final form, and more. They're all great (I personally prefer using React-hook-form), and they're getting better all the time thanks to that competition!

I personally think that this is one of the reasons why React is so popular - it is very flexible and has a huge amount of third-party libraries.

And sometimes you just have to have an opinion

Ok, so that's really great. React has a lot of third-party libraries and you can choose the libraries that suit you the most.

But sometimes you need more than just adding "some" libraries. Sometimes you need to follow a strict line of rules to produce the outcome you want to have. Sometimes you need a framework with an opinion.

Before I explain Reacts' frameworks I want to just copy-paste from Reacts' team website what they have to say about it:

The React team primarily recommends these solutions:

If you’re learning React or creating a new single-page app, use Create React App.

If you’re building a server-rendered website with Node.js, try Next.js.

If you’re building a static content-oriented website, try Gatsby.

Can you see? The React team themselves explicitly tells us: Using React as a library will not always suit your needs.

To be precise, if you are a web developer, using React as a library only will most of the time not meet your needs.

Let's try and break up what the Reacts' team are telling us in the above quote:

• Reacts' team advises us to use React as a library for 2 reasons - either you are in the process of learning React or creating a single page application. Now, I want to clarify the second part. In that case, a single-page application does not mean that you have one page that does not reload with multiply routes. it means that you are really building a single-page app or that you are integrating an app into your website. In both cases you better use React as a library because as said, it is more flexible.
• If you are building a server-rendered website Reacts' team advice us to use Next.js. We will dive into Next.js in the next section but meanwhile, we'll just say that if you are building a full-stack website then you should use Next.js as a framework.
• Lastly Reacts' team tells us to use Gatsby as a framework if you are building a static-content-oriented website. To simplify that we'll give examples for static-content-oriented websites: Landing pages, Blogs, E-commerce, portfolios. Now I hope that it is clear - the above examples are all static websites in the mean that they are all delivered to the users' web browser exactly as stored on the server. Content-oriented simply means that the content on the website is flexible and you are able to change it with ease. We'll explain all about it in more detail in the Gatsby section.

The React framework for production

In order to understand the huge benefit of using Next.js as a framework, we'll need to explain first what does server-side-rendering means.

As you probably already know, React uses a concept that is called virtual DOM in order to render the HTML page on the screen. The meaning of it simply means that the user gets from the server mostly JavaScript code. The users' browser then interpolates the JavaScript code into HTML to render the UI on the screen. Let's look at the following diagram:

There are several problems with this process. The main one is that the process of turning JavaScript into HTML is very inefficient for the users' CPU. At least for the first load of the page.

And that is where SSR (Server-Side-Rendering) Comes into place. The server takes the heavy-lifting part of turning JS into HTML to itself and returns the user an easy-to-process HTML page. It looks something like this:

Apart from this amazing feature (SSR) Next.js has a lot more to offer! We'll not cover them all, because this is not a Next.js course, but let's mention some of them: Built-in CSS support, image optimization, font optimization, fast refresh routing support, and much more! I really encourage you to learn all about it from the official docs of Next.js.

The hardest parts of the web, made simple.

Gatsby uses a little different concept from Next to render a page. Gatsby by definition is called a static site generator. It is very similar to the way a server-side rendering works, the only difference is that Gatsby renders the pages on build time so every user gets the same output. It looks something like this:

As you can see, the only difference is that Gatsby renders on build time. This is why Gatsby is so great for the kind of websites we mentioned before: Landing pages, Blogs, E-commerce, portfolios. They all serve the same data to each user that enters them.

But Gatsby is way more than a static-site generator. In fact, Next has the ability to serve as a static-side-generator as well. So why would we want to use Gatsby in the first place?

First of all, Gatsby is really optimized to serve static files. If you ever enter a site created by Gatsby you'll be stunned by the speed at which the page is loaded. But besides that, Gatsby has a really great plugin ecosystem. It means you can plug your websites into various APIs with ease and minimum configurations. Again I encourage you to dive deep into the Gatsby docs and learn all about it.

Summary

In this article, I showed you that in order to use React as a web developer you have to learn Reacts' frameworks. We saw Next.js which is great for rendering dynamic content, and Gatsby which is great for rendering static content.

In some use cases, you would want to stick with React as a library only. These cases can be:

• You are still learning React.
• You are implementing only some features in the website with React.
• You are planning the use your app as a single-page app and want to easily be able to convert it to an Android app (with React native).

I hope that I succeeded to encourage you to go on and study Reacts' frameworks - Gatsby and Next.js. I think that you will really enjoy using them and that it will upgrade your career as a React developer.