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

Jacob Oscarson
Aug 10, 2016 · 3 min read

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade