https://github.com/morishin/reactnativepractice
Example of React Native + TypeScript with TSLint and Prettier
https://github.com/morishin/reactnativepractice
react-native typescript
Last synced: about 1 year ago
JSON representation
Example of React Native + TypeScript with TSLint and Prettier
- Host: GitHub
- URL: https://github.com/morishin/reactnativepractice
- Owner: morishin
- License: mit
- Created: 2017-12-15T09:52:31.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-21T02:56:52.000Z (almost 8 years ago)
- Last Synced: 2025-02-26T17:12:27.132Z (over 1 year ago)
- Topics: react-native, typescript
- Language: Objective-C
- Homepage:
- Size: 678 KB
- Stars: 9
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ReactNativePractice
Example of React Native + TypeScript with [TSLint](https://palantir.github.io/tslint/) and [Prettier](https://prettier.io/)
## How did I setup
`react-native` version is `0.51.0`
### Create project
- `react-native init ReactNativePractice`
- `cd ReactNativePractice`
- Try to run `react-native run-ios` (or `run-android`)
### TypeScript
Almost the same as https://github.com/Microsoft/TypeScript-React-Native-Starter
- `cd ReactNativePractice`
- `mkdir src`
- `mv index.js src` `mv App.js src` `mv ./__tests__/ ./src/__tests__/`
- `touch index.js` and write `import './src/index';` into the `index.js`
- Try to run `react-native run-ios` (or `run-android`)
- `yarn add --dev typescript`
- `tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --module commonjs --jsx react`
- Append `"include": ["./src/"]` into `tsconfig.json`
- Replace `import './src/index';` with `import './lib/index';` in `ReactNativePractice/index.js`
- Write the following code into `package.json`
```js
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "/node_modules/babel-jest",
"\\.(ts|tsx)$": "/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"/node_modules/",
"/lib/"
],
"cacheDirectory": ".jest/cache"
}
```
- `yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer`
- Change the file extensions of `src/index.js`, `src/App.js` and `src/__tests__/App.js` from `.js` to `.tsx`
- Modify `src/App.tsx`
- Replace `import React, {Component} from 'react';` with `import * as React from 'react';`
- Replace `Component<{}>` with `React.Component`
- Modify `src/__tests__/App.tsx`
- Replace `import React from 'react'` with `import * as React from 'react';`
- Replace `import renderer from 'react-test-renderer';` with `import * as renderer from 'react-test-renderer';`
- `yarn add --dev jest-cli`
- Append the following code into `scripts` in `package.json`
```js
"build": "tsc",
"build:watch": "tsc --watch",
"test": "jest"
```
- Try to run the scripts `npm run build` `npm run build:watch` `npm run test`
### Lint, Formatter
- `yarn add --dev --exact tslint prettier tslint-config-prettier`
- `node_modules/.bin/tslint --init`
- Append `tslint-config-prettier` into `extends` in `tslint.json`
- Append the following code into `scripts` in `package.json`
```js
"lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
"format": "prettier --find-config-path --write 'src/**/*.tsx'"
```
- Add `.prettierrc` to project root with the following content
```js
{
"singleQuote": true
}
```
- Try to run the scripts `npm run lint` `npm run format`
### Visual Studio Code
[TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) are useful if you use Visual Studio Code.
## How to devleop
- `react-native run-ios`
- Run `npm run build:watch`
- Write code and reload on simlutor (`⌘R` for iOS, `RR` for Android)