Tongfamily (Richtong.com Sync)

Errata and Fixes

Well these guys have a really useful tutorial, unfortunately, it has bugs in it and apparently my disqus comments keep getting rejected, so here is an errata sheet for the Fullstack React Tutorial. They are focused on their book and other content so not surprising, still if you want to use their stuff, here are the things you need to know:

• At one point they use an onMarkerClick which isn’t yet defined
• In the Item section, there is a missing style in the style.module.css for Item, the h2 should have a font-size: 1.2em; or something like that otherwise it picks it up from the main header.
• There is a missing section in the description for adding Sidebar where it is not hooked into the main, you have to add that into the caller
• The Karma tests for Rating will not pass because Karma does not allow the variable wrapper to be reused. The fix is that each test should use wrapper1, wrapper2,...
• One of the tests in Ratings.spec.js is wrong, is says a rating 4/5 should be 90%. It should of course be 80%
• There is a section where they talk about the routing and there is a typo that says path="" but it should be path="/" in route.js

React structure

This tutorial is mainly focused on providing code, so they don’t explain some of the relatively complex ideas and various tricks they are using:

1. When you call a component, there is no easy way to call have a bunch of arguments, instead, you construct an associative array and pass that.
2. There are two objects with semantics they are this.props which are all the parameters passed down to you by the caller and this.state which are your variables. A lot of react is about passing these parameters up and down.
3. There are lots and lots of levels in React code, I almost lost myself in a maze of directories, but basically, this code style like small modules in individual directories and the main ones are src/view which are where the rendering code is.
4. This uses Ecmascript 6, so they do have classes which have both functions and variables and some interesting notation like ‘(a,b) => { return a, b} which is basically a function call writeen like a lambda expression.

Notes on writing React code with stylelint and eslint

Ok most people using React are going to be experienced web devs, but if you are (like me) a complete Noob the learning curve can be pretty high if you just use  your google-fu. Here are some notes about the model:

1. There are a whole bunch of implicit variables. The most important of these are this.props which are read only parameters passed down and this.state which are variables. Remember that Javascript doesn’t do any checking, so simple typos like this.props.place vs this.props.places will work just fine. If Javascript doesn’t see a variable, it just instantiates it. You can add the line 'use strict' at the top to get better type checking.
2. The same is true with CSS, it is very picky. I found that the only way to be productive was to turn on all the linting that I could find. This is some trick since I use vi but syntastic is a good tool and with some tricks, the two best tools for this seem to be eslint with the eslint-babel pluging and the react plugin. The CSS, the best one seems to be stylelint and its stylelint-default-config
3. This JSX has lots and lots of syntax because node reverses everything so everything is a function (you are always a layer down at least). And because as soon as you see a < you are suddenly in HTML land and everything reverses. So eslint is mandatory.