React! 簡単CDNで使ってみよー！

2023年7月7日 05:23

Reactを使うときはNode.jsなどを使える環境を用意しないといけませんが、CDNという仕組みを使うと簡単に使うことができます。

HTMLの中にリンクを貼るだけでいろんなフレームワークが使えるようになります。

その仕組みを使ってReactも使ってみたいと思い公式サイトを見てもありません。Vueであればすぐに出てくるのですが。

そこでちょっと調べてみました。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React!</title>
  <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>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  
</head>
<body>
<div id="root"></div>

<script type="text/babel">

// ここにスクリプト
            
</script>
  
</body>
</html>

この基本のコードに追加して表示していきます。

<script type="text/babel">

const App = () => {
   return (
<div>
<h1>My React App with CDN</h1>
</div>
   )
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

</script>

として表示させます。

こんな感じになります。

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

この部分が基本になります。id要素の"root"の部分にAPPで定義しているものを表示させます。

ReactDOM.createRoot(container);

の部分が大切です。

ReactDOM.createRoot()メソッドでHTML要素を動的に作成することができます。

もう少しカスタマイズすると、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 <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>

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

</head>
<body>
<div id="root"></div>

<script type="text/babel">

const App = () => {
  
const useState = React.useState;
const useEffect = React.useEffect;


const [state, setState] = useState(0)

const handleClick = () => setState(state + 1)

  return (
    <div>
      カウント: {state} 
      <div>
        <button onClick={handleClick}>count up</button>
      </div>
    </div>
  )
}

const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);

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

カウントアップができあがり！count up ボタンを押せばカウントされ0,1,2・・と表示されます。

ボタンを押せばカウントアップしていきます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 <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>

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

</head>
<body>

<div id="root"></div>

<script type="text/babel">

const name = "React.js!";

    const root = ReactDOM.createRoot(document.querySelector('#root'));
    root.render(
      <p>Hello, { name }</p>
    );
  
  </script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？