ReactJS development – an introduction to the popular JS library and its applications

What exactly is React? What kind of applications is it typically used for? And an introduction to its technical qualities, pros and cons

Software developmentUPDATED ON June 7, 2021

Author

an introduction to React development

ReactJS is an open-source JavaScript library for building UIs, developed by Facebook, used to create web applications. The React framework is written in the JavaScript language and was developed by Jordan Walke at Facebook in 2011. Facebook subsequently open-sourced the library in 2013.

Fast forward to 2021 and there are more than 54 million websites based on React. Websites or applications built using React for their front end can have interactive, data-heavy dashboards or data visualization tools. As a UI library, React is a popular choice for social networking apps and e-commerce web applications.

Why is React development such a popular choice for dynamic web applications? What are the library’s strengths and drawbacks? And what are examples of the kind of applications React might be a good choice for and others it may be less well suited to?

Can We Help You With Your Next React Development Project?

Flexible models to fit your needs!

React as part of the JS ecosystem for front-end web development

Before going into more detail on React development as a front-end technology choice, let’s quickly cover some fundamentals:

Static websites

Web page content is static or does not change. Static pages are created using HTML and CSS.

Dynamic websites

Dynamic or interactive websites change the content being served to the user without needing to be refreshed by being reloaded in the browser. For example, a Facebook or LinkedIn feed will load comments made by another user in real-time.

Javascript

Real-time updates to websites or web-based apps require client-side rendering. JavaScript, a lightweight interpreted programming language, is the programming language of choice for web applications that need to make use of client-side rendering.

User Interface (UI)

A user interface is anything we put in front of users to have them interact with an application. We can use React to describe a UI for an application.

DOM

Document Object Model. The object-level representation of a web page. You can write JS code to manipulate web page objects within the DOM.

Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.

Front end (of a website)

The part of a website that the user interacts with directly. It can also be referred to as the ‘client side’. The front end includes items that users experience directly: text fonts, colour and styles, images, graphs and tables, buttons, navigation menu and so on. The languages used to develop the front end of a website are HTML, CSS, and JavaScript.

Responsive Frontend

A good front end must have high performance (load quickly) and be responsive. A responsive page appears correctly on devices of all sizes from monitors to smartphones. All key parts of the website’s front end should render in a way that is appropriate to the screen size.

SPA

Single Page Client Applications

Javascript Framework

A JavaScript framework is an application framework written in JavaScript where programmers can manipulate the available library functions within templates. JS frameworks allow you to create, modify, and delete UI elements like lists, tables, etc. Frameworks can be for the frontend or backend.

JSX (JavaScript XML)

A combination of JS + HTML.

Front-end JS Frameworks

Some of the more popular front-end JS Frameworks are:

ReactJS

React is not technically a framework; it’s a library for rendering UI components. React is used in combination with other libraries, for example, React DOM, to make applications. Because React and ReactDOM are so often used together, React is colloquially referred to as a JavaScript framework.

Angular

An open-source web application framework. Angular is a component-based framework that uses declarative HTML templates. The framework’s compiler translates the templates to optimized JavaScript instructions.

Vue

Vue, like ReactJS, extends HTML with some of its own code but otherwise relies on modern, standard JavaScript.

About ReactJS

React is a library for building web-based UIs.  It can be used to build various types of applications. Common examples include dashboards or data visualization tools, single-page websites, social networking apps, media sites, video platforms, marketplaces, eCommerce platforms.

Note:

In 2015, React Native was released to be the React mobile development solution. React Native is a hybrid app development framework that gives developers the ability to reuse over 90 percent of their code in both iOS and Android app development projects.

It is important to understand the definition of React before you proceed. The official definition of React is that it is a JavaScript library for building UIs. Let’s look at the two parts of this definition.

Firstly, ReactJS is a JavaScript library. It’s not a framework. You may have to sometimes combine other libraries with React.

ReactJS is used to describe web UIs. Based on the description provided by a developer, ReactJS builds the actual UIs, which is easier and saves time compared to manually creating UI components from scratch using web APIs and JavaScript.

React has a small API set to learn and JavaScript skills are necessary to fully develop a React-based application.

In the Model-View-Controller (MVC) and Model-View-View Model (MVVM) architectural patterns for web development, ReactJS fits into the “V” part – that is the View part. This implies that React is responsible for the View layer of the application only.

Virtual DOM

At its core, React maintains a DOM tree, which executes computations on the nodes. Today’s interactive websites and applications have complex and large DOM trees. Every time inputs or queries are made, a real DOM has to rewrite the entirety of the page, which can hamper performance and waste memory. The issue with ‘real’ or traditional DOM constructs is that when they process changes, they must rewrite the entire DOM tree.

Instead of rewriting the entire DOM tree every time a change is made by a user, a virtual DOM only updates the element being manipulated. For example, let’s say that you have a To-do list of five items. A real DOM will rewrite and re-render all five items once one item on the list is selected. A virtual DOM only rewrites the single item that was selected instead of the entire list.

React implements a virtual DOM which is much more efficient, performs faster, and ultimately leads to a better UI.

React development basics

You need to understand the concept of a ‘state’ while using ReactJS. ReactJs uses components in which the application is written. Components can have a state or be stateless.

