Editors note: Last month we published another article on "5 Things I Didn't Know about Create React App" - check that one out too for more tips and tricks with React!
Learn new tips and tricks for Create React App to make you more productive with tooling and help you build your apps faster.
Create React App is a tool developed for setting up React applications. It saves its users from time consuming-configuration and setup. Using Create React App, users can set up and run single-page React applications in minutes.
There’s a lot this ingenious tool can do for its users. Some features are quite popular, like the fact that it requires no setup, and that users can create a fully fledged application by running a single command. But this tool can do much more than even some of its most faithful users know about.
In this article, we’ll go through a list of ten things you probably don’t know about Create React App. Some of them may come as a surprise to you. If you find that you know most of the things listed here, then you should keep an eye out for the few that are new to you — they might really come in handy.
1. Service Workers Support
Create React App has out-of-the-box support for service workers. That means your application can be a Progressive Web Application that works offline and uses a cache-first strategy. In the latest installment of Create React App (version 2), service workers are opt-in only.
To make use of service workers in your production build, you have to register the service worker in your index.js file. In your src/index.js file, look for the following line:
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
Change the serviceWorker.unregister() to serviceWorker.register(). Opting in to use a service worker makes your application an offline-first Progressive Web Application with cached assets and ability to add to the home screen for mobile users.
2. CSS Autoprefixing
To ensure cross-browser support, Create React App adds vendor prefixes to an application’s CSS. This reduces the stress of manually adding vendor prefixes while styling components. An example of this will be the flex display property. The snippet below will be transformed from this:
.App {
display: flex;
flex-direction: row;
align-items: center;
}
To this after minification:
.App {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
You can control, restrict, and target support browsers by changing the browserlist property in your package.json file using the Browserslist specification.
Read more on autoprefixing in Create React App here.
3.SASS Support
With Create React App v2, support for CSS preprocessor has been added. Finally we have nesting and mixins supported out of the box in Create React App. In previous versions of Create React App, to achieve something similar to nesting, we made use of component composition. To get started using SCSS in your project, install node-sass, then rename all css files to scss.
You can read more about getting started with SCSS in Create React App here.
4. Code Splitting Using Dynamic Imports
In the process of building our application, we can end up with bloated build files. Code splitting as a technique can help reduce the size of build files. Create React App supports the Dynamic import proposal out of the box. Using dynamic imports, bundle sizes can be reduced substantially.
Dynamic imports are asynchronous so they can be used with Async/Await. Using this technique, components are imported on demand and will be built separately from your main bundle file, thus reducing the bundle size.
The snippet below shows how to utilize the import() feature:
import React from 'react'
export class TestComponent extends React.Component{
constructor(){
super();
this.onClick = this.onClick.bind(this);
}
async onClick(){
const component = await import('../neededComponent.js');
}
render(){
return <button onClick={this.onClick}>Lazy load me</button>
}
}
Read more on code splitting using dynamic imports here.
5. Proxy API Requests During Development
Usually during development we set up the server and React app on the same host and port, and then we’ll serve the frontend app on the "/" and maybe serve the API from the "/api" route. Well, with Create React app you don’t necessarily need that setup, as you can tell the Create React App server to proxy such requests to your API server.
So all you need to do to get this feature working is to add a proxy field in your package.json file.
“proxy”: ‘[http://localhost:4000](http://localhost:4000)’
This way any requests that can’t be processed by the development server will proxy to the value of the proxy field in the package.json file. So request to /api/todos will proxy to http://localhost:4000/api/todos.
This is very convenient as you don’t have to deal with CORS issues in development. Read more on proxying API requests here.
6. Support HTTPS During Development
During development, one might need the development server to serve pages over HTTPS. Maybe that OAuth application requires your app to be served over HTTPS before it authenticates or for some other reason. Whatever your reasons may be, Create React App has got you covered, as always.
It’s a very easy setup. All that’s required is setting the HTTPS environment variable to “true” before starting the server. Thus, instead of running:
npm start
On Windows cmd you run:
set HTTPS=true&&npm start
On Powershell run:
($env:HTTPS = $true) -and (npm start)
And finally on Linux and macOS run:
HTTPS=true npm start
Check out the full gist on HTTPS setup during development here.
7. Support for Environment Variables
During development, you’ll have some sensitive information that shouldn’t be included in your scripts. Client keys, client secrets and the rest are best stored in environment variables, and Create React App comes to our rescue again by replacing environment variables referenced in your code base with their actual values.
All you need to do is create a .env file in the root of your project folder and define any variables your wish to use in your files in the following format:
//.env
REACT_APP_CLIENT_SECRET=client-secret
REACT_APP_CLIENT_KEY=client-key
The idea here is to prefix any environment variable you wish to define with REACT_APP and Create React App will replace it with its actual value when building your files.
Check out how you can create different environment variables for production and development here.
8. Support for Latest JavaScript Standards
Create React App supports some of the latest and most used JavaScript standards. The ES6 syntax is fully supported by Create React App along with some other experimental proposals.
Experimental proposals like async / await, Object spread/rest properties are a few others that are also supported out of the box.
To use other experimental features like Symbols, Promise and others requires a polyfill. The polyfill is also provided by Create React App. They never stop helping, do they?
Read more on the currently supported standards here.
9. One Build Dependency
This is more of a fun fact than a point that’ll actually contribute to your development. Create React App makes use of webpack, Babel and the rest under the hood, but builds on top of them to provide a unified experience. That’s why we install one tool and we get a server, linting, transpilation and the rest alongside it.
10. Eject
If it comes to it and you think that there are some features you require in your project that are not supported by Create React App, you can always eject. Maybe you need static type-checking using TypeScript or the build setup doesn’t work well enough. You can always eject.
Now, ejecting simply means copying all of Create React Apps configurations to your project and handing over full control over to you. If you go this way, it’ll be hard but not impossible to go back.
Whenever you’re ready to go down this road, simply run npm eject and the deed will be done. But remember, with _ great power comes great responsibility _.
Read more on benefits and dangers of ejecting here.
These are just ten of the many things Create React App does to aid development experience. Going through their official README, you can find a lot more interesting features offered by Create React App. I hope that some of the things listed here actually help in making your development experience easier and more forthcoming.
For more info on building apps with React: Check out our All Things React page that has a great collection of info and pointers to React information – with hot topics and up-to-date info ranging from getting started to creating a compelling UI.
Top comments (0)