React Introduction

Have you ever created a website using HTML & CSS? The first time you create something new can be a magical moment in life. If you are deeply interested in this field and want to explore all the possibilities of excelling in this domain, the next thing that comes to your mind is learning JavaScript.

 

As you dive into learning JavaScript, you’ll discover its crucial role in web development. However, you’ll also realize that traditional JavaScript alone is not sufficient to create modern, interactive, and vibrant web applications.

 

Then came this so-called library React, designed to address the challenges faced in traditional JavaScript development. React is here to assist you in creating modern and dynamic web applications.

What is React?

React is an open-source JavaScript library to build user interfaces (UI) for the front end. It simplifies the creation of interactive and dynamic web applications using JavaScript. With React, you can effortlessly develop reusable user interface (UI) components that make a lasting impression.

 

React was initially developed and maintained by Facebook, along with a large community of individual developers. React was initially introduced in 2013 and quickly gained widespread popularity within the web development community due to its efficiency, flexibility, and ease of use.

 

React is also commonly referred as React.js. Sometimes it is called a framework due to its behavior, but it is technically a JavaScript Library.

How React will Work?

In traditional development, when you make changes to a website, the entire webpage gets updated, even if only a small part has changed. This process can be slow and inefficient, especially for complex websites, as it directly manipulates the browser’s DOM (Document Object Model).

 

To solve this problem, React will keep a virtual copy of your website in memory, called a virtual DOM. Whenever there is a change in your website, React will create a new virtual representation of the DOM in memory. It then uses a special algorithm called “diffing” to compare this new virtual DOM with the actual DOM and update only the necessary parts based on the comparison.

 

This comparison process is generally referred to as “reconciliation”. It helps React to identify which parts of the website have changed and require updates.

 

Remember, the virtual DOM is like a blueprint of your website. React uses it to figure out what changes need to be made. The reconciliation process ensures that only the essential changes are applied to the actual website, minimizing the number of DOM manipulations, and improving the overall performance.

 

React is not significantly different from what can be achieved using JavaScript, but it adds additional functionalities to make the development faster and easier. For example, consider a scenario where you want to display a simple greeting message on a webpage. In traditional JavaScript, you would typically manipulate the HTML directly, as demonstrated below.

 

<!DOCTYPE html>
<html>
<body>
  <div id="greeting"></div>
    <script>
      const greetingDiv = document.getElementById('greeting');
      greetingDiv.textContent = 'Hello, world!';
    </script>
</body>
</html>

React simplifies this process by providing a more efficient and structured way to update the UI. Here's how the same greeting message can be achieved with React:

 

import React from 'react';
import ReactDOM from 'react-dom';

function Greeting() {
return <div>Hello, world!</div>;
}

ReactDOM.render(<Greeting />, document.getElementById('root'));

Don’t worry about what is this ReactDOM, <Greeting />. For now, just remember that React simplifies the process of displaying and updating content on a web page by providing a more organized way to write code. It takes care of the behind-the-scenes work, so you can focus on building your application without worrying about manually manipulating the HTML.

 

Simply think, React as a JS + HTML combined and working!

Why should you use React?

That’s, a wise question, indeed! learning React will open a world of possibilities and can greatly enhance your web development journey.

 

  • Reusable Components: React lets us create small pieces of code called "components" (simply the JavaScript functions). We can reuse these components in different parts of our website, which makes our work faster and more efficient.
  • Virtual DOM: React has a smart trick called the "Virtual DOM." It helps our websites run faster by updating the parts that need to change. This is helpful when we have lots of things happening on our web pages.
  • React Hooks: Hooks will enable the use of state and other React capabilities in functional components.
  • Data Flow: React will follow a unidirectional data flow, which means data flows from the parent components to their child components, making it easier to maintain the application state.
  • Large Community Support: React is implemented and maintained by Facebook and a large community of individual developers, resulting in extensive documentation, continuous updates and improvements, numerous libraries, and community-driven tools.
  • Mobile App: If you want to make mobile apps, learning React will also be helpful because there is a similar framework called React Native. It has gained significant traction, with companies like Facebook, Instagram, Airbnb, and Bloomberg using it to build their mobile apps.

History of React

The software engineer Jordan Walke, working at Facebook, created React in 2011 for internal use in developing Facebook’s Newsfeed feature. Initially, React was referred to as “FaxJS”, but later it evolved into what we know as React. In 2013, React (V0.3.0) was released to the public in July of that year. The latest version of React as of August 2023 is V18.2.0.

Previous
 
Next