Discussion on: Explain React.js Like I'm Five

[Ben Halpern]

React is a JavaScript library primarily meant for the hairy problem of measuring state.

State refers to the current truth of an application. If I visit a web page, it starts in a certain initial "state". But maybe I stick around and I click a toggle that opens a menu. The app is in a new state when the menu is open. Maybe I stay on the page longer and I click a "like" button and the thumb turns blue. That is now a new state for the app.

What if in the corner of the page there is a counter for the number of "likes" I have left on the site. Well now when I create a new state by hitting the like button I should probably update that number. It could be confusing if they get out of sync.

I'll admit I'm not the strongest at math, but I know that combinations and permutations like this get really really complicated. Trying to keep track of all the states a page can be in is incredibly complicated.

React makes state management easier by storing a central truth and letting the truth trickle down to the components that make up the app, as opposed to the juggling act of telling each component explicitly how to act. They are set up to be a reflection of the state. Once I've clicked the like button, it's impossible for the counter not to know how many likes they should be counting as long as each component is being rendered based on the same state.

React is "declarative", in that the main goal of your logic is telling the program "it should look like this" as opposed to "imperative", which is more like saying "you should do this".

Let's say I want to update the contents of an element based on a user clicking a button.

Vanilla JS (Imperative)

button.onclick = function(e){
  document.getElementById("target-element").innerHTML = e.target.dataset.text
}

React (Declarative)

handleClick(e){
  this.setState({text: "NEW TEXT OR WHATEVER"})
}

render() {
  const results = this.state.activeTerms.map((term) => {
    return <div>{term}</div>
  })
  return (
    <div>
      <button onClick={this.handleClick}>Click Me</button>
      <div id="target-element">
        {this.state.text}
      </div>
    </div>
  );
}

In React HTML is always re-rendered when the state is changed so the app always has a concept of what "text" is. In plain JS, you explicitly tell the component what its text should be. This example itself is probably easier to do in plain JS (or jQuery), but as an interface grows in complexity it pays dividends to follow this way of handling state.

[Tiffany Wismer]

Ben, that was awesome. Thank you!!

[Ben Halpern]

Glad I could help!

[Andre Christoga Pramaditya]

This is why we need a new category for explaining about stuffs, can't we just make something like Explain the basics of n or something. Some things are just too complex.

[Evaldas Buinauskas]

Agreed. Or maybe we should not take tags for granted.