Help us understand the problem. What is going on with this article?

O'REILLYのReact ビギナーズガイドを読み書きする No.1

More than 1 year has passed since last update.

はじめに

O'REILLYのReact ビギナーズガイドを読んでいる。内容の理解を目的として要約していく。章立ては書籍の名前を引き継ぐが、内容は自分の中で極力噛み砕くように努めた。

何か面白い例や、間違いなどあればご指導していただけると幸いです。よろしくお願いします。

1. Hello World

1.1 セットアップ

Reactライブラリのページからダウンロード。今回はReact ビギナーズガイドに従ってバージョンは15.4.1で進める。バージョンによってディレクトリ構成が見た目結構違うようなので驚いた(ver15.6.1はyarnとか入っていて見た目だいぶ複雑になってる)が、Reactではディレクトリ構成に制約はないらしいしそんなもんなのか

1.2 ハロー、Reactワールド

作業ディレクトリ内に01.01.hello.htmlを作成, 内容は以下の通り。ちなみに、React ビギナーズガイドにて使用するコードは全てこのGithubリポジトリからダウンロードできるらしい、いいね

01.01.hello.html
<!DOCTYPE html>
<html>

<head>
  <title>Hello React</title>
  <meta charset="UTF-8">
</head>

<body>
  <div id="app" />
  <!-- アプリケーションはここに描画されます -->
  <!-- 以下React読み込み -->
  <script src="react/build/react.js"></script> React読み込み
  <script src="react/build/react-dom.js"></script>
  <script>
    // 以下アプリケーションのコード
    ReactDOM.render(
      React.DOM.h1(null, "Hello world!"),
      document.getElementById("app")
    );
  </script>
</body>

</html>

上の2箇所に注目

  1. <script src = "...">タグを用いてReactのライブラリ及びDOM関連機能のアドオンをインクルードしている
  2. <div id = "app">を用いてページ内でアプリケーションが置かれる場所を指定している

注目すべきはとりあえずこれだけらしい

ブラウザで01.01.hello.htmlを開く:

Screenshot 2017-07-12 19.45.32.png

できてる!

1.3 内部処理

内部でどういう処置が行われているのか見る

注目すべきオブジェクト

  • React: 全てのAPIはこのオブジェクトを通じて呼び出す, APIのサイズは最小限に留められている
  • ReactDOM: 使用頻度が高いメソッドはrender()

React.DOMとReactDOMは別物!

  • React.DOMはあらかじめ用意されているHTMLの要素の集合
  • ReactDOMではブラウザ上にアプリケーションを描画(render)するための手段が提供されている

概念「コンポーネント」: 「構成子」「構成要素」

  • UIはコンポーネントを使って記述される, 組み合わせ自由
  • 上のコードではh1コンポーネントが使われている(React.DOMオブジェクトを経由して利用)

DOMへのアクセス: document.getElementById("app"), アプリケーションを表示する場所をReactに伝えるためのもの

1.4 React.DOM.*

React.DOM.* について、各メソッドが受け取るパラメータについて考える

example
  React.DOM.render(
    React.DOM.h1(null, "Hello world!"),
    document.getElementById("app")
  );

h1()への1つ目のパラメータ(ここではnull)は、コンポーネントに渡したいプロパティを表す(DOMの属性がこれに該当する)

example
  ReactDOM.render(
    React.DOM.h1(
      {
        id: "my-heading",
      },
      "Hello world!"
    ),
    document.getElementById("app")
  ); 

2つ目のパラメータ(ここでは"Hello world!")は, 子コンポーネントを定義する際に使われる

  • 一番シンプルなケースでは、上のように文字列を表す子コンポーネントが追加される
  • 子コンポーネントを入れ子状にすることも, 引数を追加して複数の子コンポーネントを追加することも可能

example: 引数を追加し複数の子コンポーネント

example
  ReactDOM.render(
    React.DOM.h1(
      {id: "my-heading"},
      React.DOM.span(null, "Hello"),
      " world!"
    ),
    document.getElementById("app")
  );

example: 入れ子のコンポーネントの追加

example
  ReactDOM.render(
    React.DOM.h1(
      {id: "my-heading"},
      React.DOM.span(null,
        React.DOM.em(null, "Hell"),
        "o"
      ),
      " world!"
    ),
    document.getElementById("app")
  );

JSXを用いるとよりシンプルに記述することができるとのことだが、ここでは割愛。

1.5 特殊なDOMの属性

DOMの属性のうち, class,forはJavaScriptでの予約語なので利用できない

  • それぞれ、代わりにclassName,htmlforを使う

example:

example
    React.DOM.h1(
      {
        className: "pretty",
        htmlfor: "me",
      },
    );

styleは予約語ではないが、XSSのリスクが下がるように変更が加えられている

example
    React.DOM.h1(
      {
        style: {
          background: "black",
          color: "white",
          fontFamily: "Verdana",
        }
      },
      "Hello, world!"
    );

CSSのプロパティを指定する時は、JavaScriptのAPIでの名前を使う(例えばfont-familyではなくfontFamily)

1.6 ブラウザの拡張機能

ブラウザの拡張機能からダウンロードするとよい。デバッグするときに便利とのこと。

1.7 まとめ

今回やったことは以下の通り

  • Reactライブラリのインストールとセットアップ(htmlから読み込んだだけだが)
  • DOM上の指定された位置にReactコンポーネントを描画する方法, ReactDOM.render(コンポーネント, 位置)を利用
  • DOMの要素がラップされた、組み込みコンポーネントの利用。React.DOM.div(属性, 子コンポーネント)のように記述

Reactは、カスタムコンポーネントを使ってアプリケーションのUIをビルドし更新する時に真価を発揮するらしい。次の章ではそれを!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした