Explain React.js Like I'm Five

Did you find this post useful? Show some love!

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.

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.

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

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.

Very helpful and clear, thank you!

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.

Ben Halpern DEV.TO FOUNDER

Hey there, we see you aren't signed in. (Yes you, the reader. This is a fake comment.)

Please consider creating an account on dev.to. It literally takes a few seconds and we'd appreciate the support so much. ❀️

Plus, no fake comments when you're signed in. πŸ™ƒ

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...

I will encorage anyone to learns javascript well instead learn how to use React..

Classic DEV Post from Mar 6

Which mainstream programming language has the ugliest syntax?

Regardless of the language's usefulness, which language fails the beauty contes...

READ POST
Follow @ben to see more of their posts in your feed.
dev.to is now open source!
View Announcement Post View GitHub Repo
Tiffany Wismer
I was an Admin Assistant and a Barista and now I'm learning code because I'm tired of talking to people. Just kidding. But also not kidding.
More from @tiffanywismer
Explain Proc.new vs. lambda in Ruby like I'm five
#explainlikeimfive
Trending on dev.to
You are NOT a React Native noob
#mobileappdevelopment #reactnative #react #android
How To Start Web Development On Android
#webdev #android #html #javascript
Explain Blockchains, Cryptocurrencies Like I'm Five
#explainlikeimfive
How I learn code on internet and get my first job?
#react #showdev #beginners #javascript
Easy Requests in NodeJS
#javascript #node #asyncawait
BxJS Weekly Episode 24 - javascript news podcast
#javascript #node #podcast #news
What Your Javascript Does When You're Not Around
#devlive #javascript
Show Dev.to: Open source boilerplate app to build your own SaaS product
#showdev #opensource #saas #javascript