لقد تحدثت مؤخرًا في React Nexus حول "إمكانية الوصول وتطبيقات التلفزيون". أحد الأسئلة التي ظللت أتلقاها هو: "باعتباري مطور ReactJS، ما مدى سهولة البدء باستخدام React Native؟"

باختصار، بالنسبة لمطور ReactJS، فإن البدء باستخدام React Native سيكون أمرًا سهلاً.

في هذه المدونة، سأشارك الأشياء الخمسة التي يمكن لمطوري ReactJS استخدامها في React Native.

1. المكونات

في React Native، ستنشئ مكونات بشكل مشابه لما تفعله في ReactJS. تظل المفاهيم وأفضل الممارسات كما هي.

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

const GreetingComponent = () => {
  return (
    Hello, Neha!
  );
};
export default GreetingComponent;

2. الدعائم والدولة

في React Native، تعمل الخاصيات والحالة بنفس الطريقة كما في ReactJS. للتواصل بين المكونات، سوف تستخدم الدعائم. لتحديث القيم، ستستخدم الحالة.

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

const GreetingComponent = ({ name }) => {
  return (
    Hello, {name}!
  );
};
export default GreetingComponent;

3. السنانير

تمامًا كما هو الحال في ReactJS، يمكنك استخدام جميع الخطافات في React Native، مثل useState() وuseMemo() وuseEffect() وما إلى ذلك. بالإضافة إلى ذلك، يمكنك إنشاء الخطافات المخصصة الخاصة بك.

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

const GreetingComponent = () => {
  const [name, setName] = useState('John');

  const changeName = () => {
    setName('Jane');
  };

  return (
    Hello, {name}!
    
  );
};

export default GreetingComponent;

4. الاختبار

إذا كنت من محبي مكتبة اختبار React، فالخبر السار هو أنه يمكنك استخدام نفس المكتبة للاختبار في React Native.

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import GreetingComponent from './GreetingComponent';

test('it renders correctly and changes name on button press', () => {
  // Render the component
  const { getByText } = render();

  // Assert initial state
  expect(getByText('Hello, John!')).toBeTruthy();

  // Find the button and simulate a press
  const button = getByText('Change Name');
  fireEvent.press(button);

  // Assert that the name has changed
  expect(getByText('Hello, Jane!')).toBeTruthy();
});

5. جي إس إكس

في React Native، هناك عدد قليل من المكونات التي يمكن استخدامها لإنشاء عروض في JSX. ومع ذلك، في ReactJS، يمكنك استخدام أي عناصر HTML DOM صالحة.

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

const GreetingComponent = () => {
  return (
    Hello, Neha!
  );
};
export default GreetingComponent;

تعلم سعيد!!