Why Use React?

Introductions are hard, so I'm just gonna jump right into this.

Here's an example from the Vue.js getting started guide:

If you're familiar with JavaScript, the first chunk shouldn't be too hard to grok. The second part is HTML, except Vue has introduced the attribute v-for into the mix, which lets you perform a loop with some crazy Vue magic.

This is how I would do the same thing done in React:

It introduces markup directly into the JavaScript file, but uses JavaScript's existing logic; in this case it uses map to iterate and transform the array.

I think this shows the two fundamental differences between the two approaches:

• Vue and Angular try to shim logic into markup.
• React tries to shim markup into logic.

Both of these approaches create a DSL.

When you're working with Vue or Angular you're using their flavor of logic mixed into your HTML.

When you're working with React, you use JavaScript's native logic mixed with its flavor of markup (JSX).

I think introducing logic into HTML is fixing the wrong part, I don't need magic in my HTML, I need a way to update the DOM from JavaScript.

JSX is the biggest deviation from regular JavaScript that React introduces, it's similar to XML/HTML, but not quite same. The difference between JSX and the normal HTML you'd write can be summed up pretty quickly:

• attributes that are hyphenated must be converted to camelCase (ie tab-index becomes tabIndex)
• JavaScript keywords must be re-named (ie class="foo bar" becomes className="foo bar")
• all tags must have a closing tag or be self closing (ie <div></div> or <div />)
• you can embed arbitrary JavaScript expressions (to be distinguished from plain text) inside your markup by wrapping them in curly braces

And it's optional. JSX is just syntax sugar for a function that looks like:

Typical React components are just regular functions that return React elements. Arguments are called "props", and are read-only. You can write classes which contain state and cause re-rendering, and there are some lifecycle hooks you can use in classes.

You make changes to state and React updates the DOM. That's really all there is to it.

This is why I use and recommend React.

Conversely, Angular and Vue introduce a huge amount of DSL logic, and Angular in particular has one of the largest APIs I've ever seen in a library. Vue also seems to get hairy when you want to do more complex things outside of the simple logic it tries to provide.

To be fair, with React there's some pretty complex tooling involved if you want to use JSX, at minimum you need a compiler like Babel, and a bundler like Webpack if you want to organize your code into multiple files and distribute it with React as well (See my post about them here).

If you've made it this far, you've learned pretty much everything about React except how to deal with state, so in parting I would like to offer a small example using React to query a JSON API and print the results.

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const User = (props) => (
  <div
    style={{
      padding: '0.5em',
      margin: '0.5em 0',
      background: '#ddd',
      borderRadius: '5px',
    }}
  >
    <div style={{ float: 'right' }}>
      <img src={props.picture.large} style={{ borderRadius: '5px' }} alt="" />
    </div>
    <pre style={{ margin: 0 }}>{JSON.stringify(props, null, 2)}</pre>
  </div>
)

export default function UserList() {
  const [state, setState] = useState({ status: 'waiting', users: [] })
  function getUser() {
    setState((s) => ({ status: 'fetching', users: s.users }))
    fetch('https://randomuser.me/api')
      .then((res) => {
        if (res.ok) return res.json()
        throw new Error('error fetching user')
      })
      .then((res) =>
        setState((s) => ({
          users: res.results.concat(s.users),
          status: 'loaded',
        })),
      )
      .catch((error) =>
        setState((s) => ({ users: s.users, error, status: 'fail' })),
      )
  }

  if (state.error) console.log(state.error)

  return (
    <div>
      {state.error ? state.error.message || state.error : null}
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <button onClick={getUser}>add new user</button>
        {state.status}
      </div>
      <div>
        {state.users?.map((u) => (
          <User {...u} key={u.id.value} />
        ))}
      </div>
    </div>
  )
}