Zenn
🗂

みんな大好きReactの学習環境を爆速で作る。

2022/10/27に公開
React
Babel
#
JSX
tech

React嫌いの人もいるだろうけどね。

ってドキュメントに書かれてた。
↓ドキュメント

Reactコンポーネントを使うためにスクリプトをロードする

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

JSXを使うためにbabelをロードする

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

このbabelがJSXをクライアント側でコンパイルしてくれるらしい

取り扱いサンプル

自分用の覚書付き

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
　　<!-- headタグに入れるんだね。 -->
　　<!-- Reactをロード -->
　　<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
　　<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
　　<!-- JSXコンパイルのためにbabel standaloneをロード -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
    
      function MyApp() {
        return <h1>Hello, world!</h1>; // このタグで囲んだ形わかりやすいから使いたかった
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container); //ReactDOMとして宣言
      root.render(<MyApp />); // .renderじゃないとただのObjectとしてしか処理されなかった。

    </script>
  </body>
</html>

さいごに

大規模なものじゃなければこれでReactの学習は簡単にできそう。
今作ってる在庫管理のウェブアプリで使ってみたかったので、
簡単に環境整えたかったので、このドキュメント知れて良かった。
本当はnode.jsでちゃんと環境整えるのが良いんだろうけど、
今の規模で自分の環境だとこれで十分だと思った。
github pagesでも手っ取り早く使うことができそうなので、
試しに使いたいと思う。
もし、利用上で問題が多かったらまた記事にして情報共有していきたいと思う。
以上。

Discussion