create-react-app vs other starter projects
I've written a lot about React starter projects. I've catalogued over 100 starter projects, written about when not to use them, and even built a tool to help you write your own.
Now that Facebook has come out with their own starter called create-react-app, you might be wondering if this is the one, true starter project.
Does Facebook's starter project make all the others obsolete?
The Stars
Let's start with the stars. This is a comparison of the top five starters from my list:
Wow. So many star. create-react-app is on a meteoric rise. It just reached the #1 position.
Some of those stars may be from the fame of Facebook having launched it, but there is more to it.
Let's dive a little deeper.
What sets create-react-app apart
Most other starter projects advise you to clone their git repository to get started.
This has a few disadvantages:
- When the starter is updated, you don't get those updates
- Your project immediately has 50-100 dependencies to manage and keep updated
- Your project has boilerplate config that is often complex
create-react-app works a bit differently. When you create a react app with create-react-app you get a project with a single dev dependency: the react-scripts package.
That react-scripts package has everything you need as a sub-dependency. This means a much smaller, cleaner, easier-to-read project with less boilerplate.
Tools
create-react-app relies on several other tools, the main ones are:
- Webpack
- Babel
- PostCSS w/ Autoprefixer
- Jest
- Flow (optional)
If you strongly dislike any of the above, that will be a nonstarter for using create-react-app.
The Good
react-create-app is awesome for beginners because:
- get started with React immediately
- no webpack config: one less thing to learn at first
- no babel config: ditto
- very few dependencies to manage
ES6 and some ES7, linting, tests, build, and even deploy to GitHub pages is all ready to go.
All the provided commands have friendly output that makes working with create-react-app a breeze.
The Bad
A project with such a simple user interface doesn't come without downsides.
create-react-app advertises "no build configuration" and they mean it - you cannot configure this tool.
The most glaring missing piece is CSS preprocessors. They are not supported at all. That means:
- no LESS
- no Sass
- no CSS Modules
- no PostCSS plugins (except autoprefixer, which is included)
If you want to add or change anything, you have to 'eject'. Running
npm run eject spits out all the configuration files so you can edit them
yourself.
It's great to have this option, but if you do it you are left with all the disadvantages of any other starter pack (many dependencies, config boilerplate, no ability to receive updates).
If you are a beginner and you eject you may be in for a shock. Your project will go from 3 dependencies to 49 dependencies.
However, if you compare the ejected create-react-app project to other starter projects, it is still a great starter. It ejects two webpack config files that are about 200 lines each. That sounds long, but they are filled with explanatory comments that are, according to one beginner "better than the Webpack documentation."
My Recommendation
If you are a beginner
Use this tool. It will save you many headaches. You have to write your CSS without a preprocessor, but it's worth it.
If and when you 'eject', take a learning break. Set aside your create-react-app project and start something new from scratch to learn Webpack. Or at least take make sure you understand basic bundling concepts.
Deal with the fact that there are no CSS processors. Build something fun. Deploy it. Share it with your friends.
If you are advanced
create-react-app might make it more fun for you to jump into some really small hobby/side projects, but I suspect you will miss your favorite CSS preprocessor (I know I would miss CSS Modules).
For advanced users, using an 'ejected' create-react-app as a starting point is also a great option.