Installed probably the last custom ROM update on my Galaxy S3 this year

I’ve been running custom CyanogenMod builds on my now aging Galaxy S3 for a while now (12.1, 13). Given that support for CyanogenMod ended at the end of last year, I thought it would be worth one last new ROM before I upgrade my phone this year, and installed the new LineageOS.

Using the already installed TWRP recovery that I already have installed, I downloaded the latest nightly LineageOS build from here, the latest Google Apps for Android 7.1 from here, booted into Recovery, deleted cache files etc, installed both new ROMs and now I’m up and running.

Even on my aging Galaxy S3, I have to say, this Android 7.1 build is surprisingly snappy, even faster than the last CyanogenMod build that I had that was pretty good.

Manually adding create-react-app scripts to an existing React app

create-react-app saves you a ton of time to get a new React app set up with all the dependencies you need for an ES6 based React app using Babel and webpack. Adding the scripts and config to an existing app though doesn’t seem to be documented in the user guide. This post here though walks through the basics.

All you need is to:

npm install react-scripts --save-dev

Then and the default scripts to your package.json:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

Then assuming you have structured your project folders the same as an app created with create-react-app, you’ll be able to ‘npm run start’ and off you go.

Converting my AngularJS AddressBook app to React

Several months back I spent some time looking at Docker and Docker Compose, and put together a sample AngularJS web app served by Nginx in one container, against a Spring Boot JAX-RS RESTful backend in another container, and using MongoDB in another container.

I wrote a couple of articles (part 1, and part 2) describing the Docker containers and how they were configured together using Docker Compose, but I didn’t spend much time talking about the web app itself. I was intending at the time that I’d develop the frontend app using a number of frameworks as a comparison. The AngularJS AddressBook app is functional (on GitHub here), I got part way converting it to an Angular 2 based app (on GitHub here, although clearly I was unsure at the time thinking Angular 2 was called AngularJS2), but the React app I made a rough start at but didn’t get very far.

Given most recently I’ve been spending some time getting up to speed with some React, I’m going to pick up this app again and complete it, so I’ll have an interesting side by side comparison of the same app developed with all three frameworks. More updates to come.

Adding Jest to an ES5 project (‘Unexpected token’ errors on JSX)

So far I’ve been using Jest with ES6 (see here), but to run Jest tests against React code using ES5, you might get errors when running your test and rendering the JSX.

Per the Jest docs, install the required Jest dependencies:

npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer

If you run ‘npm test’ at this point, any tests matching the *.test.* pattern will get executed, but you’ll probably also see an error ‘Unexpected token’ whenever a render() is called that contains JSX.

The quick fix in this SO question is to add a .babelrc containing this:

{ “presets”: [“es2015”, “react”] }

and then when Jest runs against your React components Babel will know how to transpile your JSX.