بهترین شیوه های بومی را واکنش نشان دهید

Summarize this content to 400 words in Persian Lang اگر شما یک مبتدی توسعه دهنده بومی واکنش یا تجربه هستید، باید بدانید که شیوه های کد یک مهارت غیرقابل مذاکره است. به عنوان یک توسعه دهنده، تحویل یک پروژه یک امر ضروری است اما نوشتن یک کد مقیاس پذیر و با کیفیت به شما و تیمتان در آینده کمک خواهد کرد.

قبل از اینکه به جلو حرکت کنیم، این روش ها می توانند روی React Native CLI یا پروژه Expo کار کنند. از سال 2024، طبق گفته تیم RN، Expo چارچوب رسمی برای ساخت پروژه های بومی react خواهد بود.

در این وبلاگ با شیوه های کد برای پروژه های react native آشنا می شویم. به یاد داشته باشید که یک پروژه خوب تعادلی از موارد زیر است:

مقیاس پذیر
قوام
قابل نگهداری
خوانایی

وبلاگ من را در مورد نحوه شروع با توسعه دهنده React Native به عنوان توسعه دهنده ReactJS بخوانید

1. ساختار پروژه

اولین چیزی که یک برنامه نویس باید داشته باشد این است که یک پایگاه کد قابل نگهداری، خوانا و مقیاس پذیر داشته باشد. ساختار پروژه شما به توسعه دهندگان آینده نیز کمک خواهد کرد. با Expo، یکی ساختار پروژه را دارد، اما به عنوان یک توسعه دهنده بومی React و بر اساس پروژه خود باید ساختار پروژه خود را برنامه ریزی کنید:

my-app/
├── assets/
│ ├── fonts/
│ ├── images/
│ └── icons/
├── components/
│ ├── Button.js
│ ├── Button.styles.js
│ └── Header.js
├── screens/
│ ├── HomeScreen/
│ │ ├── HomeScreen.js
│ │ └── HomeScreen.styles.js
│ └── ProfileScreen/
│ ├── ProfileScreen.js
│ └── ProfileScreen.styles.js
├── navigation/
│ ├── AppNavigator.js
│ ├── AuthNavigator.js
│ └── MainNavigator.js
├── redux/ (or store/ if using Zustand, MobX, etc.)
│ ├── actions/
│ ├── reducers/
│ ├── store.js
│ └── types.js
├── services/
│ ├── api.js
│ └── auth.js
├── utils/
│ ├── helpers.js
│ └── constants.js
├── App.js
├── package.json
├── .babelrc
└── README.md

2. واردات مستعار

مسیرهای طولانی واردات می تواند خواندن و نگهداری کد شما را سخت تر کند. به جای نوشتن مسیرهای نسبی طولانی مانند ../../../components/Button، از نام مستعار برای کوتاه کردن آنها و خوانایی بیشتر کد خود استفاده کنید.

import Button from ‘components/ui/Button’;
import Header from ‘components/layout/Header’;

3. سفارش واردات

برای مدیریت خودکار ترتیب واردات خود، می‌توانید Babel را با افزونه‌ای پیکربندی کنید که این کار را برای شما انجام می‌دهد. این امر واردات شما را تمیز نگه می دارد و مداخله دستی را کاهش می دهد.

npm install –save-dev babel-plugin-module-resolver

4. TypeScript

در مورد انتخاب بین TypeScript (TS) و JavaScript (JS) بحث کمی وجود دارد، به خصوص برای برنامه های کاربردی در مقیاس بزرگ. TypeScript چک کردن نوع استاتیک را فراهم می کند، که به تشخیص خطاها در زمان کامپایل به جای زمان اجرا کمک می کند و منجر به کد قابل اعتمادتر و قابل نگهداری تر می شود.

5. سبک

راه های مختلفی وجود دارد که می توان به پروژه های RN خود سبک داد. می توان از NativeWind یا استایلی از React native استفاده کرد. با گزینه های بسیار، باید به دنبال سازگاری، مقیاس پذیر و قابل نگهداری بود. وبلاگ من در مورد استایل را اینجا بخوانید

1. درون خطی: برای پروژه های بزرگ اصلا رویکرد خوبی نیست.

<View style={{ backgroundColor: ‘blue’, padding: 10 }}>
<Text style={{ color: ‘white’ }}>Hello</Text>
</View>

2. StyleSheet API: خوب است اما سبک ها قابل استفاده مجدد نخواهند بود

import { StyleSheet, View, Text } from ‘react-native’;

const styles = StyleSheet.create({
container: {
backgroundColor: ‘blue’,
padding: 10,
},
text: {
color: ‘white’,
},
});

const App = () => (
<View style={styles.container}>
<Text style={styles.text}>Hello</Text>
</View>
);

3. سبک جداگانه: این روشی است که برای پروژه های بزرگ ترجیح می دهم. یک style.js جداگانه ایجاد کنید و از آن در اجزای مورد نیاز خود استفاده کنید.

/components
├── MyComponent.js
├── MyComponent.styles.js
/App.js

// MyComponent.styles.js
import { StyleSheet } from ‘react-native’;

export default StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#f5f5f5’,
},
title: {
fontSize: 24,
fontWeight: ‘bold’,
color: ‘#333’,
marginBottom: 20,
},
button: {
backgroundColor: ‘#007bff’,
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 5,
},
buttonText: {
color: ‘#fff’,
fontSize: 16,
fontWeight: ‘600’,
},
});

// MyComponent.js
import React from ‘react’;
import { View, Text, Pressable } from ‘react-native’;
import styles from ‘./MyComponent.styles’;

const MyComponent = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello from MyComponent</Text>
<Pressable style={styles.button}>
<Text style={styles.buttonText}>Click Me</Text>
</Pressable>
</View>
);
};

export default MyComponent;

4. اجزای مدل دار: راه دیگری برای پروژه های بزرگ ترجیح می دهد.

import styled from ‘styled-components/native’;

const Container = styled.View`
background-color: blue;
padding: 10px;
`;

const StyledText = styled.Text`
color: white;
`;

const App = () => (
<Container>
<StyledText>Hello</StyledText>
</Container>
);

5. باد بومی: NativeWind روش خوبی برای استایل دادن به برنامه شما است. پس از نصب باد بومی، می توانید از کلاس ها برای استایل دادن به برنامه خود استفاده کنید. با این کار شما کار یک ظاهر طراحی را واگذار می کنید.

import React from ‘react’;
import { View, Text, Pressable } from ‘react-native’;
import { styled } from ‘nativewind’;

const App = () => {
return (
<View className=”flex-1 justify-center items-center bg-gray-100″>
<Text className=”text-2xl font-bold text-blue-500 mb-4″>
Welcome to NativeWind!
</Text>
<Pressable className=”bg-blue-500 px-4 py-2 rounded”>
<Text className=”text-white font-semibold”>Press Me</Text>
</Pressable>
</View>
);
};

export default App;

6. لوازم

Props برای برقراری ارتباط بین مؤلفه‌ها در React Native استفاده می‌شود و به داده‌ها اجازه می‌دهد از مؤلفه‌های والد به مؤلفه‌های فرزند جریان پیدا کنند. درست مانند یک ظاهر طراحی، راه های متعددی برای مدیریت وسایل وجود دارد. ثبات کلیدی است، بنابراین توصیه می شود در طول پروژه خود به یک رویکرد پایبند باشید.

علاوه بر این، برای کدهای پاک‌تر و خوانا، همیشه پایه‌ها را تخریب کنید. تخریب ساختار نه تنها خوانایی را بهبود می بخشد، بلکه تشخیص اینکه یک جزء از کدام پایه استفاده می کند را آسان تر می کند.

const MyComponent = ({ title, subtitle }) => {
return (
<View>
<Text>{title}</Text>
<Text>{subtitle}</Text>
</View>
);
};

7. مدیریت دولتی

مدیریت کارآمد حالت تضمین می‌کند که با رشد پایگاه کد، برنامه عملکردی و قابل مدیریت باقی می‌ماند. در زمان امروز ما گزینه های زیادی برای انتخاب بهترین مدیریت دولتی داریم.

الف ترجیح دولت محلی بر دولت جهانی

ب استفاده کنید Context API برای حالت ساده

ج از کتابخانه مدیریت ایالتی برای حالت پیچیده استفاده کنید

د به روز رسانی وضعیت تغییرناپذیر

ه. ترجیح دادن redux toolkit تمام redux

import { createSlice } from ‘@reduxjs/toolkit’;

const booksSlice = createSlice({
name: ‘books’,
initialState: [],
reducers: {
addBook: (state, action) => {
state.push(action.payload);
},
removeBook: (state, action) => {
return state.filter(book => book.id !== action.payload);
},
},
});

export const { addBook, removeBook } = booksSlice.actions;
export default booksSlice.reducer;

8. تجزیه و تحلیل خرابی

برای اطمینان از سلامت برنامه و کاهش خرابی ها، اجرای تجزیه و تحلیل خرابی و ردیابی خطا بسیار مهم است:

الف از ابزارهای Crash Analytics استفاده کنید: اجرای خدماتی مانند – Firebase Crashlytics، یا Sentry

ب پایداری برنامه خود را تست کنید

تست‌های خودکار و تست استرس دستی را اجرا کنید تا تصادفات لبه‌ای را بگیرید. از خدماتی مانند TestFlight یا Google Play Beta Testing استفاده کنید.

می توانید هم خرابی های بومی (iOS/Android) و هم خطاهای جاوا اسکریپت را ردیابی کنید. از ErrorBoundary برای پیدا کردن خطاهای جاوا اسکریپت و ثبت آنها در یک سرویس تجزیه و تحلیل خرابی استفاده کنید.

ج ردیابی خطاهای JS و Native

import React from ‘react’;
import * as Sentry from ‘@sentry/react-native’;

class ErrorBoundary extends React.Component {
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, { extra: errorInfo });
}

render() {
if (this.state.hasError) {
return <Text>Something went wrong.</Text>;
}

return this.props.children;
}
}

9. ورود به سیستم

ورود به سیستم به ردیابی رفتار برنامه، رفع اشکال و جمع آوری تجزیه و تحلیل کمک می کند.

الف از یک Logging Framework استفاده کنید

React Native Logger: یک لاگر با کاربری آسان که به طور خاص برای React Native طراحی شده است.
وینستون: یک کتابخانه گزارش چند حمل و نقل که می تواند با React Native و Node.js کار کند.

import logger from ‘react-native-logger’;

logger.log(‘This is a debug log’);
logger.warn(‘This is a warning log’);
logger.error(‘This is an error log’);

ب سطوح لاگ را متمایز کنید

از سطوح لاگ مناسب مانند debug، info، warn، و error.
در تولید، پرحرفی گزارش را فقط با اجازه دادن به گزارش‌های خطا و هشدار به حداقل برسانید، در حالی که در حالت توسعه، از اشکال‌زدایی و اطلاعات استفاده کنید.

ج ثبت از راه دور

ارسال گزارش به یک سرویس ثبت از راه دور مانند:

رد کاغذ
لاگ
تجزیه و تحلیل Firebase

د اطلاعات حساس را با دقت ثبت کنید

از ثبت اطلاعات حساس کاربر مانند رمزهای عبور، نشانه‌ها یا داده‌های شخصی خودداری کنید.

10. آزمایش

آزمایش برای هر پروژه بسیار مهم است. به عنوان یک توسعه دهنده، مسئولیت کیفیت بر عهده توسعه دهنده است. در دنیای بومی React وجود دارد:

تست واحد
تست یکپارچه سازی
تست پایان به پایان

حداقل برای تست انتها به پایان وقت بگذارید. ابزارهای زیادی برای آزمایش وجود دارد.

یادگیری مبارک!!

اگر شما یک مبتدی توسعه دهنده بومی واکنش یا تجربه هستید، باید بدانید که شیوه های کد یک مهارت غیرقابل مذاکره است. به عنوان یک توسعه دهنده، تحویل یک پروژه یک امر ضروری است اما نوشتن یک کد مقیاس پذیر و با کیفیت به شما و تیمتان در آینده کمک خواهد کرد.

قبل از اینکه به جلو حرکت کنیم، این روش ها می توانند روی React Native CLI یا پروژه Expo کار کنند. از سال 2024، طبق گفته تیم RN، Expo چارچوب رسمی برای ساخت پروژه های بومی react خواهد بود.

در این وبلاگ با شیوه های کد برای پروژه های react native آشنا می شویم. به یاد داشته باشید که یک پروژه خوب تعادلی از موارد زیر است:

1. مقیاس پذیر

2. قوام

3. قابل نگهداری

4. خوانایی

وبلاگ من را در مورد نحوه شروع با توسعه دهنده React Native به عنوان توسعه دهنده ReactJS بخوانید

1. ساختار پروژه

اولین چیزی که یک برنامه نویس باید داشته باشد این است که یک پایگاه کد قابل نگهداری، خوانا و مقیاس پذیر داشته باشد. ساختار پروژه شما به توسعه دهندگان آینده نیز کمک خواهد کرد. با Expo، یکی ساختار پروژه را دارد، اما به عنوان یک توسعه دهنده بومی React و بر اساس پروژه خود باید ساختار پروژه خود را برنامه ریزی کنید:

my-app/
├── assets/
│   ├── fonts/
│   ├── images/
│   └── icons/
├── components/
│   ├── Button.js
│   ├── Button.styles.js
│   └── Header.js
├── screens/
│   ├── HomeScreen/
│   │   ├── HomeScreen.js
│   │   └── HomeScreen.styles.js
│   └── ProfileScreen/
│       ├── ProfileScreen.js
│       └── ProfileScreen.styles.js
├── navigation/
│   ├── AppNavigator.js
│   ├── AuthNavigator.js
│   └── MainNavigator.js
├── redux/ (or store/ if using Zustand, MobX, etc.)
│   ├── actions/
│   ├── reducers/
│   ├── store.js
│   └── types.js
├── services/
│   ├── api.js
│   └── auth.js
├── utils/
│   ├── helpers.js
│   └── constants.js
├── App.js
├── package.json
├── .babelrc
└── README.md

2. واردات مستعار

مسیرهای طولانی واردات می تواند خواندن و نگهداری کد شما را سخت تر کند. به جای نوشتن مسیرهای نسبی طولانی مانند ../../../components/Button، از نام مستعار برای کوتاه کردن آنها و خوانایی بیشتر کد خود استفاده کنید.

import Button from 'components/ui/Button';
import Header from 'components/layout/Header';

3. سفارش واردات

برای مدیریت خودکار ترتیب واردات خود، می‌توانید Babel را با افزونه‌ای پیکربندی کنید که این کار را برای شما انجام می‌دهد. این امر واردات شما را تمیز نگه می دارد و مداخله دستی را کاهش می دهد.

npm install --save-dev babel-plugin-module-resolver

4. TypeScript

در مورد انتخاب بین TypeScript (TS) و JavaScript (JS) بحث کمی وجود دارد، به خصوص برای برنامه های کاربردی در مقیاس بزرگ. TypeScript چک کردن نوع استاتیک را فراهم می کند، که به تشخیص خطاها در زمان کامپایل به جای زمان اجرا کمک می کند و منجر به کد قابل اعتمادتر و قابل نگهداری تر می شود.

5. سبک

راه های مختلفی وجود دارد که می توان به پروژه های RN خود سبک داد. می توان از NativeWind یا استایلی از React native استفاده کرد. با گزینه های بسیار، باید به دنبال سازگاری، مقیاس پذیر و قابل نگهداری بود. وبلاگ من در مورد استایل را اینجا بخوانید

1. درون خطی: برای پروژه های بزرگ اصلا رویکرد خوبی نیست.

<View style={{ backgroundColor: 'blue', padding: 10 }}>
  <Text style={{ color: 'white' }}>Hello</Text>
</View>

2. StyleSheet API: خوب است اما سبک ها قابل استفاده مجدد نخواهند بود

import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'blue',
    padding: 10,
  },
  text: {
    color: 'white',
  },
});

const App = () => (
  <View style={styles.container}>
    <Text style={styles.text}>Hello</Text>
  </View>
);

3. سبک جداگانه: این روشی است که برای پروژه های بزرگ ترجیح می دهم. یک style.js جداگانه ایجاد کنید و از آن در اجزای مورد نیاز خود استفاده کنید.

/components
   ├── MyComponent.js
   ├── MyComponent.styles.js
/App.js

// MyComponent.styles.js
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#007bff',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

// MyComponent.js
import React from 'react';
import { View, Text, Pressable } from 'react-native';
import styles from './MyComponent.styles';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello from MyComponent</Text>
      <Pressable style={styles.button}>
        <Text style={styles.buttonText}>Click Me</Text>
      </Pressable>
    </View>
  );
};

export default MyComponent;

4. اجزای مدل دار: راه دیگری برای پروژه های بزرگ ترجیح می دهد.

import styled from 'styled-components/native';

const Container = styled.View`
  background-color: blue;
  padding: 10px;
`;

const StyledText = styled.Text`
  color: white;
`;

const App = () => (
  <Container>
    <StyledText>Hello</StyledText>
  </Container>
);

5. باد بومی: NativeWind روش خوبی برای استایل دادن به برنامه شما است. پس از نصب باد بومی، می توانید از کلاس ها برای استایل دادن به برنامه خود استفاده کنید. با این کار شما کار یک ظاهر طراحی را واگذار می کنید.

import React from 'react';
import { View, Text, Pressable } from 'react-native';
import { styled } from 'nativewind';

const App = () => {
  return (
    <View className="flex-1 justify-center items-center bg-gray-100">
      <Text className="text-2xl font-bold text-blue-500 mb-4">
        Welcome to NativeWind!
      </Text>
      <Pressable className="bg-blue-500 px-4 py-2 rounded">
        <Text className="text-white font-semibold">Press Me</Text>
      </Pressable>
    </View>
  );
};

export default App;

6. لوازم

Props برای برقراری ارتباط بین مؤلفه‌ها در React Native استفاده می‌شود و به داده‌ها اجازه می‌دهد از مؤلفه‌های والد به مؤلفه‌های فرزند جریان پیدا کنند. درست مانند یک ظاهر طراحی، راه های متعددی برای مدیریت وسایل وجود دارد. ثبات کلیدی است، بنابراین توصیه می شود در طول پروژه خود به یک رویکرد پایبند باشید.

علاوه بر این، برای کدهای پاک‌تر و خوانا، همیشه پایه‌ها را تخریب کنید. تخریب ساختار نه تنها خوانایی را بهبود می بخشد، بلکه تشخیص اینکه یک جزء از کدام پایه استفاده می کند را آسان تر می کند.

const MyComponent = ({ title, subtitle }) => {
  return (
    <View>
      <Text>{title}</Text>
      <Text>{subtitle}</Text>
    </View>
  );
};

7. مدیریت دولتی

مدیریت کارآمد حالت تضمین می‌کند که با رشد پایگاه کد، برنامه عملکردی و قابل مدیریت باقی می‌ماند. در زمان امروز ما گزینه های زیادی برای انتخاب بهترین مدیریت دولتی داریم.

الف ترجیح دولت محلی بر دولت جهانی

ب استفاده کنید Context API برای حالت ساده

ج از کتابخانه مدیریت ایالتی برای حالت پیچیده استفاده کنید

د به روز رسانی وضعیت تغییرناپذیر

ه. ترجیح دادن redux toolkit تمام redux

import { createSlice } from '@reduxjs/toolkit';

const booksSlice = createSlice({
  name: 'books',
  initialState: [],
  reducers: {
    addBook: (state, action) => {
      state.push(action.payload);
    },
    removeBook: (state, action) => {
      return state.filter(book => book.id !== action.payload);
    },
  },
});

export const { addBook, removeBook } = booksSlice.actions;
export default booksSlice.reducer;

8. تجزیه و تحلیل خرابی

برای اطمینان از سلامت برنامه و کاهش خرابی ها، اجرای تجزیه و تحلیل خرابی و ردیابی خطا بسیار مهم است:

الف از ابزارهای Crash Analytics استفاده کنید: اجرای خدماتی مانند – Firebase Crashlytics، یا Sentry

ب پایداری برنامه خود را تست کنید

تست‌های خودکار و تست استرس دستی را اجرا کنید تا تصادفات لبه‌ای را بگیرید. از خدماتی مانند TestFlight یا Google Play Beta Testing استفاده کنید.

می توانید هم خرابی های بومی (iOS/Android) و هم خطاهای جاوا اسکریپت را ردیابی کنید. از ErrorBoundary برای پیدا کردن خطاهای جاوا اسکریپت و ثبت آنها در یک سرویس تجزیه و تحلیل خرابی استفاده کنید.

ج ردیابی خطاهای JS و Native

import React from 'react';
import * as Sentry from '@sentry/react-native';

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    Sentry.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return <Text>Something went wrong.</Text>;
    }

    return this.props.children;
  }
}

9. ورود به سیستم

ورود به سیستم به ردیابی رفتار برنامه، رفع اشکال و جمع آوری تجزیه و تحلیل کمک می کند.

الف از یک Logging Framework استفاده کنید

1. React Native Logger: یک لاگر با کاربری آسان که به طور خاص برای React Native طراحی شده است.

2. وینستون: یک کتابخانه گزارش چند حمل و نقل که می تواند با React Native و Node.js کار کند.

import logger from 'react-native-logger';

logger.log('This is a debug log');
logger.warn('This is a warning log');
logger.error('This is an error log');

ب سطوح لاگ را متمایز کنید

1. از سطوح لاگ مناسب مانند debug، info، warn، و error.

2. در تولید، پرحرفی گزارش را فقط با اجازه دادن به گزارش‌های خطا و هشدار به حداقل برسانید، در حالی که در حالت توسعه، از اشکال‌زدایی و اطلاعات استفاده کنید.

ج ثبت از راه دور

ارسال گزارش به یک سرویس ثبت از راه دور مانند:

1. رد کاغذ

2. لاگ

3. تجزیه و تحلیل Firebase

د اطلاعات حساس را با دقت ثبت کنید

از ثبت اطلاعات حساس کاربر مانند رمزهای عبور، نشانه‌ها یا داده‌های شخصی خودداری کنید.

10. آزمایش

آزمایش برای هر پروژه بسیار مهم است. به عنوان یک توسعه دهنده، مسئولیت کیفیت بر عهده توسعه دهنده است. در دنیای بومی React وجود دارد:

1. تست واحد

2. تست یکپارچه سازی

3. تست پایان به پایان

حداقل برای تست انتها به پایان وقت بگذارید. ابزارهای زیادی برای آزمایش وجود دارد.

یادگیری مبارک!!