Labels

Vanilla JavaScript vs React



What is the difference between developing in Vanilla JavaScript and using a framework like React?


##What is React? 

React is a JavaScript library for building user interfaces. It's built entirely out of JavaScript, using a combination of dependencies but it provides a specific way to organize and structure the design of a web application. The key points of React are:

  • Declarative
  • Component-Based (Component is building blocks of the web page that handle their own data and UI logic. A complex UI can be divided into independent units.)
  • Learn Once, Write Anywhere

React is to create a dynamic web page. A web page must manage each page, and the interface must constantly change according to the user's response. It is used to easily implement communication with users as UI and to manage large-scale web pages.


##Difference between React & JavaScript

Let's take a look the interface. In JavaScript, HTML elements are usually implemented as follows.

<div>
  <h1>Blog Post</h1>
  <ul>
    <li>posting 1</li>
    <li>posting 2</li>
  </ul>
<button>post</button>
</div>

React, on the other hand, defines the UI through components returned as JSX, an extension of JavaScript which allows us to write HTML in React.

function BlogPost(props) {
  return (
    <div>
      <h1>Blog Post</h1>
      <ul>
        <li>posting 1</li>
        <li>posting 2</li>
      </ul>
<button>post</button>
    </div>
  )
}

When you add any event using Vanilla JavaScript, you need to create a seperate JavaScript file. It is designed to separate HTML that outputs to screen and JavaScript that implements function.

function uploadPosting() {
  // Add posting
}

However, this approach can be difficult to control as the app becomes larger and more complex. In order to execute the event, additional code is required to connect to the location of the corresponding HTML code.

On the other hand, it can be implemented in one file in React.

function BlogPost(props) {
  function uploadPosting() {
    // Add posting
  }

  return (
    <div>
      <h1>Blog Post</h1>
      <ul>
        <li>posting 1</li>
        <li>posting 2</li>
      </ul>
      <button onClick={uploadPosting}>post</button>
    </div>
  )
}

In this way, even if the app becomes large and complex, it is easy to understand, and the created component can be shared by the entire app, so code can be reused.

By not relying on the DOM to store the current app's state, it improves the user experience and speeds up the developer's work.


##Advantage of React

In a nutshell, to summarize the reasons for using React,

  • It provides stable code through one-way data flow. (One-way data flow means that data is always in a certain place and can only be changed in that place)
  • You can easily manage the state of a component.
  • Reusing React components greatly saves time to code.
  • Virtual Dom of React improves the user experience and speeds up the developer's work.
  • Because it is open source, it is continuously developed and released to the community.







Labels: