React.js Hello World【React.js入門#1】

2022年10月21日

みやちゃ

皆さんこんにちは、みやちゃです！

物理とプログラミングについて解説しています！

こちらの記事で、Railsのアプリケーション開発からRspecのテスト、herokuにデプロイまで解説しています！

今回からReact.jsに入門していきます！

今回は

React.jsでHello World

この記事を読むと

React.jsでHello Worldを表示することができます！

Reactを使う方法

Reactを使う最も簡単な方法は、<script>タグを使って、Reactライブラリの取り込みを行うことです。

HTMLファイルに以下の３行を埋め込むことで、Reactを使えるようになります。

  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

Hello World

それでは実際にコードを書いて、Hello Worldと表示させてみましょう。

以下のコードを見てください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.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>

上記のコードでは、６〜８行目では、ライブラリの取り込みをしています。

１４〜１９行目では、Javascriptのコードを書いています。

１６行目を見ると、Javascriptのコードの中に、HTMLタグが出てきています。

これは、JSXという拡張文法を用いて記述されたものです。

このコードが実行されるときは、HTMLタグ部分もJavascriptに変換されて実行されます。

それではブラウザで確認して見ましょう。

HTMLファイルをファブルクリックすると、ブラウザが表示されます。

まとめ

いかがでしたでしょうか？

今回は、React.jsでHello Worldと表示しました。

みやちゃ

ここまでご覧いただきありがとうございます！