An Absolute Beginner Learns React

I know nothing about React other than it's a JavaScript framework and I guess it focuses on reactive programming. I know very little about JavaScript, too -- I used to do web development fairly regularly but stopped around 2012. But I want to re-build my website and everyone's using JavaScript frameworks these days, so I thought this was as good a project as any to get some experience. I'll be keeping a stream-of-consciousness log of my trials and tribulations as I go. Hopefully this will be a useful resource for newbies in the same position as me, and maybe it will be a valuable resource for those with more experience -- you'll be able to see where absolute beginners struggle or have misconceptions about React.

Les Premiers Pas

I get about 27 million results when I search "intro to react" on Google. The first few seem pretty relevant:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. (source)

Okay, that seems pretty relevant. Let's go there -- the website is called reactjs.org after all... surely they know what they're doing.

Okay, that's a nice, clean tutorial. It doesn't look too long and it's well-formatted (with syntax-highlighted code snippets, etc.). I think I could work my way through this without getting bored. Let's get started!

ReactJS.org Tutorial First Impressions

Pretty soon I hit this "tip":

"...do I prefer to 'learn by doing'?" I don't know. Part of me thinks I should skip to the "step-by-step" guide, which I can tell from the URL goes to a "Hello, World!" example. But part of me thinks I should stick with this one, because I might get bored with the other. Let's stay here for now.

After a few more lines, I get to...

"I want to see the end result!" I shout into the void and click on the link:

Oh, it's a 'Code Pen'. I've seen other people use these before, but I've never used one. Maybe I'll be seeing more of these that I'm doing a bit of web development? The code seems pretty interesting:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

Functions that return HTML tags? With programatically-determined parameters and contents? That's definitely not something I've seen before. That's seems really intriguing. I'm really interested in building this thing now. Let's go back to the tutorial page to learn how to build it.

I think I'm good with everything in the first paragraph, but the second one not so much. Obviously const statements refer to constant variables, right? I know what classes are generally but maybe classes are different? Arrow functions are lambdas, right? I've seen those before in Java. Maybe I can get through this without reading anything about ES6...

Ooh, I got bored and clicked through Twitter for a bit. I'm back now. Okay, what's next?

I hate doing code tutorials where some of the code is written already, so I'm strongly against Option #1. Instead, let's go for #2:

Okay, I've got to do all these setup steps first. Let's get Node.js installed. This is really easy on Mac as the link in the tutorial takes me directly to a download page where I download a *.pkg file, which runs as an installer. Super quick and easy.

The next step is to follow those installation instructions, I suppose. Do I need to click on the link? Or just run that command? It's unclear. I click on the link:

It looks like the same instructions. So I'm going to disregard everything else at that link and just run that one command from the tutorial:

$ npx create-react-app my-app

...this command seems to be taking a really long time to run. Maybe it's doing some initialisation stuff because this is the first time I've used npm / React?

Creating a new React app in /Users/andrew/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

⸨       ░░░░░░░░░░░⸩ ⠹ extract:eslint-plugin-flowtype: sill extract ...

...yeah that's what it looks like. I'll grab a drink and come back.

Here's what I see when I come back:

added 1980 packages from 735 contributors and audited 36246 packages in 163.458s
found 63 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Initialized a git repository.

Success! Created my-app at /Users/andrew/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

That line about "vulnerabilities" doesn't make me feel good. Especially with the bad press npm has gotten lately. Did I really need to install 1,980 packages to run the demo app? Does that not seem crazy?

Anyway, the little "getting started" menu is nice. The next step in the tutorial says to delete all the files in the project's src/ directory. So I do that:

$ ls my-app/src/
App.css           App.test.js       index.js          serviceWorker.js
App.js            index.css         logo.svg

$ rm my-app/src/*

Continuing with the tutorial, I hit this section...

...ugh. They're still just having me copy-and-paste code. I didn't want to do that, which is why I chose to start the project from scratch on my machine. Maybe I did want to make a "Hello, World!" app after all.

Anyway, I'll continue with this for now, I guess. I follow the instructions in steps 4, 5, and 6. I hate copying and pasting code. I feel dirty.

I run npm start in the project folder and... nothing happens. For a long time. I begin to worry that I did something wrong when Terminal asks for permissions to access Google Chrome. It must be opening the app!

I wait around for another unbearably long period of time.

Wow! There it is. My first React app.

That's it for the first part of this log and the first section of the React tutorial on ReactJS.org. Come back next time to read some more of my ramblings and complaints!