Bagaimana untuk bermula dengan React Native sebagai pembangun ReactJS?

Baru-baru ini, saya bercakap di React Nexus tentang "Apl Kebolehaksesan dan TV." Satu soalan yang saya terus dapat ialah: "Sebagai pembangun ReactJS, betapa mudahnya untuk bermula dengan React Native?"

Ringkasnya, untuk pembangun ReactJS, bermula dengan React Native adalah mudah.

Dalam blog ini, saya akan berkongsi lima perkara yang boleh digunakan oleh pembangun ReactJS dalam React Native.

1. Komponen

Dalam React Native, anda akan membuat komponen sama seperti yang anda lakukan dalam ReactJS. Konsep dan amalan terbaik kekal sama.

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

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

2. Props dan negeri

Dalam React Native, prop dan state berfungsi dengan cara yang sama seperti dalam ReactJS. Untuk berkomunikasi antara komponen, anda akan menggunakan prop. Untuk mengemas kini nilai, anda akan menggunakan keadaan.

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

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

3. Mata kail

Sama seperti dalam ReactJS, anda boleh menggunakan semua cangkuk dalam React Native, seperti useState(), useMemo(), useEffect(), dll. Selain itu, anda boleh mencipta cangkuk tersuai anda sendiri.

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 (
    <View style={styles.container}>
      <Text>Hello, {name}!</Text>
      <Button title="Change Name" onPress={changeName} />
    </View>
  );
};

export default GreetingComponent;

4. Pengujian

Jika anda peminat Pustaka React Testing, berita baiknya ialah anda boleh menggunakan perpustakaan yang sama untuk ujian dalam 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(<GreetingComponent />);

  // 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

Dalam React Native, terdapat segelintir komponen yang boleh digunakan untuk membuat paparan dalam JSX. Walau bagaimanapun, dalam ReactJS, anda boleh menggunakan mana-mana elemen DOM HTML yang sah.

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

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

Selamat Belajar!!

Atas ialah kandungan terperinci Bagaimana untuk bermula dengan React Native sebagai pembangun ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!