最近、私は React Nexus で「アクセシビリティと TV アプリ」について講演しました。私が受け続けた質問の 1 つは、「ReactJS 開発者として、React Native を始めるのはどのくらい簡単ですか?」というものでした。

つまり、ReactJS 開発者にとって、React Native を始めるのは簡単です。

このブログでは、ReactJS 開発者が React Native で使用できる 5 つのことを共有します。

1. コンポーネント

React Native では、ReactJS と同様の方法でコンポーネントを作成します。概念とベスト プラクティスは変わりません。

'react' から React をインポートします。 import { View, Text } from 'react-native'; const GreetingComponent = () => { 戻る （ こんにちは、ネーハ！ ビュー> ); }; デフォルトのGreetingComponentをエクスポートします。

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

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

2. 小道具と状態

React Native では、props と state は ReactJS と同じように機能します。コンポーネント間で通信するには、props を使用します。値を更新するには、state.

を使用します。

'react' から React をインポートします。 import { View, Text } from 'react-native'; const GreetingComponent = ({ 名前 }) => { 戻る （ こんにちは、{name}! ビュー> ); }; デフォルトのGreetingComponentをエクスポートします。

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

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

3. フック

ReactJS と同様に、useState()、useMemo()、useEffect() など、React Native のすべてのフックを使用できます。さらに、独自のカスタム フックを作成することもできます。

import React, { useState } from 'react'; import { ビュー、テキスト、ボタン、スタイルシート } from 'react-native'; const GreetingComponent = () => { const [名前, setName] = useState('ジョン'); const changeName = () => { setName('ジェーン'); }; 戻る （ こんにちは、{name}! ビュー> ); }; デフォルトのGreetingComponentをエクスポートします。

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

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

4. テスト

あなたが React Testing Library のファンなら、良いニュースは、React Native でのテストに同じライブラリを使用できることです。

'react' から React をインポートします。 import { render, fireEvent } から '@testing-library/react-native'; './GreetingComponent' から GreetingComponent をインポートします。 test('正しくレンダリングされ、ボタンを押すと名前が変更されます', () => { // コンポーネントをレンダリングします const { getByText } = render(); // 初期状態をアサートします Expect(getByText('こんにちは、ジョン!')).toBeTruthy(); // ボタンを見つけて押すことをシミュレートします const button = getByText('名前の変更'); fireEvent.press(ボタン); // 名前が変更されたことをアサートします Expect(getByText('こんにちは、ジェーン!')).toBeTruthy(); });

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

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

5.JSX

React Native には、JSX でビューを作成するために使用できるコンポーネントがいくつかあります。ただし、ReactJS では、有効な HTML DOM 要素を使用できます。

'react' から React をインポートします。 import { View, Text } from 'react-native'; const GreetingComponent = () => { 戻る （ こんにちは、ネーハ！ ビュー> ); }; デフォルトのGreetingComponentをエクスポートします。

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

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

楽しく学習しましょう!!