Tutorials, articles and quizzes on Software Development

What is React.js

React.js is a Javascript library created by Meta, formally known as Facebook. React.js is used to build front end for web applications

Why use React.js?

The building blocks for front end web applications are HTML, CSS and Javascript.

Click here to learn how to build a basic front end web application with HTML, CSS and Javascript

However as a web application gets more complex, so does it code and it can become unwieldy to maintain.

Libraries like React.js are one of many that allow front end developers to organize code to make building out new features easier.

How does React.js make building web applications easier

React makes building web applications easier in the following ways

Being able to organize different parts of your application into components
Having logic and interactivity for each part of your application kept within those components
Having the ability to easily use and maintain your web application
Reacts large community and popularity makes it easy to find resources, learn and onboard new developers

Heres an example where we build a button in HTML and vanilla Javascript that, when clicked, changes its text to change from ‘Click me’ to ‘Hello world’

<html>
  <button id="click_button">Click me!</button>
</html>

const buttonElement = document.getElementById("click_button");

buttonElement.addEventListener('click', function() {
  buttonElement.innerText = "Hello world!";
});

In React, we can have a button component in its own file, where the markup and the logic to change the buttons text will exist in once place

import React from 'react'

export default function Button() {
  
  const [buttonText, updateButtonText] = useState('Click Me!')
  
  function changeButtonText() {
     updateButtonText('Hello world!')
  }

  return (
     <button onClick={changeButtonText}>{buttonText}</button>
  )

}

At a first glance it might seem like using vanilla Javascript would be less code and it would be simpler, since you don’t have to learn how React works and you could utilize your vanilla Javascript skills alone.

But as web applications grow in complexity, using a library like React allows developers to concentrate on specific pieces of their web application in how its created, how it reacts to being loaded, clicked and other events without having to build out their own design system for maintaining pieces of their web application