【React Native】Componentとは?
この記事の内容
はじめに
ComponentはReact Nativeの基本要素の一つです。classとfunctionの2つの種類のComponentがありますが、今回はclassのComponentについて説明していきます。Componentを使う時はJSXで書くのでJSXについてはこの記事に参考してください。
React NativeのドキュメンテーションのHello Worldのコードを参考にしながら説明していきます。
Componentの使い方
ComponentをReactからインポート
Componentを使用する為に、まずはReactからComponentをインポートする必要があります。
import React, { Component } from 'react';
これはReactとComponentをインポートしています。
ReactをインポートするのはJSXを使用するためで、JSXを書いたらReact.createElementにコンパイルしてくれます。
ComponentはComponentを使用するためにインポートします。Reactと一緒にインポートする必要があるので注意してください。
使用したいReact NativeのComponentをインポート
使用したいReact NativeのComponentをインポートします。
上記のコードではComponentを2つ使用していてViewとTextです。
import { View, Text } from 'react-native';
TextとViewを使ってみる
Textは普通のテキストを表示するためのComponentです。ここで表示するテキストは「Hello, World!」です。
<Text>Hello, world!</Text>
ViewはHTMLのdivのようにComponentを集めるためのComponentです。下記のViewの子要素はTextです。
<View> <Text>Hello, world!</Text> </View>
Componentを続けて書く場合
Componentは続けて書く場合、親のComponentが必要です。例えば、下のコードは「Adjacent JSX elements must be wrapped in an enclosing tag.」というエラーが出ます。
return (
<Text>Hello, world!</Text>
<Text>Hello, world!</Text>
)
View Componentに入れたら問題ありません。
return (
<View>
<Text>Hello, world!</Text>
<Text>Hello, world!</Text>
</View>
)
Componentの定義の方法
ComponentはReact NativeのComponentだけではなく、定義して使用することができます。
Componentを定義する時の必要な関数はrender()です。renderは表示することをリターンする関数です。通常はJSXで書きます。
先ほどのHelloWorldAppもComponentで、その中でViewとTextのComponentを使用していました。
Componentは下記のように記述します。
import React, { Component } from 'react'; class コンポーネント名 extends Component { render() { return ( ...表示内容... ); } }
また、Componentを直接インポートしない場合の記述方法もあります。
import React from 'react'; class コンポーネント名 extends React.Component { render() { return ( ...表示内容... ); } }
下記のコードにHelloBobというComponentを作りました。
export defaultとは?
export default class HelloWorldApp extends Component
このexport defaultはなんでしょうか?exportはjavaScriptの別ファイルから読み込まれるためのキーワードです。defaultは別ファイルから読み込まれた時にオブジェクト名(今回はクラス)を指定しなかったらこのオブジェクトになるという意味です。
App.jsファイルの場合は、ReactのソースからApp.jsが読み込まれることで実装されており、export defaultがアプリのメインクラスを指定する役割なのでdefaultがなかったらエラーが出ます。エラーメッセージは「No default export of 'App.js' to render!」です。
下記のように記述するとメインのクラスとして指定できます。
export default class コンポーネント名 extends Component { render() { return ( ...表示内容... ); } }
もしくは下記のような記述もできます。
class コンポーネント名 extends Component { render() { return ( ...表示内容... ); } } export default コンポーネント名;
結論
今回はHello Worldのコードを参考に説明しました。ComponentはReact Nativeのとても大切な基本です。これから自分のReact Nativeのコードを書けると思います!React Nativeの他のことを知りたかったらドキュメンテーションを参考にしてください。functionのコンポーネントはまた後の記事で記述しようと思っています。次回はpropsでComponentをカスタマイズします。