ReactJS notes, part 2

Docs for learning React: Hello, World!

Chrome extensions for React:

In the browser, React is faster than plain JavaScript because it relies on JavaScript objects. We never read from the DOM, and we only write to it the things that have changed. After watching several of the videos in React.js Essential Training (Lynda.com), I’m more than ever convinced that few, if any, journalism projects or apps would call for using React.

Local server with Node

Install and start a local server: httpster (note: This requires Node and npm, which were covered here, including how to install them). Tip: cd into the directory containing your files before entering the command to start the server.

thedirectory $ httpster

The default: http://localhost:3333/

With a basic Hello, World app running in my browser, here’s what the React Developer Tools gave me (open the usual Chrome Developer Tools; find React on the far right side or on the drop-down menu):

Image: React Developer Tools

There’s no requirement that you use httpster specifically, but you need to be running some server locally.

Likely you will use Webpack with React, so you can just use webpack-dev-server.

JSX

This is when I wanted to scream, but I contained myself: JSX stands for “JavaScript as XML.” Hearing that was enough to make me want to scream, but the clincher was when the video instructor said it allows us to “use tags that look a whole lot like HTML.” Argh! We already have HTML!

Then: “JSX is not natively supported by the browser.” This is why we need Babel (also covered in my earlier post) to transpile the code. It just gets worse and worse.

Project file structure

You’ll need two distinct folders in your project (in addition to node_modules): one for the stuff you actually build, and other for the files that run in the user’s browser. In the first videos I watched, these were named build and app. In this set of videos, they’re named src and dist.

What you name these folders doesn’t really matter — you will define their roles in the webpack.config.js file (assuming you’re using Webpack), but you have to be clear on what the purpose of each one is — so you’re putting your files in the correct place.

Loaders

In the last video in section 2 (React.js Essential Training), I understood how the loaders work, or rather, how they are set up in the webpack.config.js file. The test property uses a regex string to indicate which file extensions will be governed by the specified loader. Each loader must be installed with npm, and it is specified in the loaders array.

Image: Code for React loaders

In the strings for CSS and SCSS, the slam (!) separates multiple loaders, which will run in the order given, left to right.

Conclusions today

  1. Obviously there’s no point in learning React to build tiny little websites or apps.
  2. Using a Python framework (e.g. Flask) is simpler than this.
  3. I haven’t gotten to the components yet. Maybe when I do, I will feel more friendly toward React.
css.php