What others did this summer / checking out create-react-app

When returning from last summer I noticed a shift had taken place: everyone had jumped on to ES6 syntax while I was away. When returning this year I wondered if something alike would have happened again. Nothing as radical, but something had happened, but now in tooling: mostly written about when I was gone was Dan Abranov’s create-react-app.

Since I had done some work before summer centered around a tool with similar intentions, Roc.js, I decided to investigate, here is my small report on how the developer experience of writing a tiny proof-of-concept was:

For instructions on how to install the tool, go here.

The repository I created for the experiment is here.

After installation, I changed to a top directory, ran `create-react-app cra-0`. When installed I changed to the newly created `cra-0` directory and started the dev server with `npm start`. A dev server was then running at `localhost:3000`. The rest of this write-up assumes the dev server is up and running (I never had to restart it). To follow along, have it open alongside developer tools to see errors/warnings.

I wanted to take it for a spin by bootstrapping a static app, installing material-ui and create a simple list based view in the style of a really simple mobile app.

Material UI needs the react-tap-event-plugin to be called once at app init to function well. A simple `import once from ‘lodash’;` threw an error, so I needed to start with an `npm i lodash ––save` to get going.

After that Material UI could be installed with:

After this, I opened the generated `src/App.js` file. There is a `render()` method in it that generates the top-level structure. With the help of Lodash’s `once()` function, I created a helper that would run `injectTapEventPlugin()` maximum once from there:

Which I simply call in the `render()` method.

Still in`src/App.js`, I tried to replace the contents of the main `div` with a dead simple structure:

Something in my installation triggered an error complaining about a missing MUI theme. With the help of this guide, I could correct it, however:

Import the Material UI theme support:

And replace the rudimentary structure with theme provider as root:

This is obviously not much — one could even say nothing, but it’s a taste of this new tool.

Conclusion

create-react-app is a different take on the problem that Roc.js set out to solve. If I were to start a larger project based on something like this today, I’d probably go for Roc since it’s technically further at the time of writing. The `eject` mechanism makes everything possible of course but it has the feeling that it easily lands you with a lot of work.

On the other hand, given Dan Abramov ‏’s track record and the fact that CRA is backed up by Facebook it’s a safe bet that this tool will move forward pretty quickly.

In another project not long ago we investigated the state of various frameworks and a colleague said that what’s missing from the React world is sleek packaging. The project used Ember and I noticed that one of Embers strong points is the Ember CLI can perform a lot of work for you. After that Roc.js went public and I thought that it could be the sleek packaging that my colleague was talking about. I think the arrival of create-react-app makes his point stronger and complicates the matter a bit at the same time.