【React】Reactに爆速で入門する1。まずは1ファイルだけでHelloWorldする

はじめに

みなさん、こんにちは!今回は、Javascript、というかReactの話です。

最近のフロントエンド開発ではまぁまず名前を耳にするReact。
私も、もう2年前位に遊びで手を出してみましたが、どうにもコンポーネントの切り単位の統一やデザイナーの分業といったところで引っ掛かりを感じ、結局Angularをメインで使用しています。

が、遂に、業務でReactを使った案件に携わることになり、重い腰を上げて、マジで今更なんですがReactを勉強することにしました。マジで今更なんですけどね。ええ。

現在のフロントエンド開発では、React + Redux + Webpack、をベースに他のReact周辺まわりライブラリを追加していくぜ、みたいな感じらしいんですが、これらを一気に習得しようとするとこんがらがってしまうと考えたので、まずはReactのみ、次にWebpackを使って、次にReduxと一緒に、のように段階的に勉強していくことにしました。

今回は、本当にReactだけに焦点を当て、モジュール切り出しとかそういうのも特に考えずに1ファイル内でReactを動かすだけの回にします。

ちなみに、私はReactの勉強を始めるにあたって、下記のQiitaの記事を参考にさせて頂きました。とてもシンプルで分かりやすかったです。

React入門チュートリアル①(Qiita)

今回の記事は、上記記事の内容に沿っていきますんで、進み方は同じです。補足とか、私の思ったことなんかを追記していきます。

今回の雛形

@stivan622 さんのindex.htmlとほぼほぼ同じです。とりあえず、下記雛形をコピーしてください。
<html lang="ja">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="app"></div>

  <!-- react, react-dom, babelをCDNから読み込むよ -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>

  <script type="text/babel">

  </script>

</body>
</html>

実際のReact開発では、WebpackやらBrowserifyやらを使ってbundleしたファイル1つをindex.htmlで読み込んで、というのが普通です。
が、今回は他のフロントエンドの色々を考えずに、というコンセプトなんで、Scriptタグで読み込んでいきますからね。

Hello, Worldする

まずは、なにはともあれHello, Worldします。先ほどの雛形のscript部分に追記します。

  class HelloWorld extends React.Component{
    render(){
      return (
        <div>
          <h2>Hello, World!!</h2>
          <p>hello, worldできました</p>
        </div>
      )
    }
  }

  ReactDOM.render(
    <HelloWorld />,
    document.getElementById("app")
  );

ReactDOM.render

一旦、下の方から解説していきます。

ReactDOM.render()

は、雰囲気で分かると思いますがReactにDOMの描画をお願いしている部分です。

第1引数には、DOMっぽい何かを与えます。

Javascriptに慣れている人は、かなり違和感を感じると思います。何故この<HelloWorld />は”や’で囲まれていないのかと。私はかなりもやもやを感じましたが、こういうものなので慣れましょう。
このHTMLに似た謎の記法はJSXと呼ばれます。JSXを使用しない方法もありますが、一般的にはJSXを使用するのでやはり慣れてください。
ちなみに、JSXはHTMLと完全に互換の記法ではありません。

第2引数は、第1引数で与えたオブジェクトを描画する対象を指定します。ここは普通にJavascriptです。

Class定義部について

さて、コードの前半のclass定義部分についてです。
ここのクラス名がReactDOM.renderの<HelloWorld />と対応しています。
大事な部分は、extends React.Componentとrenderメソッドです。

Reactの仕組みで描画させたい場合(ReactComponentとして使用する場合)は、React.Componentを継承させておく必要があります。中身は気にしないでokです。

このクラス内の唯一のメソッド、renderは、最終的にReactComponentを返却する必要があります。
今回は、Hello, Worldを表示したいだけなんでh2要素とp要素を返却しています。

renderメソッドでは、親が1つになるようにしないとエラーになります。
例えば、divで囲まずにh2, pをトップレベルで書いてしまうとエラーです。

今回class定義したものを使用して、最終的にReactDOM.renderしていますが、classではなく関数でも良いですし、直接jsxを書いてもokです。

結果

とりあえず全てのコードが間違いなく書かれていれば、下記のように画面表示されるはずです。

次回は、もっと実践的にReactしていきます。

【React】Reactに爆速で入門する2。親から値を受け取りリスト表示する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です