【React】まだ遅くないReact事始め。はじめてのHello World

【React】まだ遅くないReact事始め。はじめてのHello World

【告知】 10/14(土)新潟県上越市でIT勉強会を開催します!!

スポンサーリンク

どうも、イソップです。

最近Reactを勉強し始めたのですが、
情報は多いけれどそれぞれが散乱していて勉強するのが大変だと気づきました。
そこで少しづつ覚えたことを書いていこうと思います。

まず手始めに、Reactで「Hello World」を表示してみましょう。

始めにReactとは

React

ReactはJavaScript製のUIライブラリです。
MVCで表現するところのView(ビュー)の部分のみを担当します。

コンポーネント指向の設計が特徴的で、
ReactでフォームやボタンなどのUIパーツを個別に作って、
その一つ一つを組み合わせてページを構築していきます。

また、Virtual DOMという概念を採用していて、
Reactは独自にページのDOMの設計図を持ちます。
この設計図を頼りに、DOMの更新を行うため、
従来のページ描画よりも格段に効率的で軽快に動作するページが作れます。

最近のシングルページアプリケーション構築では、
Reactが採用されることが非常に多くなっています。

ReactとReactDOMを読み込む

では始めに、HTMLファイルを新規作成します。
index.html を作成しましょう。

次にReactのファイルを読み込みます。
Reactは react.jsreact-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>
  1. HTMLで react.min.jsreact-dom.min.js をCDNから読み込みます。
  2. body 内に <div id="app"></div> を配置します。
  3. 新しく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の機能です。nullHello, React world! を指定します。
  • 第2引数に作成した要素の挿入先を指定します。例では、<div id="app"> にh1要素が挿入されます。

まとめ

Hello worldは表示できましたか?
まずはReactの第1歩です。

これから少しづつReactに慣れていきましょう!

【React】まだ遅くないReact事始め。はじめてのHello World


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。