Stateless components simply accept data and display it in some form. They are mainly responsible for rendering the UI. A stateless component or uncontrolled component is a simple function that takes inputs, executes functional statements and returns an output. A stateless component is usually associated with how a concept is presented to the user. It is similar to a function in that, it takes input properties (props) and returns the output (react element). You can use a stateless component when you:

  • Need to present the props
  • Don’t need a state or any internal variables
  • Create an element that does not need to be interactive
  • Want reusable code

A  component can be defined as a stateful component or a controlled component when it handles a change in state. Whenever there is a state change the component re-renders in react. In a counter application, for example, when you click the Count button, the value of the counter increments. Here, the value of the counter is controlled by state property counter.

Other instances where you require stateful components are:

  1. When you are building an element that accepts user input or an element that is interactive on page
  2. When the element value is dependent on its state for rendering, such as fetching data before rendering
  3. When dependent on data that cannot be passed down as props

Syntax

A stateless component can render props, whereas a stateful component can render both props and state.

In stateless components, the props are displayed as {props.name}

In stateful components, the props and state are rendered as {this.props.name} and {this.state.name}respectively.

Components

Components in ReactJS are independent pieces of functionality. They describe parts of the UI. They receive a ‘properties’ object and return a React element. A component is thus a basic building block of a React application. It can be either a class component or a functional component.

React components are independent and reusable and contain JSX (JavaScript XML Syntax) which is a combination of JS + HTML. It may take props as the parameter and returns a DOM element that describes how the UI (UI) should appear.

ReactJS isolates all components. This means changes or updates to one instance of a component do not affect all other instances of the same component. React allows developers to effectively reuse design components which saves them time and makes their code more accurate.

React development pros

Some of the advantages of using React in hybrid mobile applications and Single Page Applications are:

  • Unidirectional data flow
  • Server-side rendering
  • Virtual DOM
  • Reusability
  • JavaScript XML
  • Components
  • One-way Data Binding
  • Virtual DOM
  • Simplicity
  • Performance
  • SEO friendly

React development cons

  • JSX syntax.
  • Fast development pace.
  • Somewhat slow documentation.

Applications based on React

Some different types of applications that you can create using React include:

  • Blogs (Gatsby)
  • Business websites
  • Portfolios
  • Forums
  • Rating websites
  • Membership sites
  • eLearning modules
  • Personal websites for self-promotion
  • Job boards
  • Business directories
  • Q&A websites like Quora
  • Non-profit websites for collecting donations
  • Wikis and knowledge bases
  • Media-centric sites like YouTube
  • Auction and coupon sites

Some popular apps based on React development:

When does IT Outsourcing work?

(And when doesn’t it?)

Kinds of applications React probably isn’t a good choice for

As with any web development technology, React isn’t suitable for every kind of front end you might want to build. Some examples of web development projects that should probably avoid React would be:

Projects with limited Resources

React applications should be built and maintained by skilled React developers. Because React developers are more expensive than PHP or other language developers, that great static websites can be built using, the framework probably isn’t a good choice for smaller projects with corresponding budget constraints.

Static applications

React is for scaling and managing state. If you don’t need to scale or you have little/no state, you don’t really need React and can opt for a cheaper, simpler technology like simple HTML or PHP or use a solution like WordPress.

Getting started with React

To get started with React, you must install npm – the node package manager. It is a package manager for JavaScript and the default package manager that comes with NodeJS when it’s installed.

It consists of a command-line interface and an online database of public packages and private packages that are paid which is called the npm Registry.

React create-react-app

With so many build tools, starting a new React project is often complicated. It uses many dependencies, configuration files, and other requirements such as setting up Babel, Webpack, and ESLint before a single line of React code can be written.

Luckily, the Create React App CLI tool removes many of the complexities and simplifies the process of building a React app. For this, you need to install the package using npm, and then run a few simple commands to create a new React project.

The create-react-app is an excellent tool for beginners and allows you to create and run React project very quickly. It does not require any manual configuration. The tool wraps all of the required dependencies like Webpack and Babel so you can focus on writing React code only. This tool sets up the development environment, provides an excellent developer experience, and optimizes the app for production.

Requirements

The create-react-app is maintained by Facebook and is cross-platform compatible so can be used on all of macOS, Windows and Linux.

Add React to a Website

You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

Create a New React App

When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!

As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem.

ReactJS code example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, Let's learn ReactJS!!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Compile and build React applications

A detailed description of the installation, compile, build and run processes are out of scope. You can refer to this page for details of the entire flow to run a React code.

Local Development Environment for ReactJS

Follow the steps outlined in this tutorial to set up your local ReactJs development environment.

Resources

To get started with ReactJS as a beginner, you can look up the following:

In summary

This blog covered the fundamentals of React development. React is used to build interactive websites that can be easily tested and maintained.  It is relatively easy for developers, especially those with previous JavaScript experience,  to learn and use, simplifies the development process, and supports the latest JS standards (ES6).

K&C - Creating Beautiful Technology Solutions For 20+ Years . Can We Be Your Competitive Edge?

Drop us a line to discuss your needs or next project

Related Service

Cloud Native Development, Migration, Infrastructure & Consulting Agency

Read more >

Angular Development and Migration Services

Read more >

Software Development For Startups

Read more >