Comment démarrer avec React Native en tant que développeur ReactJS ?

Récemment, j'ai parlé à React Nexus sur "l'accessibilité et les applications TV". Une question que l'on me posait constamment était : "En tant que développeur ReactJS, est-il facile de démarrer avec React Native ?"

En bref, pour un développeur ReactJS, démarrer avec React Native serait facile.

Dans ce blog, je vais partager les cinq choses que les développeurs ReactJS peuvent utiliser dans React Native.

1. Composants

Dans React Native, vous créerez des composants de la même manière que dans ReactJS. Les concepts et les bonnes pratiques restent les mêmes.

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

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

2. Accessoires et état

Dans React Native, les accessoires et l'état fonctionnent de la même manière que dans ReactJS. Pour communiquer entre les composants, vous utiliserez des accessoires. Pour mettre à jour les valeurs, vous utiliserez state.

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

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

3. Crochets

Tout comme dans ReactJS, vous pouvez utiliser tous les hooks de React Native, tels que useState(), useMemo(), useEffect(), etc. De plus, vous pouvez créer vos propres hooks personnalisés.

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. Tests

Si vous êtes fan de la bibliothèque de tests React, la bonne nouvelle est que vous pouvez utiliser la même bibliothèque pour tester dans 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

Dans React Native, il existe une poignée de composants qui peuvent être utilisés pour créer des vues dans JSX. Cependant, dans ReactJS, vous pouvez utiliser n'importe quel élément HTML DOM valide.

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

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

Bon apprentissage !!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!