1 Comment

Don’t Eject! – Leave your Create React App in the Disc Drive

Create React App is the easiest and most available way to get into React. And ejecting your app is seen as the gateway to being a “Real React Developer.”

I’m not normally for gatekeeping, but ejecting is worth avoiding. Today, I’m going to try and convince you to take your hand off the eject button.

What Create React App Does

Create React App (CRA) is Facebook’s officially-endorsed way to create a React app. (Who would have guessed?) The setup is as simple as running:

npx create-react-app my-app

Included in your new app are all of the essentials: an assortment of basic web app elements; commands to test, build, and serve your app; a git repo; and plenty of guide rails and documentation for how to get started with React. The benefit of Create React App is that the inner workings are hidden away.

The last feature of CRA is the eject command. If you run this command, CRA rips down the curtain and shows you how everything works. Your CRA is now just a React app. Your boilerplate package.json quadruples in size as the full list of dependencies and configurations get added. You can now configure your app to be whatever you would like.

3 Types of CRA Users

Different kinds of React developers need different things from a tool like CRA:

  • React Newbies – CRA is the best way to pick up React and learn it with an actual development environment. It tucks all of the wiring and plumbing out of the way so you can focus on the furnishings. Your first time in React is better spent learning JSX rather than configuring webpack, setting up a dev server, or finding where to put your app’s entry point.
  • Configuration Junkies – These developers have some unusual need or requirement on their project. Maybe they need to have some fine-tuned control over their webpack configuration, or they need to change what setup files Jest uses before running the test suite. This is the smallest category of React developers. The need for configuration pushes these devs to eject their app.
  • Most Other Developers – These developers want to set up a React app, but they have better things to do than configure webpack for half a workweek. Maybe they don’t mind the configuration, but they don’t need it. I expect most of you reading this post are in this group. You should avoid ejecting your app.

Why You Shouldn’t Eject

The first reason you should stop and reconsider ejecting is that you can’t undo it. (Well, you could reset your commit, but otherwise, it’s a one-way street.) You can’t put this JavaScript back in Pandora’s box.

Want to change something in CRA? You’re probably not the first one; look for other people trying to solve the same problem. CRA is a well-worn tool with a lot of use in the community. It has accumulated a number of ways to solve almost any problem or configuration request you might have.

Following on that point, CRA actually has more configuration than you think. There are a number of tools — like React App Rewired — that allow you to extend CRA without ejecting.

If you can’t find the right tool to extend CRA, consider forking the CRA repo and modifying that instead. This offers you near-total control over the app, and you’re probably going to help someone else down the road. Chances are, you’re not the only one who wants to configure that part of CRA.

Ejecting your React app has major tradeoffs. It gives you all the configuration you want, but it’s time-consuming, expensive, and requires a lot of knowledge. With CRA, you can have a React app without needing to understand every piece of configuration. There’s no need to become a master of the React build toolchain to make a web app.

If you need something that CRA can’t offer you easily, take the time to consider your options before ejecting. There may be alternatives you hadn’t considered, or it’s possible the feature isn’t worth ejecting for anyway.