Hi All.
Starting today, I will switch to a new category that is React Native. And in this series, I aim to build 1 base app enough for 1 app to use.
Since it is the base, I will not focus too much on the UI part but aim to build a base with the following items:
- Use TypeScript
- Apply React Navigation
- Apply Mobx for state management
- Apply Mobx for validation
- Manage App State change
- Linking
Init Project with TypeScript
Before we begin, we will answer the question why you use TypeScript, just search Google you can find a lot of reasons, and I would like to list some benefits when we use it. TypeScript in developing applications that use Javascript:
- TypeScript simplifies JavaScript code, making reading and debugging easier.
- TypeScript is open source.
- TypeScript provides high productivity development tools for IDEs and JavaScript practices, like static testing.
- TypeScript makes code easier to read and understand.
- With TypeScript we can greatly improve over simple JavaScript.
- TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus higher productivity.
- TypeScript can help us avoid the painful errors that developers often encounter when writing JavaScript by testing the code.
- Powerful class system, including generics.
- TypeScript is nothing but JavaScript with some extra features.
- Structure, rather than nominal.
- TypeScript code can be compiled according to the ES5 and ES6 standards for the latest browser support.
- Aligns with ECMAScript for compatibility.
- Start and end with JavaScript.
- Support static typing.
- TypeScript will save developers time.
- TypeScript is the super suite of ES3, ES5 and ES6.
And with TypeScript’s great top features that should make it worth a try:
- Object oriented programming
- Interfaces, Generics, Inheritance and Modification of Method Access
- It is not allowed to alternate values with different data types.
- The Complice runtime allows us to know whether the data type being used is correct or not
- ……
Now that we go back to our series, there are two ways you can apply TypeScript to your project:
With new project
The new project will be quite simple, just init project with Type Script is done
1 2 | npx react-native init MyApp --template react-native-template-typescript |
With Expo
1 2 3 | npm install -g expo-cli expo init MyTSProject |
For projects already code
- Add TypeScript and the types for React Native and Jest
1 2 3 4 | yarn add --dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer # or for npm npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-renderer |
- Add a TypeScript config file. Add the
tsconfig.jsonfile, remember that this file is in the same row as node_modules:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react", "lib": ["es6"], "moduleResolution": "node", "noEmit": true, "strict": true, "target": "esnext" }, "exclude": [ "node_modules", "babel.config.js", "metro.config.js", "jest.config.js" ] } |
- Add
jest.config.jsto config jest using TypeScript
1 2 3 4 5 | module.exports = { preset: 'react-native', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'] }; |
- Get started by adding new
.tsxfiles or renaming files ending in.jsto.tsx
You should leave the ./index.js entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
The React native homepage recommends keeping the index.js file intact in case of production build errors
- run the
yarn tsccommand to check the Typescript files
Using Custom Path Aliases with TypeScript
To make it easier to import modules without having to use the absolute path, we can configure as follows:
- Edit the
tsconfig.jsonfile and update the following keys:
1 2 3 4 5 6 7 8 9 | "target": "esnext", + "baseUrl": ".", + "paths": { + "*": ["src/*"], + "tests": ["tests/*"], + "@components/*": ["src/components/*"], + }, } |
- Add the
babel-plugin-module-resolverlibrary
1 2 3 4 | yarn add --dev babel-plugin-module-resolver # or npm install --save-dev babel-plugin-module-resolver |
- Finally there is the
babel.config.jsconfig
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { plugins: [ + [ + 'module-resolver', + { + root: ['./src'], + extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'], + alias: { + "tests": ["./tests/"], + "@components": "./src/components", + } + } + ] ] } |
So we have a full Reat Native project setup. Please try yarn run-android or yarn run-ios to check if there are any more errors.
In the next session we will go over to setup and use React Navigation