create-react-app, it really makes my life easier. But still I can see there are things that I need to do after bootstrapping a new project with CRA. I will share them to you. And yes, no ejecting. And I create a GitHub repo and added all of them for you.
Auto formatting the code is huge especially when team members all have the same
prettier config in place.
npm install prettier.
npm install -D prettier.
- Install extensions for your IDE.
package.jsonfor formatting the whole codebase:
./node_modules/.bin/prettier --write './src/**/*.js'
- For TypeScript user:
./node_modules/.bin/prettier --parser typescript --write './src/**/*.ts' './src/**/*.tsx'
- For TypeScript user:
Even though nowadays code splitting is very easy to do. But still we will wonder, what’s make that bundle file so big. You can only answer this question by inspecting the bundle file.
npm install -D webpack-bundle-analyzer
- Add the
inspectBundle.jsin the project root.
Updating packages is really a time-saver. It will check all your dependencies and let you choose which one to update.
npm install -D npm-check
yarn add --dev syncyarnlock
yarn upgrade-interactive && syncyarnlock
Why we need that
syncyarnlock is that the current version
yarn won’t sync the updated version number to
And one thing that
npm-check is better is it will check the breaking change such as one lib bumps its version number from
We all know resetting your css. But nowadays the cool kid all use
normalise.css. Basically, it’s a better version
reset.css. As it said in its homepage:
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
npm install normalize.css
import 'normalize.css'to the
Just add one line in your
One caveat: it’s just for develop the static things easier. For things like
state, doesn’t support.
I hate doing things like
../../../../ for importing modules. And
create-react-app supports it.
Just add a
.env file in the project root with a single line:
Now when you importing, it’s all starting from
src folder, if you want to import
src/assets/logo.svg, no matter where you are, you just
import logo from 'assets/logo.svg', huge win, and much easier to understand and refactor later on.
Add in-IDE ESLint linting tip is as easy as adding the following section to your package.json:
Now IDE like VS Code and WebStorm should do their job nicely after you installing the
ESLint extensions and enable them.
You can even add your own rules here, but, they won’t affect how CRA linting your code while building time.
Nowadays, I feel that the IDE can do lots of style linting for you. But if you use
styled-components, I strongly suggest to start using
stylelint, it can find the little problem easily, otherwise, an extra
} in your code might sabotage your whole page and very hard to figure out.
styled-components section for more information.
That’s all. Hope it helps. And I have a GitHub repo for you to start with.