Javascript React
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-app.
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 create-react-app?
- ES6 features compiled by Babel
- JavaScript code linting with ESLint
- Live-reloading with Webpack Dev Server
- Optimized production builds
Zero
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 (or npm).
$ 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!
Sixty
The yarn start command is where the magic is.
This video highlights the main features of the Webpack Dev Server that is kicked off by yarn start.
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.
Second, linting of our JavaScript is provided by ESLint. Any linting issues, such as an unused variable, will be flagged in the output of the dev server.
Third, the entire app is being compiled by Babel. This means we have access to the latest ES6 features. If there are any issues with our JavaScript that prevent compilation, those will also be flagged in the output of the dev server.
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.
Onward!
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 create-react-app:
