初心者向けの React Native-jsチュートリアル-php.cn

初心者向けの React Native

WBOY

リリース： 2024-08-06 11:44:38

オリジナル

981 人が閲覧しました

React Native for Beginners

LinkedIn でフォローしてください
Github.com でフォローしてください

クリックして読んでください

React Native は、JavaScript と React を使用してモバイルアプリケーションを構築するために Facebook によって開発された人気のあるフレームワークです。これにより、開発者は単一のコードベースで iOS と Android の両方で実行できるクロスプラットフォームアプリを作成できます。このブログ投稿では、React Native の基本を説明し、簡単な例を示し、初心者向けのヒントを提供します。

1. React Native の概要

React Native を使用すると、JavaScript と React を使用してモバイルアプリを構築できます。ネイティブコンポーネントを活用するため、アプリの外観と操作性はネイティブアプリのようになります。最大の利点の 1 つは、iOS と Android の間でコードを共有できることで、開発の時間と労力を削減できることです。

2. 開発環境のセットアップ

退屈せずに始められる

コーディングを開始する前に、開発環境をセットアップする必要があります。

前提条件

Node.js と npm: Node.js をダウンロードしてインストールします
Expo CLI: npm install -g expo-cli
Visual Studio Code などのコードエディタ
テスト用の iOS シミュレーター (Xcode が必要) または Android エミュレーター (Android Studio が必要)

初期セットアップ

Expo CLI をインストールします:

   npm install -g expo-cli

ログイン後にコピー

新しいプロジェクトを作成します:

   expo init AwesomeProject
   cd AwesomeProject

ログイン後にコピー

開発サーバーを起動します:

   expo start

ログイン後にコピー

このコマンドは開発サーバーを起動し、ブラウザで新しいタブを開き、プロジェクトを表示します。

3. 最初の React Native アプリの作成

簡単な「Hello World」アプリを作成してみましょう。

App.js を開く: このファイルはアプリケーションのメインエントリポイントです。
既存のコードを次のコードに置き換えます:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

ログイン後にコピー

4. React Native コンポーネントを理解する

React Native は、ネイティブ UI コンポーネントに対応する一連の組み込みコンポーネントを提供します。以下にいくつかの主要なコンポーネントを示します:

ビュー: レイアウトとスタイルの基本コンポーネント。
テキスト: テキストの表示に使用されます。
画像: 画像の表示に使用されます。
ボタン: 単純なボタンコンポーネント。

5. スタイルの追加

React Native でのスタイル設定は、JavaScript オブジェクトを使用して行われます。 StyleSheet API を使用してスタイルを作成できます。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

ログイン後にコピー

6. 状態とイベントの処理

React の useState フックを使用して状態を管理し、ボタンのクリックなどのイベントを処理できます。

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>You clicked {count} times</Text>
      <Button title="Click me" onPress={() => setCount(count + 1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

ログイン後にコピー

7. 初心者向けのヒント

React の基本を理解する: React Native は React の上に構築されています。 React をしっかり理解すると、React Native の学習が容易になります。
開発に Expo を使用する: Expo を使用すると、環境のセットアップや物理デバイスでのテストなど、React Native 開発の多くの側面が簡素化されます。
ベストプラクティスに従ってください: コードを適切に整理し、意味のある変数名を使用し、再利用可能なコンポーネントを作成します。
ネイティブ開発の基礎を学ぶ: iOS および Android 開発の基礎をいくつか知っておくと、特にネイティブモジュールを作成する必要がある場合に役立ちます。

コーディングを楽しんでください!

以上が初心者向けの React Nativeの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。