RE: The React is “just” JavaScript Myth

🗣 This was originally posted as a reply over at Dave’s blog. Unfortunately Disqus – the commenting system Dave uses – thinks it’s spam, so I’m posting it here as a full post instead.

In his blogpost The React is “just” JavaScript Myth, Dave Rupert said this:

React shows up on the scene with Babel, Webpack, and JSX (which each have their own learning curve) then quickly branches out into technologies like Redux, React-Router, Immutable.js, Axios, Jest, Next.js, Create-React-App, GraphQL, and whatever weird plugin you need for your app.

As a developer (who happens to be writing mostly React (Native) these days) I’d like to counter that though …

To start with React, learning ES2015 is essential. Sprinkle some JSX on top and you’re good to go. It’s ES2015 that’s the hardest part to learn. React itself builds on top of these language features. So yes, React indeed is “just JavaScript”.

Regarding “Babel + Webpack + JSX”: Yes, those are the basics. To run a train you need a locomotive, tracks, and a power source. This is not something React specific, but an evolution or the tooling used to write JavaScript (and make sure it runs in older browsers). I know they’re steep, but you will need them.

Although … thanks to things like create-react-app (CRA) you can start coding out-of-the-box as it has the Babel+Webpack motor set up for you. Even though highly interesting you don’t really need to know the inner workings of Babel nor Webpack when starting out with React.

As for JSX: JSX syntax essentially compiles down to functions. You don’t really need JSX, but if you wouldn’t use JSX your code would grow exponentially (<b> vs. React.createElement('b', { children, … })). But here’s the kicker: JSX ain’t hard at all: If you know HTML, JSX can be learnt quite easily.

As for the rest of the things Dave mentions: these are not mandatory. Don’t let this list of fast- and ever-changing technologies overwhelm you, as you can easily create a React app without ‘m:

  • Redux — Even the author of Redux himself says you might not need it. (It is nice to work with though ;-))
  • React-Router — You can perfectly use different pages if you want. Additionally you don’t need a router when refactoring one or two components from your site to React implementations.
  • Immutable.js — I’ve written quite a lot of React apps by now and have used it only once so far.
  • Axios — You can use ES’ built-in fetch instead. No need to learn another library 🙂
  • Jest — Only if you want to write tests
  • Next.js – Never used it
  • CRA – Never used it.
  • GraphQL – Never used it (but I am really interested in it).

Of course, as your code and knowledge evolves, you most likely will start using one / a few / all of those 😉

~

The one thing Dave hasn’t mentioned (by name) in his post is ES2015. To me that was the biggest hurdle to take when starting out with React.

Reading Dave’s post I think his – and many others’ – gripe with React comes from exactly this. It’s easy to confuse React-specifics with ES2015-specifics since React uses a lot of the new ES language features.

Take Array.prototype.map for example (which Dave mentions): that’s an ES feature and has nothing to do with React itself. There’s even an article dedicated to this distinction: “Learning React: Is This ES6 or React?”

Once one embraces these new ES features – which I have a full presentation about – and uses ‘m more often one will start loving them … I know I have 🙂

👋 This post also got published on Medium. If you like it, please give it some love a clap over there.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.