【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

記事が少しでもいいなと思ったらクラップを送ってみよう!
21
+1
@edihasamの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする