Introduction to React Basics and Next.js

Introduction of React and Nextjs

React and Next.js have become two of the most popular JavaScript libraries for building modern web applications. In this blog post, we’ll provide a comprehensive overview of both libraries, their key features, and how they can be used together to create powerful and efficient scalable web applications.

Before we dive into React and Next.js, let’s clarify the difference between a library and a framework.

Library vs. Framework

Let’s know the difference between a Library, which is here React and the Framework which is Next.js.

• Library: A collection of pre-written code that you can use to perform specific tasks within your application. You have control over how and when the library is used. Examples of libraries include Lodash, jQuery, React and Axios.

• Framework: A complete structure or foundation for building applications. It provides a set of rules and conventions that you must follow. The framework often dictates the flow of your application. Examples of frameworks include Nextjs, Nestjs.

Basically, a Library provides us with UI components that we can use in a project and is limited to that, whereas a framework contains things additional to library, such as tools and functionalities that helps one to use directly rather than working from scratch. We will know more differences in upcoming tutorials. For now, React is a Library and Next.js is a React Library based framework with additional tools and functionalities that makes our development easier.

Example of React Functional Component

What is React?

React or ReactJS is a JavaScript library for building user interfaces for web applications. It’s known for its component-based architecture, which makes it easy to create reusable and maintainable code. Key features of React include:

JSX

A syntax extension for JavaScript that makes it easier to write HTML-like structures within JavaScript code. We can write both HTML and JS together to make it easier for conditional rendering and formatting text. Also, we can use a single file to write the complete code in comparison to Frameworks like Angular, where we write template and functionality different.

const fruitsList = (<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>);

Components

Components are the basic Building blocks of React applications that encapsulate logic and render UI. Take it as a lego block, where each block combined makes whole thing together. We write multiple components to have smaller functionality without any coupling or dependency. In the below example, we have shared functional component that can be written two ways, one with lambda expressions and another with normal functions. There used to be Class Components as well, but now a days, everyone uses functional components which are simpler than class components and use Hooks over lifecycle class methods in class component and reduce code as well.

const TestComponent = () => <div> <h2>Hi I am a component </h2> </div>

function TestComponent() { return <div> <h2>Hi I am a component </h2> </div> }

State and Props

Mechanisms for managing data and passing it between components. Props are basically the properties that don’t change, and state are the values related to properties that can change over the time. Let say we need to show the list of fruits on a page.

For example, we create a component that renders the list of fruits from a list passed to it. let say variable fruitNames[] is a list of fruits as [‘Banana’, ‘Apple’, ‘Orange’]. This list can change, so it is a state variable.

and, another variable sectionLabel as ‘Fruits List’ is the same irrespective of the fruits list, as we need to say this component have a list of fruits.

So, we use Props usually to pass from Parent component to Child component, where it does not change. And the state variable, where we need to change its value during the lifecycle of the component.

Virtual DOM

DOM refers to Document Object Model where the HTML code is the document, and the object and the model is the data that we want to render on a web page. Virtual DOM is a lightweight representation of the actual DOM that allows for efficient updates because it is efficient and fast than updating the actual DOM which makes React loved by everyone.

To understand this Virtual DOM concept, Let compare Angular where on the refresh of data, we get a new view, which updates everything on the user screen whereas the React on other side, only updates the data that is changed, instead of updating whole screen. This process makes React efficient and fast, with low memory usage and performance friendly.

What is Next.js Framework?

Next.js is a React framework that simplifies the process of building server rendered React applications. SSR or Server-Side Rendering is a useful process to improve Speed of a web application and also a key factor for SEO as it helps site ranks faster. It provides features like:

Server-Side Rendering (SSR)

SSR is a concept of Rendering the component at server side and serving a page directly to the user rather than rendering at the user end. Nextjs provides rendering components on the server, improving SEO and initial page load performance. The performance is due to reduced page size as well reduced scripts/files to load with on time rendering.

Static Site Generation (SSG)

With Static Site generation we just make static pages that can be rendered without any running servers using Static Site Hostings like Vercel or Github Pages. This makes serving sites cost efficient as well fast and mostly used for static blogs or information pages where we don’t need dynamic data. With Next.js pre-rendering pages at build time, provides fast load times and reduced server load. This makes it friendly to create simple sites that can be served easily on Static Hosting sites.

API Routes

With Next.js you can also create APIs directly, without having a separate backend to manage API logic. With SSR you can add dynamic APIs like loading a user details, checking cart, updated products and more business logic.

File-based routing

Automatically creates routes based on the structure of your project. What this means is based on your file names, pages can be created. For example, we create pages named about, home so by visiting /home and /about we can navigate to pages in the NextJS application, this makes routing easier without any extra logic. You can simply add more pages this way to the application.

Why Use React and Next.js Together?

Now we know features of both, So Combining React and Next.js offers several advantages:

Faster Page Loads

With support for SSR and SSG, one can significantly improve the initial page load time of web application. Can create faster and efficient web application with standards.

Better SEO

SSR makes it easier for search engines to index your content as you can optimize your web application for SEO related config that is available to search engine like any other static site. Because of better performance, Search engines recommend and index your site faster than other sites.

Improved User Experience

Faster load times and a better user experience can lead to increased engagement and conversions. If you site loads fast, Users will love to visit your applications.

Simplified Development

Next.js provides a convenient way to structure and manage React applications. It also provides additional functionality to make ReactJS better and also provide a nice documentation with active community support and powered by the Vercel Team itself making it a Premium Experience Framework for Development with High Standard and optimisation.

Note: You can read more about Next.Js framework on the official website.

Conclusion

In this blog post, we’ve introduced React and Next.js and discussed their key features and benefits. In future posts, we’ll dive deeper into specific topics, such as setting up a React and Next.js project, understanding components and JSX, and working with state and props.

We will also add a project and some code snippets to explain things. So feel free to comment your views about our comment and share the feedback with us. We will also share the link to telegram channel where we share our blog post as soon as they are posted.

Originally Posted at Introduction to React Basics and Next.JS Framework