Tiffany Wismer

Posted on Mar 4, 2018

Explain React.js Like I'm Five

#explainlikeimfive #react #javascript

Top comments (15)

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 • Mar 5 '18

Ben, that was awesome. Thank you!!

Ben Halpern • Mar 5 '18

Glad I could help!

Andre Christoga Pramaditya • Mar 5 '18

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 • Mar 5 '18

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

Nick Taylor • Mar 5 '18 • Edited

I’ll try and keeps this short, elevator pitch style and see if that works out ;)

React is a library that is really only concerned about the view, i.e. what you see on your screen. For example the HTML rendered in a browser. To manage this, it uses state and props, essentially two forms of data being passed in to a view. The same data passed in to a view will always result in the same outputted view. If the data is different, the output of the view will change.

The way data is handled in react is simple. Actions go up, e.g. a click of a button, and data (state and props) comes down, e.g. result of clicking a buttton.

How you manage application state is entirely up to you.

Tiffany Wismer • Mar 5 '18

Very helpful and clear, thank you!

Mr.I • Sep 4 '18 • Edited

I’m drawing a finger painting and really want a yellow background but I only have three colour to use: red, green or blue.

With JavaScript, I add red paint to the canvas first, which makes the colour change. It looks different now; the state has changed. Next, I add some green paint and the colour changes to yellow (along with the canvas state).

With React.js I can mix the colours beforehand using a pot, which React calls a component, just before the canvas (and state) is updated.

Both ways work just fine but it’s bit annoying having to add the colours individually and keep track of the changing colours on the canvas. It’s much easier to mix the colours beforehand and add them straight to the canvas.

Letícia Monteiro • Mar 22 '19

Now that is a "like I'm five" explanation! That's great, thank you. :)

Alex Lohr • Mar 7 '18

React is a tiny part of a set of libraries that solve certain problems for web apps. It provides a way to create a hidden representation of the app and manage its state to have the actual changes be then put into the browser window by React.DOM.

React also allows apps to be split into reusable components. Each of those has its own state which is kept inside and properties from outside. The state is managed by the component itself. The properties are managed by whatever part of the app includes the component (or some other solution to manage the overall state of the application, for example Redux, but that's a story for another day). Whenever one of them changes, the hidden representation gets updated and is then compared with the visible app. Only those parts that changed get updated, which saves some time.

Because it is easier to write, the hidden representation is no longer written in plain javascript, but in an extension of the language called "JSX", which allows using HTML tags inside javascript files and is then transformed back into javascript.

Tiffany Wismer • Mar 8 '18

Thanks Alex!!

Marco Suárez • Mar 7 '18

Imagine a web page as a set of objects, each object has a design and does certain stuff. ReactJS is a JavaScript library that lets you create these objects, and calls them Components, each of these Components have a state (information about a the Component, which you can modify at given times).

Well, you said like you were five...