Недавно я выступал на 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. JSX

В React Native есть несколько компонентов, которые можно использовать для создания представлений в JSX. Однако в ReactJS вы можете использовать любые допустимые элементы HTML DOM.

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

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

Удачного обучения!!