हाल ही में, मैंने रिएक्ट नेक्सस में "एक्सेसिबिलिटी और टीवी ऐप्स" पर बात की थी। एक प्रश्न जो मुझे मिलता रहा वह था: "एक ReactJS डेवलपर के रूप में, React Native के साथ शुरुआत करना कितना आसान है?"

संक्षेप में, एक ReactJS डेवलपर के लिए, React Native से शुरुआत करना आसान होगा।

इस ब्लॉग में, मैं उन पांच चीजों को साझा करने जा रहा हूं जिनका उपयोग ReactJS डेवलपर्स रिएक्ट नेटिव में कर सकते हैं।

1. अवयव

रिएक्ट नेटिव में, आप उसी तरह घटक बनाएंगे जैसे आप रिएक्टजेएस में बनाते हैं। अवधारणाएँ और सर्वोत्तम प्रथाएँ वही रहती हैं।

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

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

2. सहारा और राज्य

रिएक्ट नेटिव में, प्रॉप्स और स्टेट रिएक्टजेएस की तरह ही काम करते हैं। घटकों के बीच संचार करने के लिए, आप प्रॉप्स का उपयोग करेंगे। मानों को अद्यतन करने के लिए, आप राज्य का उपयोग करेंगे।

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

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

3. हुक

बिल्कुल ReactJS की तरह, आप रिएक्ट नेटिव में सभी हुक का उपयोग कर सकते हैं, जैसे कि यूज़स्टेट(), यूज़मेमो(), यूज़इफ़ेक्ट(), आदि। इसके अतिरिक्त, आप अपने स्वयं के कस्टम हुक बना सकते हैं।

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. परीक्षण

यदि आप रिएक्ट टेस्टिंग लाइब्रेरी के प्रशंसक हैं, तो अच्छी खबर यह है कि आप रिएक्ट नेटिव में परीक्षण के लिए उसी लाइब्रेरी का उपयोग कर सकते हैं।

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. जेएसएक्स

रिएक्ट नेटिव में, कुछ मुट्ठी भर घटक हैं जिनका उपयोग JSX में दृश्य बनाने के लिए किया जा सकता है। हालाँकि, ReactJS में, आप किसी भी मान्य HTML DOM तत्व का उपयोग कर सकते हैं।

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

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

हैप्पी लर्निंग!!