ReactJS from Scratch

ReactJS ships a tool called create-react-app that can generate a new project for you. This gets one started very quickly. But I see several problems with a generated project:

1. The build process is heavily abstracted. Meaning, it hides how Webpack and Babel are used and configured.
2. It launches a web server that uses Websocket to automatically refresh a web page when you modify any code.

These may sound like conveniences rather than problems. But neither will be acceptable in most real life projects. We need to be able to configure Webpack and Babel the we like. Also, most likely we will need to go through a regular web server like Nginx etc.

This is also inconvenient for someone who is new to ReactJS and Webpack. So many things are hidden away from you that you think you are not quite learning how the system operates.

In this article I will create a ReactJS project from scratch. We will use Webpack and Babel. We will learn how to configure them.

Async/Await with Koa

At the time of this writing (July 2017), KoaJS and most of its popular middleware support ES6 async/await. NodeJS had been supporting them for some time as well. Here we will see a minimal example of koa and koa-router packages using async/await.

Install the packages:

npm i koa koa-router --save

Create a JS file as follows.

var Koa = require('koa');
var router = require('koa-router');

var app = new Koa()
var api = router();

api.get('/hello', async (ctx) => {
    ctx.response.body = await f1()
});

app
  .use(api.routes())
  .use(api.allowedMethods());

app.listen(8080);

async function f1() {
    return new Promise((resolve, reject) => {
        let message = {
            greeting: "Hello",
            planet: "World"
        }

        resolve(message)
    })
}

This shows how to use an async method for routing.

Save and run the file.

Then, run curl to test it out.

curl -v localhost:8080/hello

Verify that the response content type is application/json; charset=utf-8 and the body is:

{"greeting":"Hello","planet":"World"}