Javascript React プログラミング

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

 

みやちゃ

 

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

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

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

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

今回は
  • React.jsでHello World
この記事を読むと

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

目次

Reactを使う方法

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

HTMLファイルに以下の3行を埋め込むことで、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>

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

14〜19行目では、Javascriptのコードを書いています。

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

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

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

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

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

まとめ

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

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

 

みやちゃ

 

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

© 2024 とあるエンジニアの備忘録ブログ Powered by AFFINGER5