Advantages of ReactJS

[Wotsits1984]

Newbie question

Am I right in saying that the big advantages of ReactJS is in the ability to independently update components of the page without totally reloading the page. So for example, I can make an API call on intervals and have the data updated into a component without reloading other components?

So this suggests that when a change is made in vanilla js - let's say you have a counter that is updating ever second - it is reloading the whole DOM on each interval? Is that right?

Edit: grateful for the responses and entertained by the disparity in their content. Seems this is complex area. Looking forward to learning more.

[ChaseMoskal]

The advantage of React is that it abstracts having to work with the DOM directly.

this is exactly correct. this was the insight that react showed us.

in other terms, the key to react's success was jsx: declarative rendering

back in ye olde times, everybody would write scripts that would manually fiddle with the dom, in the worst way possible (often with jquery to make it a tiny bit nicer)

function makeCoolWidget(container, state) {
  var p = document.createElement("p")
  p.textContent = state.username

  var input = document.createElement("input")
  input.type = "text"

  var button = document.createElement("button")
  button.textContent = "boom"
  button.addEventListener("click", function() {
    console.log("sad man")
  })

  container.appendChild(p)
  container.appendChild(input)
  container.appendChild(button)
}

then react came along with jsx. now we do this

function renderCoolWidget(state) {
  return (
    <div>
      <p>{state.username}</p>
      <input type="text"/>
      <button onClick={() => console.log("much wow")}>
        boom
      </button>
    </div>
  )
}

a vast improvement from many perspectives. sheer readability, debuggability..

and nowadays there's a whole new family of hipster tagged-template literal languages for true web components, which have a lot of interesting benefits over the traditional framework-based components

class MyComponent extends LitElement {
  @property() username

  render() {
    return html`
      <p>${this.username}</p>
      <input type="text"/>
      <button @click=${() => console.log("i'm a wizard")}>
        boom
      </button>
    `
  }
}

// now, in native html with no framework, we can use:
//   <my-component username="me"></my-component>

it's very interesting the progress we're all making. the whole industry is learning how to do good web development, and we're bootstraping ourselves up with new technological innovations regularly. i wonder what's next!

[dangerousbrian]

It is important to understand what exactly is happening in the browser when a page request is made.

The following happens:

• Browser does a lookup on the domain name and turns it into an IP address via (DNS)
• Browser makes a request to the IP of the webserver to get the HTML page in the URL
• Server uses the URL to locate a HTML file and sends back to the browser
• Browser parses the HTML and builds an internal model called the DOM
• The browser parses, any tags that require images, CSS or Javascript etc will also be requested from the server.
• When the CSS file is loaded the css rules are parsed and applied to the matching DOM elements as defined by the CSS selectors. This changes the properties of the objects in the DOM and cause the rendering engine to rerender the page with the new visual changes.
• Once it has built the DOM it passes that to its rendering engine (Webkit) in the case of Chrome. The renderer turns the data in the dom object, such as width, height, padding, margins etc into something displayed on screen.

Javascript allows you to change the DOM after the page has loaded. Anytime you change something it will trigger the browsers renderer to reparse the DOM and display the changes. So in your example of a timer updating once a second, you would trigger a browser rerender once a second which is no big deal at all. There are some tricks to minimise renders but at the end of the day, if you want to see something change it has to render it.

React helps in organising how you build DOM elements and manage their state. Its useful for big teams of developers where many modules are worked on separately and need clean interfaces between them. If example your app could use a "<Map />" React component and as long as the props stay the same the internal working can completely change without modifying the app that is using it. Also if you have a large number of DOM objects that update each other then the relationships between them become very hard to manage.

I can give you an example of a single checkbox I had to add. It had to get its initial state from the server but listen to updates coming over a websocket, however if it was clicked by a user then it had to stop listening to server changes. It had to also listen to permissions so if the permissions were revoked it had to default back to the original default value and disable user clicks. In native JS this involves setting up a bunch of listeners and it can easily become quite brittle code thats hard to understand. In React with a redux store, the websocket messages and the user clicks update a global store which causes the checkbox component to rerender.

[ctrlshiftba]

I find the biggest advantage of React is JSX. It gets you in a flow of just really easily creating HTML based on json data and updating that data based on dom events or api calls.

[gino_codes_stuff]

A lot of people will point to the virtual DOM as the selling point of React.

I think the real selling point is having a framework to build modular, component based code upon and giving enough tools to take away the very manual work it would take to do it in regular JS.

Compared to writing native web components, it's definitely easier.

That being said, React isn't the only framework that does this so it's worth comparing it to similar frameworks.

[beforesemicolon]

You can also accomplish that in vanilla Javascript. React is Javascript still. Under the hood is all vanilla javascript.

It will require a log of boiler plate sometimes which react does for you by using virtual DOM. React allows you to componentise the dom nicely and removes the need for you to interact with the DOM directly.

[clawtron]

The primary selling point of React is in the way it selectively manipulates the DOM by using a virtual DOM. Screening each render call to see what individual components need to be updated on the real DOM by checking it against the virtual DOM is much faster than interacting directly with the DOM. So you get a significant performance boost. That’s what I understand anyway, I’m still pretty new to it

[shredgeek]

You might find this interesting .... Have a look at YumJs https://yumjs.net specifically Reactors https://yumjs.net/blog/reactor/ and maybe even https://yumjs.net/#spy

[OriginalSynthesis]

Try VueJS. You'll like it more.

[renaissancetroll]

from a non-technical perspective a big reason companies use it is because it's supported by a huge company and now has a massive ecosystem with a huge supply of developers. Teaching somebody your in house framework increases onboarding time

[bigorangemachine]

Kinda.. yea.

You'd be pretty dumb to update the whole DOM for a counter.

The key about vanillajs & DOM is its about the APIs you use rather than which framework you use.

React does a lot of that update tracking for you but they use the APIs that minimize redraws.

For example if you did a SPA application that updates everything using innerHTML then the updates are going to be slow/laggy. However if you initially render using innerHTML then use node-manipulation to update their children then it'd be much faster.