BETA

【Reactを0から学ぶ】React Component を作る

投稿日:2018-11-02
最終更新:2018-11-02
※この記事は外部サイト(https://mittsu-blog.com/learn-react-on-0ba...)からのクロス投稿です

React は Facebook 謹製の JavaScript ライブラリです。

React で作られたアプリケーションは動作が素早く、小さなモジュールを作ることで保守管理性・再利用性を高められる、とされています。

また、Vue や Angular などと並んで人気が高いライブラリです。

前回は JSX という React に特有の文法について学びました。

https://mittsu-blog.com/learn-react-on-0base-what-is-jsx

今回は React Component という概念を学びます。

React Component ってなんだ?

React Component の定義

コンポーネントとは何か

コンポーネントとは、ある特定の目的を果たすためにつくられた再利用しやすいサイズにまとまったコードのことです。

これ自体は React に特有というわけではなく、プログラミングに一般的な概念です。

React Component とは何か

React Component は、React ライブラリに用意されているクラスです。

開発者がアプリケーションをつくるとき、それぞれが独自にコンポーネントを作ります。このときに必ずすることが、この React Component というクラスを継承させることです。

React Component の使い方

実際に React Component を使って独自のコンポーネントを書いてみると次のような感じになります。

import React from 'react'
import ReactDOM form 'react-dom'

class Task extends React.Component {
  render() {
    const greet = "Hello";
    return (
      <div>
        <h1>{greet} world</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Task />,
  document.getElementById('tasklist')
);

上から順に解説していきます(JSX が Markdown で適切に色付けされませんごめんなさい)。

ライブラリを import する

1, 2行目では、React Component を使うために必要になるライブラリを inport しています。

React は、JSX など React 特有の機能を使うために必要になります。一方 ReactDOM は、仮想 DOM 操作などブラウザへの表示に必要な機能を提供します。

コンポーネントクラスを作る

4行目で Task というコンポーネントクラスを定義しています。

コンポーネントクラスで必ずしなければならないことがあります。それは render() 関数を定義しておくことです。

さらに render() 関数の中には return を必ず入れます。return で返すのは JSX です。

JSX のルールに従って、中に素の JavaScript を埋め込むことができます。また、return の前に変数を定義しておいて、JSX から参照することもできます。

この例では複雑になりすぎると思ったので記載しなかったですが、コンポーネントクラスはそもそも JavaScript のクラスなので、コンストラクターなど他のメソッドを定義することもできます。

画面に出力する

15行目で Task というコンポーネントクラスから作ったインスタンスを、特定の場所に出力しています。

JSX を ReactDOM.render() の第1引数として与えることで、コンポーネントクラスからインスタンス化された Task コンポーネント が得られるようになっています。

まとめ

React Component というクラスを継承させることで、開発者は独自にコンポーネントクラスを作る。

独自のコンポーネントクラスはそもそも JavaScript のクラスなので、コンストラクターを定義したり、別のメソッドを定義したりすることもできる。

次回は、create-react-app という node module を使って、React でアプリケーションを作る際のひな形を簡単に生成する方法を学びます。

https://mittsu-blog.com/learn-react-on-0base-create-react-app

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@edihasamの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!