React Nativeを学ぶ - The Basics②

はじめに

Core Components and Native Components について学んでいきます。

reactnative.dev

Core Components and Native Components

• そもそもReact Nativeとは、ウェブフレームワークであるReactを使って、AndroidやiOSのアプリを作成するためのオープンソースのフレームワークのこと
• React Native では、JavaScript を使用してプラットフォームの API にアクセスしている
• まずはコンポーネントという概念を学ぶ

Views and mobile development

• Android と iOS の開発では、Viewは UI の基本的な構成要素
• テキストの行やボタンなど、アプリの最小の視覚要素も全てViewという概念の中にある

Native Components

• AndroidではKotlinやJavaを、iOSではSwiftやObjective-Cを使ってViewを構成する
• このようなプラットフォームに紐づく、Viewを呼び出すための仕組みをNative Componentsという
• React NativeではReactコンポーネント（JavaScript）からAndroidやiOSのViewを構成するので、JavaやSwiftで開発されたアプリと同様に動作する

Core Components

• React Nativeでは、よく使う基本的なViewに対してCore Componentsを提供している
• 自分自身でコンポーネントを作成することもできる
• コミュニティが作成したコンポーネントを利用することもできる
• 例えば、React NativeのUIコンポーネント<View>は、iOSのに対応するし、<text>は<UITextView> に対応する
• React NativeコンポーネントはReactコンポーネントと同じAPI構造をしているので、Reactも理解しておく必要がある

おわりに

今回はコンポーネントという概念を学びましたが、いまいち腑には落ちていないです。以下に補足をメモしておきます。

• Reactは、Facebook（現Meta）が開発したJavaScriptライブラリで、UI構築に使用される（いわゆるフロントエンド）
• HTML、CSS、JavaScriptを統合的に扱い、効率的にUIを構築する仕組みを提供してくれる
• React NativeはiOSやAndroid開発をできるようにしたReactの拡張
• コンポーネントベースとすることで、コンポーネントの再利用が容易、他のコンポーネントからの独立性、状態管理（state）、階層構造の明確さという利点を獲得している

以上