You are using create-react-app and it’s awesome. It’s taking care of a bunch of tools for you behind the scenes so you can get on with coding your React app.
You’ve seen this eject feature and your are curious, what doe this do, and should I use it? You’ve read that it makes package.json more details, reveals a bunch of stuff and is a one-way operation. What does this all mean?
To understand this, we need to look at why create-react-app exists.
Firstly, in order to deliver an application in React, there needs to be compilation of JSX to JavaScript. JSX is a mini-language that is embedded within JavaScript, but it’s a separate invention. It’s not part of what your web browser understands. Therefore you need a tool to convert JSX to JS.
In addition there are other things create-react-app does as conveniences, such as unit testing, CSS auto prefixing, language extras, source maps: lot’s of goodies, some of which you might not need now but they are there anyway.
create-react-app provides these features by using a bunch of tools. These are tools that you could install from NPM yourself and configure. It installs and configures those tools for you to save you this hassle.
It also provides ways to update those tools to the latest versions etc. for you automatically. It aims to hide all this detail from you so you can get your job done. In theory the create-react-app team could even swap one tool for a completely different tool during these updates. You will be none the wiser, it should just all work.
However you might get to a point where create-react-app can’t do something you need it to, and you need to get behind the curtains and configure the tools yourself, or swap one tool for another.
This is where eject comes in. It will convert your project from a project managed by create-react-app to a project that directly uses the tools.
When it does this it writes out all of the configuration files. Updates package.json so that it refers directly to the tools etc. It removes any create-react-app scripts or paraphernalia.
You can now go and configure all the tools in much more detail than was possible before. For example you can now edit the Webpack configuration and add plugins.
However you can’t go back! This is a one-way street. You can’t convert this app automatically to use create-react-app again.
If you wanted to go back you would need to either restore an earlier version of your code from backup or source-control, or run create-react-app in another folder and copy your code across carefully, trying to reconstruct what you had.
Posted by Martin Capodici
