Go 0 to 60 with create-react-app
I remember the first time I tried out React.js. It was several years back. The promise of painlessly building interactive UIs was too enticing to ignore. As I worked through the first couple introductory tutorials, my computer screen began to shimmer in a way that it had never done before. The pure functions and composable components brought the browser to life.
Just as my excitement for React was mounting, I was stopped in my tracks. Before I could go much further I was faced with tons of tangential decisions about how the project would be configured.
Can't someone just make these decisions for me?
This is the impetus for
Create React apps with no build configuration.
This tagline is another way of saying, "Create React apps! We made all the build configuration decisions for you."
So, what kinds of things do we get for free with
- ES6 features compiled by Babel
- Live-reloading with Webpack Dev Server
- Optimized production builds
create-react-app is a CLI tool that we can install globally and use anytime we want to bootstrap a new React project.
Install it using
$ yarn global add create-react-app
Then create your first CRA-bootstrapped project.
$ create-react-app my-app Creating a new React app in /Users/dev/hashrocket/my-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... yarn add v0.27.5 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 894 new dependencies. ... Success! Created my-app at /Users/dev/hashrocket/my-app
Once the project is set up and all the dependencies are pulled in, CRA let's us know about the main commands available to us.
Inside that directory, you can run several commands: yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd my-app yarn start Happy hacking!
yarn start command is where the magic is.
This video highlights the main features of the Webpack Dev Server that is kicked off by
First off, Webpack is configured with live-reloading. Make some changes to your app, save the file, and see your app update instantly in the browser. This includes state persistence.
The idea behind CRA is to present a fairly standard configuration. If you need to go beyond what it provides, you can
yarn eject your app. This will unpack all of the hidden away parts of CRA such as the Webpack config files. Read more about that here.
Go! Build that awesome React.js app. CRA gives you a great starting point.
An app bootstrapped with CRA can do a lot more than we've discussed here. The project
README.md has a comprehensive table of contents and goes into lots of detail in each section. Check it out.
Are you building something bootstrapped with CRA? Tell me about it on Twitter.
Cover photo by Geran de Klerk on Unsplash.com
Other reading on