React Alicante 2017: Why I Love Create React App

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.

Sync configuration between applications

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

The problem :)

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

Time allocation

Create React App makes our time more useful.

Improved time allocation

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 :)

Updating development stack with a single line change.

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.

before eject

Create React App is not the boilerplate until eject

npm run 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!

after eject

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 result of using Create React App

The End

At the end I will not speak about Create React App. I want to speak about Open Source and Community. I think Open Source is the greatest thing we have. Open Source projects Maintainers do a lot of hard work each day and I very appreciate it. I want to say “Thanks!” to all contributors who makes developer’s life easier and saves our time.

Open Source community

Don’t start to develop your own solution If you need some feature that is not implemented. In much cases this is not justified. First try to suggest feature to maintainers via Github. Community always provide positive reaction on cool and useful suggestions. If not — you should think about it again. Big chance that you also don’t need this feature 😉.

Improve. Contribute. Suggest.

Always remember, when you are working in open source ecosystem and help to improve existing project — you provide a lot of help to developers all over the world!