React Alicante 2017: Why I Love Create React App

7 min readSep 29, 2017

Hello! My name is Valerii Sorokobatko and this story is about my lighting talk at the React Alicante 2017 conference.

I have an article Why I Love Create React App where I wrote about:

Why I love Create React App
Why I don’t want to eject
My experience using Create React App
Tips and Tricks
Awesome Create React App

Today I don’t have enough time to speak about all of that. I will not speak about Create React App features in details or discuss other similar tools because it is just tools in the hands of the developers. I am going to speak about the times before Create React App and how Create React App saves our time.

We started to use Webpack a while ago. There were times when each team was looking for Senior Webpack Developers. It’s documentation was not very good. I had to read sources to understand some features and how to configure the way I needed it.

Tools we used

Webpack
babel
PostCSS

Webpack

In many situations there are the same configs in several applications and I didn’t understand why it worked correctly on one but didn’t work on another.

Babel

There were no borders. We could use all unstable features because they looked cool. Features like decorators, functional-bind, and do-expressions. Then our code started to become zombie like with dead syntax features.

We Should

Constantly read all documentations
Configure all tools
Search google to find useful plugins
Setup environments
Optimize production build

Improve Developer Experience

Beautiful output build log
New and old bundle size differences
Environment variables injecting

About problems

It most cases developers should do this only one time and for the application development phase. Problems comes when there are more than 1 application.

We have 5 teams and 30+ React Applications. I have always sought to ensure that all applications have the same webpack config, same babel presets, and the same way to use CSS. Why? Because it is much easier to contribute and support all applications and it is easier to migrate from one application to another.

Also this applies to code and application architectures but today we will not speak about this.

To keep the same configs between applications we should sync it.

It is really hard to sync it all manually. There are a lot of business tasks and development where there is not enough time for technical improvements.

Then we started to use npm to share configurations between applications.

Share configuration between application using npm

But

If we look at the timeline we can see that we spent a lot of time on configuration.

Create React App makes our time more useful.

I ❤ Create React App

There are a lot of analogs… Why Create React App?

It is a tool from React developers. It is like having one stack. I think that no one could develop tools for React applications, configure bundler, code transpiler, or test runner better than React Developers :)

An Incredible Fast Developing Tool

As the user of Create React App I am sure that I will receive all new stable features as fast as possible.

There are a lot of interesting feature requests and really huge flow of ideas from the community. The community is really large and growing.

There are also a lot of third-party tools for Create React App. For example CRA generate: Scaffold a React component.

Easy to use

Or use yarn

When I heard first time about Create React App it seemed to me that the name was strange. For me It looked like “Call to Action”. I understood the idea when I found out about yarn create

Features out of the box

This is short and not full list of features our of the box:

Updating development stack with a single line change

It was the easiest way to migrate from webpack v1 to webpack v2. Without manual config patching :)

Also I always advice to add prettier + lint-staged + husky to keep code always beautiful without manual style fixes and skip all cases when Continuous Integration fails because of there is no semicolon. To understand more about this stack watch “Make Linting Great Again” by Andrey Okonetchnikov at React Amsterdam.

Create React App is not the boilerplate

Create React App bootstraps an application. All scripts and configs are managed by react-scripts package. So just update react-scripts version to receive new updates and feature.

Create React App is not the boilerplate until eject…

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

I don’t suggest to eject application even if you need some custom feature. I’m convinced that 99% that is needed has already been implemented.

After ejection — you will not be able to receive updates. And this is a one-way operation. Once you eject, you can’t go back!

If there are not implemented features in Create React App like CSS Modules or decorators — for me it is better to sacrifice them in favor of receiving new react-scripts updates.

I don’t want to eject becasue:

I want to receive Create React App updates
I don’t want to see a lot of the dependencies at my package.json that are not used directly from code
I always try to keep application as clean as possible. I don’t want to see extra configs and extra code that never changes.
After ejection we will still have problem with syncing configuration between applications.
Fixed development stack. Developers will use only stage-3 features (release candidates).

The result of using Create React App

Before I wrote about tools we used, what should we do and how we try to improve DX. With Create React App this list becomes a much shorter. Because of Create React App we started to investigate CSS in JS solutions and now we are in love with them.

The End

At the end I will not speak about Create React App. I want to speak about Open Source and Community ❤️.

Open Source is a great thing that we have. Open Source projects Maintainers do a lot of hard work each day and I very much appreciate it. I want to say “Thanks!” to all the contributors who make the developer’s lives easier and saves time.

If you need some features that are not implemented in the package
you use — don’t start to develop your own solutions. In many cases this is not justified. At first — try to suggest features to Maintainers via Github. The community always provides positive reaction on cool and useful suggestions. If not — you should think about it again. There is a big chance that you also would not need these features 😉