In this article, we will discuss one of the most popular and extensively used JavaScript libraries used for front-end web development, ReactJS. Following the current industrial trends and developers’ choices, there are two ways to develop the front-end of a web application. The first is to build on the conventional approach of using vanilla JavaScript code to deal with dynamic runtime behaviors. The second approach utilizes the modern way of using frameworks or libraries to come up with properly planned front-end architectures.

The Issue with Conventional Approach

Back in the days when front-end libraries and/or frameworks were not very common, web applications were developed using vanilla JavaScript with a bunch of supporting libraries such as jQuery. There was nothing wrong (in terms of execution) with the development of web applications using this approach. Sooner when web applications started to grow large in scale and high in volume, the conventional approach seemed really troublesome in terms of code management, maintenance, and scalability. 

Resolution Using Front-end Frameworks/Libraries

At this point, developers found some new ways to deal with these troublesome behaviors, and hence the advent of modern front-end frameworks and libraries started. This new approach helped developers a lot in terms of code management, maintenance, scalability, new feature development, state management, etc. Some of the most commonly used front-end frameworks and/or libraries today are Vue, Angular, and React. 

Agenda

In this article, we will learn and discuss specifically a front-end JavaScript library called React. If you wish to learn about other frameworks/libraries as well, feel free to visit our collection of Vue and Angular tutorials. 

Without further ado, let’s get started!

What is React?

As mentioned earlier, React is a front-end library based on JavaScript which we can use in order to build web applications. It is a library that promotes component-based development and hence contributes to a long term goal of building Single Page Applications (SPAs). You might be wondering that what is component-based development. Well, you can think of it in a way that your web page is divided into multiple parts; header, footer, side menu, main area, etc. Even inside the main area, you might have multiple sub-parts that function differently according to the application use case. In React, we call these parts and sub-parts as components

Using React, we develop these components in a way that they are independent and reusable. Moreover, if we wish to dynamically change a single part of a web page, the whole page doesn’t need to be refreshed. Instead, using the component-based approach, we can refresh that specific part/component without reloading the entire page. 

I hope, by now, you have some basic idea of what React is. Note that if you’re new to the world of React, make sure that you don’t directly jump into the coding/programming part of it. We strongly suggest that you first understand and have a solid grasp of the theoretical aspects. Once you properly understand the gist of it, you can proceed with the actual coding and implementation of a React app.

Basic Technical Concepts in React

React brings a lot of ease in terms of seamless implementation of component-based development. All this is enabled due to some basic technical concepts which are vital to know while developing applications using React. There are many complex ideas and concepts in the overall React infrastructure but the following three main concepts will suffice as a beginner. 

Routing

As discussed earlier, React is a library that supports component-based development. These components are independent and dynamic. We can view or hide these components by navigating within the application and Routing enables navigation among components in the application. It plays its part in changing the URL in the browser window and at the same time keeping the user interface in sync with the URL. 

Routing is an important and one of the first concepts to know as a React developer in order to seamlessly navigate among components. 

Inter-Component Communication

Let’s create a scenario. Suppose that we have two independent components namely A and B. Although component B is independent, it can still depend on any data within the application and expect that data as an input in order to function properly. In this case, assume that component B is dependent on some data which is present in component A. Since we have built both components as independent entities, they have no common variables or placeholders. Hence, they do not have direct access to each other’s data. Here comes the concept of inter-component communication. Using this approach, we allow the independently developed components to share the flow of information/data with each other.

Inter-component communication is another vital concept to know if you’re starting your journey as a React developer.

State Management

Each component has its state. This state is nothing but a set of certain important variables at which the component depends in order to function properly. As per the application requirements and flow, these variables need to be updated. How to handle these changes is primarily called state management.

State management is an extremely important concept because the application can exhibit multiple different behaviors at runtime and all those dynamic behaviors must be properly captured and reflected on the UI at runtime. 

Wrapping Up

This was just a basic introduction and gist of React. There are many different complex ideas and concepts as well. I hope this guide serves the purpose of introducing you to the world of React development. 

Feel free to ask your questions in the comments section below. If you wish to learn more about React, you can check out our collection of React tutorials.