Jonghan Park

I am enthusiastic about learning new technology.

5 minute read



Outline

The purpose of this posting is to look at what React is and what features React has. Beside, I’m going to upload the video for installation of React environment and demonstration of how to use React features.

📌What is React❔

reactLogo

React is a free and open-source front-end JavaScript library that focuses on creating a UI (User Interface) for single-page applications. React is for Web and Mobile and not Framework like Angular and Blazor, and React is not MVC design pattern. React uses a simple grammar called JavaScript XML (JSX) that contains HTML in JavaScript and one-way data binding, and it is a library that uses the concept of Virtual DOM to optimize the performance of web applications. React lets you compose complex UIs from small and isolated pieces of code called “components”.

As I said, React is a JavaScript library that creates UI in single-page applications, so it is insufficient compared to other frameworks that create single-page applications. React, for example, does not provide page switching, so if you need to switch pages using React, you need to use additional libraries such as react-router.

📌What famous websites are built with React❔

  • Facebook
  • Instagram
  • Netflix
  • Uber
  • The New York Times
  • Reddit
  • Airbnb
  • Salesforce
  • Dropbox
  • CNN

📌What features do React have❔

  • Independent components based
  • Constant maintenance by Facebook
  • JSX(JS + HTML)
    HTML is used in JS.
  • Virtual DOM
    Developer can update a specific part in webpage rather than whole webpage.
  • One-way data binding

📌Features detail

1️⃣ Independent components based

So, what is component ❓😕

Component is the “Unit module that performs independent functions in Computer hardware system.”

Unlike hardware, software is not developed independently and is often not developed considering compatibility with other modules, so it was difficult to reuse and manage it. Components are technologies that have emerged to increase software reuse and enable maintenance. When developing web services with react, the UI is constructed using a small, isolated code called a component in React.

const greeting = () => {
  return <h1>Hello, </h1>;
};

const name = () => {
  return <h1>Jonghan !</h1>;
};

I made two components. One named greeting returns “Hello, “ string message, and another component named name returns “Jonghan !” string message. Now, I can use the componentes whenever or wherever I want.

const App = () => {
  return (
    <div>
      <greeting />
      <name />
    </div>
  );
};

These isolated and small components can be reused, and the reuse can improve development productivity. These components are also easy to test which helps maintain the code.

There are two types of components defined in React: a class-based component and a function-based component.

1️⃣ - 1️⃣ Class-based component

Class-based component defines it as class and returns the jsx code from the render() function.

import React, { Component } from "react";

class App extends Component {
  render() {
    const name = "React";
    return (
      <div className="react">
        <h1>{name}</h1>;<p>A JavaScript library</p>;
      </div>
    );
  }
}

export default App;

Class-based component
☑️ inherits a class named Component provided by React.
☑️ has a state function that defines the state of the component.
☑️ has lifecycle method functions that execute functions depending on the state of the component. (three states of the component: Mount when the component appears on the screen (Mount), updates (Update), and disappears (Umount).
☑️ must be a render function and write the code you want to return using JSX.

1️⃣ - 2️⃣ Function-based component

Function-based component defines it as function and returns the jsx code to the return statement.

function App() {
  const name = "React";
  return (
    <div>
      <h1>{name}</h1>;<p>A JavaScript library</p>;
    </div>
  );
}

export default App;

Function-based component
☑️ is easy to write codes by declaring functional components.
☑️ uses less memory than class-based components.
☑️ can return without a render function.

💡 What type of component do I have to use❓

Answer is function-based component.
📢 In class-based components, state can be used, and various lifecycle and methods can be used to manipulate, such as performing additional tasks when a component is mounted or unmounted. However, since Hooks has released, most of the above functions have been implemented in function-based components without writing a class.

Click the link to check what the hooks is.
🔎 Hooks in React official homepage

The reason for recommending function-based component is easy to use, and state functions and lifecycle methods have become available for both class and function-based components. Class-based component is object-oriented which is making the code difficult to understand and has disadvantages that must always put this. when accessing member variables.

💡 Do I have to learn both components❓

Yes❕ There are two reason that we have to learn both components.

  • If the company has used React for a long time, a project developed in the past may use a class-based component. (or convert a class-based component into a function-based component for modern development of old code.)
  • There are lots of resources made with class-based components on Google.

2️⃣ JSX

JSX is a kind of template language that uses JavaScript and HTML at the same time and allows us to use JavaScript variables directly for HTML.

You might have already noticed in the above code block.

const App = () => {
  const hello = <h1>Hello world!</h1>;
  return <div>{hello}</div>;
};

React can use HTML tags in JavaScript as above, and JavaScript variables can be called directly from HTML tags.

3️⃣ Virtual DOM

Virtual DOM is technology that maintains the previous UI state in memory and reflects only the changed part in the actual DOM. Thus, unnecessary UI updates are reduced and performance is improved.

When the UI needs to be changed, the performance is very slow in the dynamic UI. The render tree is recreated when there is a change in the DOM. In this process, the style of all elements are recalculated (CSS), the layout is constructed, and the repainting process is repeated which takes a lot of time.

React uses virtual DOM.😎

The virtual DOM is placed in the memory, and only the changed part is reflected in the actual DOM by comparing the previous and subsequent virtual DOM. React uses virtual DOM to abstract DOM updates, minimizing the number of DOM processing and efficiently proceeding. Virtual DOM is very fast and efficient because modern web applications are huge and data changes dynamically in real time.

4️⃣ One-way data binding

React adopts one-way data binding to avoid the problems and complexity of two-way data binding. Only one watcher(monitoring data changes) detects a data update of the JavaScript and updates the user’s data UI. problems arising from two-way data binding can be solved and tracked because one watcher is used, and the data is updated through Event when updating data.

✏️Two-way data binding: Two Watchers are used for data synchronization, so when more data is created, numerous Watchers for synchronization of this data are also created. The performance degradation may occur.

📌Let’s set a React environment❕

Now, let’s give it a shot❕

I’m going to show you how to set initial settings for a React project. Installation IDE and javascript engine will be introduced. After that, I’m going to make a small project which shows us text messages “Hello World” on screen.

Leave a comment

You may also enjoy