Start up for React js

React JS, developed by Facebook, is currently the most widely used JavaScript library for creating user interfaces. It enables the creation of modern and high-performing single-page applications or websites.

As a software developer, it is evident that React JS has gained immense popularity within the software industry. This can be observed through various indicators such as the increased adoption of React JS by companies and its growing prominence in the last few years, as evidenced by its significant presence on github repositories and its rising popularity according to GitHub.

React JS Popularity in the last 5 years by GitHub

Is React JS classified as a library or a framework?

React’s categorization as a library rather than a framework is a topic that often leads to confusion. To clarify, it is important to note that React is indeed a library, not a framework.

What is meant by a Library?

In programming, a library can be described as a collection of code that provides predefined functionality. It simplifies the process of writing code or allows us to import specific features from the library into our project. For instance, JQuery is an example of a library.

By utilizing JQuery, we can write JavaScript code more efficiently and with greater simplicity. Alternatively, we can choose to import specific pre-existing features from JQuery into our project. It’s important to note that the project itself remains independent and is not reliant on the library for its overall functioning.

What is meant by a Framework?

In contrast, a framework can be described as a comprehensive set of pre-written code that includes its own functionalities and libraries. When using a framework, developers need to adhere to its predefined rules and conventions, resulting in less flexibility. Moreover, the project becomes reliant on the framework itself. Angular serves as an example of a framework.

React, on the other hand, is specifically designed for building user interfaces. It provides a library of components and tools that facilitate the creation of UIs. Unlike a framework such as Angular, React allows developers the freedom to choose how they structure and program the remaining parts of their projects. Similar to how JQuery can be included in a project partially or entirely, React can also be incorporated in a flexible manner. Therefore, React JS is appropriately classified as a library.

React Virtual DOM

To comprehend the significance of React’s Virtual DOM, it is essential to understand the concept of the Document Object Model (DOM). The DOM can be defined as the representation of the HTML code within a webpage. In this context, the “document” refers to the webpage, while the HTML tags are represented as objects. The DOM is structured as a tree model.

Tree Structure of the Document Object Model

For more details about DOM.

What is the benefit of Virtual DOM?

The Virtual DOM brings several benefits to the development process. Some of its key advantages are:

1. Performance Optimization: The Virtual DOM allows React to efficiently update and render only the necessary components that have changed. Instead of re-rendering the entire real DOM, React compares the Virtual DOM with the previous state and applies the minimal necessary updates to the real DOM. This optimization leads to improved performance and faster rendering of UI changes.

2. Enhanced User Experience: By efficiently updating only the specific components that have changed, React ensures a smoother and more responsive user interface. This leads to a better user experience, as UI updates are seamless and occur without visible delays.

3. Simplified Programming Model: React’s Virtual DOM abstracts away many of the complexities of directly manipulating the real DOM. Developers can work with a declarative programming model, where they define how the UI should look based on the application’s state. React handles the reconciliation process and updates the DOM accordingly, resulting in more straightforward and maintainable code.

4. Cross-Platform Compatibility: Since the Virtual DOM is an abstraction layer, it allows React to work seamlessly across different platforms, such as web browsers, mobile devices, or server-side rendering. Developers can write React components once and reuse them across various platforms, reducing the effort and time required for multi-platform development.

Overall, the Virtual DOM in React contributes to improved performance, better user experience, simplified programming, and enhanced cross-platform compatibility.

React’s Core Syntax: JSX

Unlike traditional frontend programming approaches where HTML, CSS, and JS files are typically separated, React follows a different paradigm. In React, the conventional separation of HTML files is not present.

In the JSX syntax used in React, we write HTML tags within JavaScript code.

Get Pravindu Bhashitha’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Wait…WHAT!?

Exactly :) In React, a simple JavaScript variable can be defined as follows:

const element = <p>Hey! learning react is funny <p>;

In traditional JavaScript, we cannot directly assign an HTML tag to a JavaScript variable. However, with JSX, a syntax extension used in React, we can combine HTML-like syntax within JavaScript. The code snippet you mentioned is an example of JSX, which is a unique syntax specific to React.

What is this JSX?

JSX, short for JavaScript XML, is a syntax extension employed by React. It enables developers to write HTML-like tags directly within JavaScript code. However, it’s important to note that JSX is not standard JavaScript syntax. To ensure browser compatibility, JSX code needs to be transformed into regular JavaScript using tools like Babel during the build process. This transformation allows JSX code to be understood and executed by web browsers.

To summarize, React does not utilize separate HTML files. Instead, HTML tags are rendered directly within JavaScript using JSX syntax. This approach allows for a more streamlined development process and contributes to the overall performance of React applications, as it eliminates the need for frequent manipulation of the DOM. By leveraging this efficient rendering mechanism, React can deliver faster and more responsive user interfaces.

Do we need to work with JSX?

While JSX is not obligatory when using React, it is highly recommended due to its benefits. JSX simplifies the development of React applications and enhances code legibility. Let me provide an example to illustrate the contrast between React code written with and without JSX.

React with JSX

import React from 'react';

const ExampleComponent = () => {
  return (
    <div>
      <h1>Hello, JSX!</h1>
      <p>This is a React component rendered using JSX.</p>
    </div>
  );
};

export default ExampleComponent;

React without JSX

import React from 'react';

const ExampleComponent = () => {
  return React.createElement('div', null,
    React.createElement('h1', null, 'Hello, JSX!'),
    React.createElement('p', null, 'This is a React component rendered without JSX.')
  );
};

export default ExampleComponent;

And here is the equivalent React code written in JavaScript without JSX. I would like to know which version is easier for you to understand.

Some important rules about JSX

• We can’t return more than one HTML element at once, but we can wrap the elements inside a parent HTML tag:

import React from 'react';

const ExampleComponent = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </div>
  );
};

export default ExampleComponent;

• We can use JSX inside for loops, if-else cases:

import React from 'react';

const ExampleComponent = () => {
  const isLoggedIn = true;
  let greeting;

  if (isLoggedIn) {
    greeting = <p>Welcome, User!</p>;
  } else {
    greeting = <p>Please log in to continue.</p>;
  }

  return (
    <div>
      {greeting}
    </div>
  );
};

export default ExampleComponent;

• HTML attribute names like “class” becomes “className”, “tabindex” becomes “tabIndex” as camelCase.

import React from 'react';

const ExampleComponent = () => {
  return (
    <div className="container" tabIndex={1}>
      <h1>Hello, JSX!</h1>
      <p>This is an example component.</p>
    </div>
  );
};

export default ExampleComponent;

• HTML tags must always be closed

Installation

• To install React, you need to have Node.js installed on your computer. If you don’t already have Node.js, you can download it from the provided link.
• After installing Nodejs, open your Terminal or Command Prompt and type the following command to create your React app:

npx create-react-app my-app
cd my-app

• Finally, type npm start and the application should start on your localhost.

Thanks for your support & see you guys soon!