マリーとジョーのIT研究ブログ ( ロックシステム)

株式会社ロックシステムの技術研究チームのマリーとジョーです。IT研究ブログを色々更新していきます!

【React Native】Componentとは?

f:id:rocksystem6611:20191205105916p:plain

はじめに

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

rocksystem6611.hatenablog.com

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つ使用していてViewTextです。

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をカスタマイズします。

参考