React.js에서 React Native로 전환-JS 튜토리얼-php.cn

Transitioning from React.js to React Native

導入

React.js の経験を持つフロントエンド開発者として、スキルセットを拡張して React Native を含めることにより、モバイルアプリ開発におけるエキサイティングな機会が開かれます。 Web 開発とモバイル開発にはいくつかの類似点がありますが、各プラットフォームへのアプローチ方法を形作る重要な違いがあります。この記事では、Web 開発とモバイル開発の主な違い、React.js と React Native の違い、そして最も重要なこととして、React.js の知識が React Native へのスムーズな移行にどのように役立つかについて説明します。

Web 開発とモバイル開発の違いを理解する

React.js と React Native の詳細に入る前に、Web 開発とモバイル開発がどのように異なるかを理解することが重要です。

1. プラットフォーム固有の考慮事項

Web 開発: Web 開発では、アプリケーションはブラウザ上で実行されるように構築され、ユーザーの操作は通常、マウスまたはキーボードで行われます。
モバイル開発: 一方、モバイルアプリケーションでは、タッチインタラクション、小さな画面、デバイス固有のパフォーマンスを考慮する必要があります。モバイルアプリは、カメラ、GPS、センサーなどのデバイス機能にもアクセスできますが、これらは通常ウェブアプリには関係ありません。

2.展開

Web 開発: Web アプリを構築した後の展開には、通常、ブラウザ経由でアクセスできるようにサーバー上でホストすることが含まれます。
モバイル開発: モバイルアプリの場合は、アプリストア (Google Play、App Store など) を通じて展開する必要があり、これにより、アプリストアの承認プロセスなどの追加の考慮事項が必要になります。

3. ユーザーエクスペリエンス

Web 開発: Web における UX の考慮事項は、さまざまなデバイスの画面サイズ、応答性、ブラウザーの互換性に焦点を当てています。
モバイル開発: モバイル UX は、スムーズなインタラクション、タッチジェスチャーを提供し、プラットフォーム固有のデザインガイドライン (Android のマテリアルデザイン、iOS のヒューマンインターフェイスガイドラインなど) に準拠することに重点を置いています。

React.js と React Native: 主な違い

React.js と React Native はどちらも Facebook によって構築され、共通の哲学を共有していますが、いくつかの点で異なります。

1. Objectif

React.js : principalement pour la création d'applications Web.
React Native : conçu pour créer des applications mobiles natives pour iOS et Android à l'aide d'une seule base de code.

2. Architecture

React.js : suit l'architecture typique de Model-View-Controller (MVC). Il utilise le DOM virtuel pour gérer les mises à jour, ce qui permet des performances élevées et un rendu efficace dans le navigateur.
React Native : Utilise une architecture "bridge". Ce pont permet au code JavaScript de communiquer de manière asynchrone avec les API natives, permettant à React Native de restituer les composants d'interface utilisateur natifs. L'architecture repose sur trois threads principaux :
- Thème JavaScript : exécute le code JavaScript de l'application.
- Thème des modules natifs : interagit avec les modules natifs tels que les capteurs de périphériques, le système de fichiers, etc.
- UI Thread (Main Thread) : responsable du rendu des composants de l'interface utilisateur et de la gestion des interactions des utilisateurs.

3. Rendu

React.js : utilise un DOM virtuel pour gérer les mises à jour et restituer efficacement les composants Web dans le navigateur.

// React.js Example of Virtual DOM Rendering
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

로그인 후 복사

React Native : N'utilise pas de DOM. Au lieu de cela, il communique avec les API natives et restitue directement les composants mobiles (vues natives), offrant ainsi aux utilisateurs l'expérience d'une application véritablement native.

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

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

로그인 후 복사

4. Stylisme

React.js : Vous stylisez les composants Web à l'aide de bibliothèques CSS ou CSS-in-JS comme les composants stylisés.

// React.js Example
import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="container">
      <h1 className="title">Hello, React.js!</h1>
    </div>
  );
};

export default App;

// App.css
.container {
  padding: 20px;
  text-align: center;
}

.title {
  font-size: 2rem;
  color: #333;
}

로그인 후 복사

React Native : au lieu de CSS, React Native utilise des objets JavaScript pour définir des styles, qui correspondent à des éléments de style natifs comme Flexbox pour la mise en page.

// React Native Example
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    color: '#333',
  },
});

export default App;

로그인 후 복사

5. Navigation

React.js : utilise des bibliothèques comme React Router pour la navigation. La navigation Web est principalement basée sur les URL, il est donc simple de travailler avec l'historique du navigateur.

// React.js Example using React Router
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <Router>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

export default App;

로그인 후 복사

React Native : La navigation est plus complexe en raison des paradigmes mobiles natifs. Il utilise des bibliothèques telles que React Navigation ou Native Navigation, qui permettent des modèles de navigation basés sur une pile similaires à ceux trouvés dans les applications natives.

// React Native Example using React Navigation
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, Text, View } from 'react-native';

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button title="Go to About" onPress={() => navigation.navigate('About')} />
  </View>
);

