どうも、イソップです。
最近Reactを勉強し始めたのですが、
情報は多いけれどそれぞれが散乱していて勉強するのが大変だと気づきました。
そこで少しづつ覚えたことを書いていこうと思います。
まず手始めに、Reactで「Hello World」を表示してみましょう。
始めにReactとは
ReactはJavaScript製のUIライブラリです。
MVCで表現するところのView（ビュー）の部分のみを担当します。
コンポーネント指向の設計が特徴的で、
ReactでフォームやボタンなどのUIパーツを個別に作って、
その一つ一つを組み合わせてページを構築していきます。
また、Virtual DOMという概念を採用していて、
Reactは独自にページのDOMの設計図を持ちます。
この設計図を頼りに、DOMの更新を行うため、
従来のページ描画よりも格段に効率的で軽快に動作するページが作れます。
最近のシングルページアプリケーション構築では、
Reactが採用されることが非常に多くなっています。
ReactとReactDOMを読み込む
では始めに、HTMLファイルを新規作成します。
index.html を作成しましょう。
次にReactのファイルを読み込みます。
Reactは react.js と react-dom.js の、2つのファイルから構成されています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello, React World!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="hello.js"></script>
</body>
</html>
- HTMLで
react.min.jsとreact-dom.min.jsをCDNから読み込みます。 body内に<div id="app"></div>を配置します。- 新しくJavaScriptファイル「hello.js」を作成します。
bodyの最後に読み込みます。
JavaScriptコードを記述する
次に、hello.js にJavaScriptコードを記述します。
ReactDOM.render(
React.DOM.h1(null, "Hello, React world!"),
document.getElementById('content')
);
「Hello, React world!」が画面に出力されるはずです。
See the Pen React Hello World by Youhei Isokawa (@yuhiisk) on CodePen.
ReactDOM.render()はHTML上に要素をレンダリングします。- その第1引数は、h1要素を作成するReactの機能です。
nullとHello, React world!を指定します。 - 第2引数に作成した要素の挿入先を指定します。例では、
<div id="app">にh1要素が挿入されます。
まとめ
Hello worldは表示できましたか？
まずはReactの第1歩です。
これから少しづつReactに慣れていきましょう！