Tag: reactJS

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.

ReactJS notes, part 1

I’m watching a video series from O’Reilly (also Addison-Wesley, LiveLessons, InformIT, Pearson) called ReactJS Fundamentals, by Charles David Crawford.

Step 1: Install Node. If you’ve installed Homebrew on a Mac, you can install Node with this:

brew install node

Having installed Node, you now have npm, a package manager for JavaScript.

Step 2: Use npm to create a file, package.json, which you can do simply with this command:

npm init

Since you’re just getting started, you can press Return/Enter for each option until you get back to the bare command prompt. Now you have package.json in whatever directory you’re in.

If instead of just hitting Return you wanted to fill in all the options properly, which of course you would do for a real project, here’s a guide. See also this. The package.json file is going to manage all your dependencies for the project, app, site, whatever.

Step 3: Since you’re starting a ReactJS project, you install it like this:

npm install --save react

This created a new file, package-lock.json, and a new folder, node_modules, inside of which is a whole bunch of crap that ReactJS apparently needs. This is why you had to install Node to get npm, etc. — because ReactJS needs all this stuff.

The guy in the video goes through all of this in less than 4 minutes, which is a bit overwhelming if you’ve never used npm or any of this before now.

Important: In a production environment, where you’re committing changes to GitHub, you will commit package.json, but you will add the folder node_modules to your .gitignore file. The package.json file will handle all the dependencies on the server. Therefore, you do NOT want to commit/upload the node_modules folder.

Step 4: Install even more stuff to make it all work.

In the videos, the guy is using Webpack to smush all the JavaScript into one file, so you have only one <script> tag in your HTML. It doesn’t minify the code, though. More about Webpack.

He’s also using Babel, a JavaScript compiler, to convert ES6 for old browsers. He has separate videos explaining these in some detail.

npm install --save-dev webpack -g
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2016
npm install --save-dev babel-preset-react
npm install --save-dev react-dom

Yeah, I know — it’s a lot. And we haven’t even learned any ReactJS yet.

Step 5: Create webpack.config.js file and write a bunch of things in it.

I’m dying here. The code is not supplied with the library’s link to these video files. At this point I was getting lost because the guy is running code he’s got in the project, but he hasn’t shown us how to write it. I was able to cobble together working code based on a repo I found on GitHub, but I realized at this point I couldn’t continue this course without the code.

In package.json I’ve got (among other code):

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
}

So when I enter the following command, Webpack is invoked, and Webpack runs Babel:

npm run build

Babel applies ES6 transformations and React transformations (because webpack.config.js tells it to; it’s not automatic, and we did install the presets for those). Webpack also bundles all JavaScript files into one concatenated file, creating or rewriting bundle.js in the build directory. The directories app and build, as well as the filename bundle.js, are all set up in webpack.config.js.

Step 6: OMG another install:

npm install --save-dev webpack-dev-server

This is when I abandoned the ReactJS Fundamentals videos, because the guy opened a new set of files with a bunch of new code, and lacking those files, I couldn’t run anything.

css.php