1. /
  2. /
  3. はじめてのReact #1「HelloWorld」
     
  •   

はじめてのReact #1「HelloWorld」

  • このエントリーをはてなブックマークに追加
  • LINEで送る
この記事は 2018年12月23日 に書かれたものです
「はじめてのReact」一覧に戻る

JavaScript界のモダンな3大フレームワーク「React」「AngularJS」「Vue.js」、いずれも一長一短あるクセのあるソフトウェアで常に宗教戦争にさらされているわけですが、結論から言えばプロジェクトや個人の趣向にあった物を使えば良いし、正直なところES2015(ES6)以降を使うなら個人的にはVanillaJSで十分な場合が多いと思っています。

ところがしばらく前からReacは単なるWebアプリの世界を抜け出し、スマホ用のネイティブアプリやVRなど様々な分野に広がりを見せています。Googleトレンドで過去5年間のデータを見ると、調べ方によりますがこれを書いている2018年末はReactが優位な模様。

乗るしか無い、このビッグウェーブに！というわけで、しばらくReactについてお勉強をしてみたいと思います。

- Sponsored Link -

HellowWorld

公式サイトのドキュメントを見ると、まずはCodePenなどでサンプルを実行するように言われるのですが、

If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen or CodeSandbox.

全体像を見渡しながらお勉強したかったので、以下の段落で紹介されているサンプルをまずは実行してみます。

If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos.

コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

オリジナルのソースはこちら。

Hello World
https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html
raw.githubusercontent.com

実行結果

なんか動いた！
ReactDOM.render()メソッドが実行され、最終的に<div id="root"></div>内にHelloWorldが表示されているのがわかります。

ReactDOM.render()内にいる<h1>Hello, world!</h1>の部分がJSXというやつですね。HTMLのように見えて実際にはXMLだそうで、実行時にはReactのコードに変換されているとのこと。ReactといえばこのJSXが印象深いのですが必ずしも利用する必要はありません。

JSXを使わない場合は以下のようなコードを書くと同じように動いてくれます。

ReactDOM.render(
  React.createElement("h1", null, "HelloWorld"),
  document.getElementById('root')
);

1行だけなら良いのですが、これが10行を超えてきて、入れ子構造になってくると、JSXのありがたみが分かってくるらしいので、しばらく使って見てからどちらで行くかを決めた方が良いかもしれませんね。

JSXが初見で気持ち悪いし、これが原因で食わず嫌いになる気持ちは非常によくわかりますｗ

「はじめてのReact」一覧に戻る

書籍

入門 React ―コンポーネントベースのWebフロントエンド開発
入門 React ―コンポーネントベースのWebフロントエンド開発

posted with amazlet at 18.12.23
Frankie Bagnardi Jonathan Beebe Richard Feldman Tom Hallett Simon HØjberg Karl Mikkelsen
オライリージャパン
売り上げランキング: 44,220
Amazon.co.jpで詳細を見る

参考ページ

Getting Started – React
https://reactjs.org/docs/getting-started.html
A JavaScript library for building user interfaces
reactjs.org

Introducing JSX – React
https://reactjs.org/docs/introducing-jsx.html
A JavaScript library for building user interfaces
reactjs.org

https://www.amazon.co.jp/入門-React-―コンポーネントベースのWebフロントエンド...
https://www.amazon.co.jp/入門-React-―コンポーネントベースのWebフロントエンド開発-Frankie-Bagnardi/dp/4873117194/ref=sr_1_1?ie=UTF8&#038;qid=1545559467&#038;sr=8-1&#038;keywords=入門React
www.amazon.co.jp

コメント

コメント欄は休止中です。お問い合わせはこちらからどうぞ。ご質問はTwitterにリプを投げてください。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal（ペイパル）
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

関連した記事

同じカテゴリの記事

旧コメント欄（表示のみ）

※こちらのコメント欄は以前稼働していたものです。現在は新たに書き込むことはできません。ご感想やご質問は記事の下にあるコメント欄をご利用ください。