Develop React (Native) Apps Like a PRO
Improve your code quality with few simple tools
NOTE: You can use npm instead.
ESlint requires configuration placed inside .eslintrc file, or under “eslintConfig” property in your package.json. If you don’t want to spend time defining all the rules for your project, I recommend the eslint-config-airbnb package, which contains very good rules for writing good React applications. Here’s how it’s done:
Now you should see peerDependencies versions listed within a JS object inside your console. Simply replace the hashes in the version and run:
Within the configuration file, create an “extend” key and add airbnb to an array of extensions, and you’re ready to go!
<p-bg-col>NOTE: You can override some of the rules from this preset inside your config.<p-bg-col>
yarn add prettier --dev
When prettier is available in your project you can add a new script to your npm scripts in package.json; the entry could look like this:
It tells prettier to format your <rte-code>.js<rte-code> files within the <rte-code>src/<rte-code> folder with some formatting options. You can check the full GitHub docs.
Prettier plays along with ESlint very well — it provides some eslint presets, so if you’re using them both, don’t forget to add extensions, just like you did with the airbnb preset:
To perform typecheck in your app just add the script to your package.json
Then you can run:
If you haven’t heard about it yet, Haul is an open-source library which is a replacement for react-native packager. It allows you to access a full webpack ecosystem, so things like aliases or symlinks are easily doable. To get more info about what’s possible with Haul, please check the haul repo and the webpack docs. I’ll quickly show you how to add Haul into your project and set some aliases to avoid relative paths and make your code a bit more readable for other developers. First, you need to add haul into your project:
NOTE: It used to be haul-cli until June 2017.
From now on you can run the haul init script:
Notice that there is a new file called webpack.haul.js generated within your project. It provides a hook which allows you to mutate Haul’s default webpack config. There are tons of options to customize your project with webpack. I’ll show you real quick one of my favorite options, which are aliases for directories in your project. Open your webpack.haul.js and edit the exported function:
In this specific case, I created aliases for components, containers, and stores directories and to the routes file.
Now within your project, you can import components like this:
Amazing, isn’t it?
If you’re using Flow inside your project, aliases will produce an error. If you want to get rid of it, you need to specify module.name_mapper in your .flowconfig options. The module name mapper definition for our aliases should look like this:
No errors! Yay!
UPDATE: Recently, we've refreshed and add new features to Haul. As it was a major update, we decided to rename the library to Re.Pack. Check out its webpage to see what's new!
Also, we've prepared an episode of The React Native Show podcast fully dedicated to Re.Pack in which Paweł Trysła, the lead engineer at Re.Pack (previously Haul) dives into details of this library. You can watch it here:
Testing is very important to ensure your code quality. When it comes to testing React components, Jest is my first call. It’s already bundled with the RN initial project, so you don’t have to install anything. With snapshot testing, you can cover a nice amount of your code without writing a lot of code in your test files. Look how simple wring a test for the component is:
If you want to learn more about snapshot testing check out this great Callstack article.
There are a lot of other tools and libraries to help you increase your app development skills. I put everything you read today and some other cool libs inside an example app. If you want to learn more about other tools, check how to write React Native apps with MobX.