In a world of tools that claim ease of use and comprehensive consideration of developer needs Facebook’s official Create React App CLI is an oddity. A legitimately first class tool that with little fanfare or branding just…works. Right out of the box.
It’s set-and-forget autopilot at its finest, and it’s a little disorienting — like magic.
— Sorry to interrupt this program! 📺
If you're interested in learning React in a comprehensive and structured way, I highly recommend you try Wes Bos' React for Beginners or Fullstack Advanced React & GraphQL course. Learning from a premium course like that is a serious investment in yourself.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
If you haven’t done so yet, installation’s as easy as:
$ npm i -g create-react-app
From there, seeding your new app’s just as simple.
$ create-react-app my-new-app
npm start from the newly generated directory and you’re in business with a fully functional, hot reloading dev server. Write your code. Deploy it, even. Live in the grace of a world where tools do just what they say on the package.
It would be pretty easy to end this love letter here, but then we’d be ignoring a glaring curiosity of this developer-friendly gift of fire. Namely, what the hell’s even going on here?
There’s no Webpack config, but it’s definitely using Webpack. Same with Babel. There’s no configuration at all, from what a casual glance at the resulting directory tree reveals.
Wait what? That’s it? Nary a dependency beyond React itself. Alright, magic is cool and all, but what gives?
test do precisely what you’d expect, but
eject, therein lies the truth. With Yarn as its package handler Create React App is able to stow all of its complexity under the hood, and with some astoundingly detailed documentation it can still handle the introduction of the complexities inevitably necessary in all but the most trivial of apps.
But you wouldn’t be a developer if you weren’t at least a little curious what makes the clock tick.
$ npm run eject
Ignore the warning, if only just this once.
OK. That’s more like it. Now two things are going to happen, and you should be prepared for them. First, you’re going to see every bit of what makes your boilerplate work. And second, unless your favorite part of writing an app is meticulously building Webpack configuration objects, you’re going to realize a lot more time and love went into this setup than all but the most steely-eyed devs among us are prepared to match.
That said, this is the view you’ll probably want to be working in when the time comes to refine your loaders or to implement those cutting edge polyfills your code demands. It’s also something of a master course in configuration, chockablock with detailed comments that will only make you stronger for the reading.
👉 It's not often a framework puts its money where its mouth is with a demonstration of best practices in the form of what's ostensibly a Hello World app. Make the most of this one.