147 lines
3.3 KiB
Markdown
147 lines
3.3 KiB
Markdown
# Project Initialization
|
|
|
|
## Create New Project
|
|
|
|
```bash
|
|
# Create new React Native project with TypeScript
|
|
npx react-native init SaayamApp --template react-native-template-typescript
|
|
|
|
cd SaayamApp
|
|
|
|
# Initialize git repository
|
|
git init
|
|
git add .
|
|
git commit -m "Initial commit"
|
|
```
|
|
|
|
## TypeScript Configuration
|
|
|
|
**tsconfig.json:**
|
|
```json
|
|
{
|
|
"extends": "@react-native/typescript-config/tsconfig.json",
|
|
"compilerOptions": {
|
|
"strict": true,
|
|
"noImplicitAny": true,
|
|
"strictNullChecks": true,
|
|
"strictFunctionTypes": true,
|
|
"noImplicitReturns": true,
|
|
"noFallthroughCasesInSwitch": true,
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/*": ["./src/*"],
|
|
"@components/*": ["./src/components/*"],
|
|
"@screens/*": ["./src/screens/*"],
|
|
"@utils/*": ["./src/utils/*"],
|
|
"@config/*": ["./src/config/*"],
|
|
"@redux/*": ["./src/redux/*"],
|
|
"@assets/*": ["./src/assets/*"]
|
|
}
|
|
},
|
|
"include": ["src/**/*", "index.js"],
|
|
"exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts"]
|
|
}
|
|
```
|
|
|
|
## Folder Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # Reusable UI components
|
|
│ ├── common/ # Generic components
|
|
│ ├── forms/ # Form-specific components
|
|
│ └── index.ts # Component exports
|
|
├── screens/ # Screen components
|
|
│ ├── Auth/
|
|
│ ├── Home/
|
|
│ └── index.ts
|
|
├── navigation/ # Navigation configuration
|
|
├── redux/ # State management
|
|
│ ├── store/
|
|
│ ├── slices/
|
|
│ └── types/
|
|
├── services/ # API services
|
|
├── utils/ # Utility functions
|
|
├── config/ # App configuration
|
|
├── assets/ # Images, fonts, etc.
|
|
│ ├── images/
|
|
│ ├── fonts/
|
|
│ └── icons/
|
|
├── types/ # TypeScript type definitions
|
|
└── constants/ # App constants
|
|
```
|
|
|
|
## Code Quality Setup
|
|
|
|
**Install dependencies:**
|
|
```bash
|
|
yarn add -D eslint prettier husky lint-staged @typescript-eslint/parser @typescript-eslint/eslint-plugin
|
|
```
|
|
|
|
**.eslintrc.js:**
|
|
```javascript
|
|
module.exports = {
|
|
root: true,
|
|
extends: [
|
|
'@react-native-community',
|
|
'@typescript-eslint/recommended',
|
|
],
|
|
parser: '@typescript-eslint/parser',
|
|
plugins: ['@typescript-eslint'],
|
|
rules: {
|
|
'react-native/no-inline-styles': 'warn',
|
|
'@typescript-eslint/no-unused-vars': 'error',
|
|
'react-hooks/exhaustive-deps': 'warn',
|
|
},
|
|
};
|
|
```
|
|
|
|
**.prettierrc.js:**
|
|
```javascript
|
|
module.exports = {
|
|
arrowParens: 'avoid',
|
|
bracketSameLine: true,
|
|
bracketSpacing: false,
|
|
singleQuote: true,
|
|
trailingComma: 'all',
|
|
tabWidth: 2,
|
|
semi: true,
|
|
};
|
|
```
|
|
|
|
**package.json scripts:**
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
|
|
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
|
|
"format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json}\"",
|
|
"type-check": "tsc --noEmit"
|
|
},
|
|
"husky": {
|
|
"hooks": {
|
|
"pre-commit": "lint-staged"
|
|
}
|
|
},
|
|
"lint-staged": {
|
|
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
|
|
}
|
|
}
|
|
```
|
|
|
|
## Environment Configuration
|
|
|
|
```bash
|
|
yarn add react-native-config
|
|
```
|
|
|
|
**Create environment files:**
|
|
```bash
|
|
# .env.development
|
|
API_BASE_URL=https://dev-api.saayam.com
|
|
APP_ENV=development
|
|
|
|
# .env.production
|
|
API_BASE_URL=https://api.saayam.com
|
|
APP_ENV=production
|
|
``` |