【React Native】Componentとは？

はじめに

---

ComponentはReact Nativeの基本要素の一つです。classとfunctionの2つの種類のComponentがありますが、今回はclassのComponentについて説明していきます。Componentを使う時はJSXで書くのでJSXについてはこの記事に参考してください。

【React Native】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を作りました。「Hello Bob!」のテキストを表示するComponentです。HelloWorldApp Component内のView 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をカスタマイズします。

参考

---

• ドキュメンテーション
• ドキュメンテーション：日本語翻訳（一部）
• import Reactが必要の理由

---

これからエンジニア転職を考えている方へ

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください