Morado labs

What is React.js

June 23, 2023

React.js is a JavaScript based library used to build user-interfaces (UI’s) on the web. It provides functionality that allows software developers to build interactive and scalable UI’s.

It does this by providing features that improve the developer experience. This includes an API that allows us to easily manipulate data on the front-end without having to communicate to the back-end.

It also allows developers to create components. Components are reusable pieces of code that can be used throughout the application. React.js component model gives developers a lot of control on how they want to build their components. This allows for developers to write code once, and easily re-use it as many times as they need.

 

 

React.js is a client-side library, which means that it runs on the browser. It does this by leveraging JavaScript, which is the only programming language that can run in the browser. This means that when you ship a React.js application, it will contain a lot of JavaScript code. This JavaScript code will get executed on the user’s browser. This JavaScript code being executed will create the raw HTML and CSS that our users see.

This is different from traditional applications that are rendered on the server. When a user accesses a page on a server rendered application, the application will process the request on the server, and send back raw HTML and CSS to the user’s browser.

The difference in where the main logic is executed (client or server) is what separates front-end frameworks from full-stack frameworks.

 

Why use a React.js Framework?

React.js by itself is a library. A library does not enforce strict patterns on its developers nor does it come with a ton of functionality.

Without a framework, getting a React.js codebase production ready means manually installing a lot of tools and writing a lot of boilerplate. Overtime, as React.js developers started writing a lot of the same code for new projects, frameworks emerged that consolidated this code.

The differences in frameworks emerged from the different types of applications that developers were building.

Some frameworks support Static Site Generation (SSG) which basically means that your codebase gets converted into raw HTML, CSS and JavaScript at build time. Because the site is pre-built, it can be shipped over a content delivery network (CDN). This leads to extremely fast websites as new pages do not have to be fetched from the server ever time a user visits a new page. SSG is ideal when websites have pages that will not change often such as blogs and marketing websites.

Another type of rendering is Server Side Rendering (SSR). SSR means that the page will be loaded on the server before being sent to the client (this is how all applications were built before front-end frameworks were introduced). The benefit of SSR in React applications is that we can process dynamic data that we want rendered on the server. A few reasons why we would render data on the server instead of the client is:

The page contains dynamic data and needs to be indexed for SEO. Client side rendered data cannot easily be indexed by search engines.

The data on the page should only be accessed by authenticated users, and we do not want anything to be rendered on the client to an unauthenticated user.

 

List of React.js frameworks

Next.js

Next.js is one of the most popular React.js frameworks for good reason. It is super flexible, and a complete framework that allows for production ready React.js applications from beginning.

 

 

Next.js, The React Framework For the Web (photo caption)

This framework is built for developers looking to build production grade websites or applications with React.js. Next.js includes features for just about any React based project.

 

Pros:

– TypeScript Support
Out of the box, Next.js has support for TypeScript. This removes the need for any manual TypeScript setup.

– Built in routing system
React.js does not come with a routing system. Developers need to install their own routing solution into React.js projects. Next.js utilizes a file-based routing system. This allows for easy setup of routing in your project.

– Tailwind CSS support
Tailwind CSS is one of the most popular CSS frameworks out there today. It utilizes a CSS methodology called atomic CSS.

– SSG and SSR on a per page basis
The great part of Next.js is that you can configure the rendering method for each page in your application. This means that some pages can be statically rendered, while others are server-side rendered. This flexibility makes Next.js a great choice for static websites, as well as applications with static pages.

– Large community
Next.js has one of the largest communities in the React.js framework space. This community adoption means that the project will likely be around for awhile, and any bugs you run into have probably been found by other developers.

 

Cons:

– Built in routing system
The built in routing system is a pro, but can also be a con. Because the routing system is file-based – there is not much to do if you need to configure your routes in a way that file-based routing does not support.

– Vendor lock-in
Next.js is created by Vercel. Vercel provides a hosting service that works very well with Next.js. There are risks of problems if you try to run Next.js on other hosting platforms such as AWS. This has to do with the fact that Next.js was built to run on Vercel, and requires additional configuration to run on other platforms.

 

Gatsby.js

Gatsby.js is another popular React.js framework that focuses specifically on building statically generated websites using SSG.

 

Pros:

– Security
Because Gatsby sites are statically generated, all of the content is brought into the website before users have access to the website. This increases security as there is no way that hackers can get into your website’s back-end.

– Plugins
Gatsby has an ecosystem of plugins that you can use within your website to add additional functionality.

– Super fast websites
Because Gatsby websites are statically generated, they are blazing fast. Fast websites convert more users, and lead to more customers.

– Security
Because Gatsby sites are statically generated, all of the content is brought into the website before users have access to the website. This increases security as there is no way that hackers can get into your website’s back-end.

 

Cons:

– Limited functionality
Because Gatsby is a static-site generator, it is only suitable for websites, and not web applications that require dynamic data.

– GraphQL
GraphQL is a query language that provides an interface for you to grab data from an API. Gatsby leverages GraphQL to bring data into your website. If you are not familiar with GraphQL, this adds something to learn when building your website.

– Small community
When Next.js introduced SSG, it took away much of the benefits of Gatsby and
as a result, many developers moved to using Next.js for their websites.

 

Hydrogen

Hydrogen is a React.js based framework built by Shopify. It contains features that allow developers to create headless e-commerce stores. Since it is a Shopify product, you would only use Hydrogen when building out a headless ecommerce solution with Shopify as the back-end.

 

Pros:

– Ships with TypeScript and Tailwind CSS
TypeScript and TailwindCSS are our tools of choice for building React applications. Hydrogen ships with them out of the box.

– Easy integration with the Shopify API
Hydrogen comes with custom ecommerce UI components, and well as custom React Hooks, that can greatly speed up development of e-commerce stores.

 

Cons:

– Growing framework
Hydrogen is only a few years old and is not widely adopted. This means there are more bugs in the framework, and less people to talk to if problems occur.

 

Which is the best front-end framework

The best front-end framework for your project will depend on a number of factors.

These include:

  • Is your project a website or application?
  • Is your project an e-commerce store?
  • Who will be maintaining the project?
  •  Which features do you need to implement?

Out of the 3 frameworks listed, Next.js is the most general framework and our framework of choice. This is because Next.js is the most mature React.js framework. With a large community around Next.js, you can rest assured that you will find answers to any questions you have.

With the ability in Next.js to create static websites, it has much of the benefits of Gatsby, while providing a better developer experience.

It provides multiple different rendering methods, support for TailwindCSS and TypeScript, and an easy to understand routing system.

Unless we have a strong reason to lean into one of the other frameworks, our go to for React.js projects is Next.js.

 

 

Share

Facebook
Twitter
LinkedIn
WhatsApp

Other articles

What is React.js

React.js is a JavaScript based library used to build user-interfaces (UI’s) on the web. It provides functionality that allows software developers to build interactive and

Read more »