const AboutScreen = () => (
  <View>
    <Text>About Screen</Text>
  </View>
);

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="About" component={AboutScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

로그인 후 복사

6. Bibliothèques et composants

React.js : s'appuie sur des éléments HTML standards tels que
,
, etc., et sur les API du navigateur.

// React.js Button Example
import React from 'react';

const App = () => {
  return (
    <div>
      <button onClick={() => alert('Button clicked!')}>Click Me</button>
    </div>
  );
};

export default App;

로그인 후 복사

React Native : fournit des composants mobiles intégrés tels que , et , qui sont analogues aux éléments HTML mais adaptés aux performances des applications mobiles.

// React Native Button Example
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const App = () => {
  return (
    <View>
      <TouchableOpacity onPress={() => alert('Button clicked!')}>
        <Text>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

로그인 후 복사

7. Accès aux appareils

Cet exemple montre comment React Native peut facilement accéder à la caméra de l'appareil, une fonctionnalité qui n'est pas aussi facilement disponible dans le développement Web sans API spécifiques au navigateur.

// React Native Example using the Camera
import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { Camera } from 'expo-camera';

const CameraExample = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraRef, setCameraRef] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  if (hasPermission === null) {
    return <Text>Requesting camera permission...</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View>
      <Camera ref={ref => setCameraRef(ref)} style={{ height: 400 }} />
      <Button
        title="Take Picture"
        onPress={async () => {
          if (cameraRef) {
            let photo = await cameraRef.takePictureAsync();
            console.log(photo);
          }
        }}
      />
    </View>
  );
};

export default CameraExample;

로그인 후 복사

8. Environnement de développement

Développement React.js :
Pour React.js, vous utilisez généralement un outil tel que create-react-app ou Next.js pour lancer un environnement de développement. Aucun SDK spécifique au mobile n'est requis.
Réagir NativeDevelopment :
Pour React Native, vous aurez soit besoin d'Expo CLI (plus facile pour les débutants), soit de configurations de développement natives directes comme Android Studio ou Xcode.

Comme vous pouvez le voir, la structure des composants est similaire, mais les composants réels sont différents. En effet, React Native utilise des composants natifs qui correspondent directement aux vues spécifiques à la plate-forme, tandis que React.js utilise des éléments HTML rendus dans le navigateur.

Comment l'apprentissage de React.js vous aide à passer à React Native

La bonne nouvelle pour les développeurs React.js est que la transition vers React Native est une progression naturelle. De nombreux concepts et principes que vous connaissez déjà sont appliqués au développement mobile.

1. Architecture basée sur les composants

React Native partage l'architecture basée sur les composants de React.js, ce qui signifie que l'idée de décomposer votre application en composants réutilisables reste la même. Vous utiliserez toujours des composants fonctionnels et de classe, ainsi que des hooks comme useState et useEffect.

2. Gestion de l'État

Si vous utilisez Redux, l'API Context ou toute autre bibliothèque de gestion d'état dans React.js, les mêmes principes s'appliquent dans React Native. Vous gérerez les flux d’état et de données d’une manière familière, ce qui simplifie la courbe d’apprentissage.

3. Réutilisabilité du code

Avec React Native, vous pouvez réutiliser une partie importante de votre logique JavaScript existante. Bien que les composants de l'interface utilisateur soient différents, une grande partie de votre logique métier, des appels d'API et de la gestion des états peuvent être réutilisés dans les applications Web et mobiles.

4. JSX 구문

JSX는 React.js와 React Native의 기초입니다. 따라서 JSX를 작성하여 사용자 인터페이스를 만드는 데 능숙하다면 React Native가 편안함을 느낄 것입니다.

5. 공유생태계

React Navigation, React Native Paper와 같은 라이브러리, Expo와 같은 도구 등 더 넓은 React 생태계를 통해 원활한 통합과 빠른 개발이 가능합니다. 웹 라이브러리로 작업한 적이 있다면 React Native에서 모바일 라이브러리나 유사한 도구를 활용할 수 있습니다.

React Native 학습의 이점

교차 플랫폼 개발: React Native의 가장 큰 장점 중 하나는 단일 코드 베이스로 iOS와 Android 모두용으로 빌드할 수 있어 플랫폼별 개발팀의 필요성이 줄어든다는 것입니다.
성능: React Native 앱은 네이티브 API와 상호작용하고 네이티브 UI 구성요소를 렌더링하므로 Swift 또는 Java/Kotlin으로 구축된 앱과 구별할 수 없으므로 성능이 뛰어납니다.
활성 커뮤니티: React Native에는 크고 활동적인 커뮤니티가 있습니다. 다양한 리소스, 타사 라이브러리 및 도구를 사용하여 학습 및 개발 프로세스 속도를 높일 수 있습니다.
출시 시간 단축: React Native의 크로스 플랫폼 특성과 코드 재사용성을 통해 개발자는 앱 출시에 걸리는 시간을 크게 줄일 수 있습니다.

결론

React.js에서 React Native로 전환하는 것은 자신의 전문 지식을 모바일 개발로 확장하려는 프런트엔드 개발자에게 보람 있는 단계입니다. 웹과 모바일 앱은 사용자 상호 작용, 배포 및 디자인이 다르지만 특히 구성 요소 구조, 상태 관리 및 JSX 구문 측면에서 React.js와 React Native 간의 공유 원칙은 전환을 더 원활하게 만듭니다. React Native를 배우면 기술이 향상될 뿐만 아니라 크로스 플랫폼 모바일 앱을 보다 효율적으로 구축할 수 있는 기회가 열립니다.

위 내용은 React.js에서 React Native로 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!