React インストール(CDN)

React は直接ダウンロードして使用でき、ダウンロードパッケージには学習用の例も多数用意されています。

このチュートリアルでは React のバージョン 18.2.0 を使用しています。公式サイトでhttps://reactjs.org/最新版をダウンロードできます。

字节跳动（ByteDance）の React CDN ライブラリを使用する場合、アドレスは次のとおりです：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

Staticfile CDN の React CDN ライブラリを使用する場合、アドレスは次のとおりです：

<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script> <!--本番環境での使用は推奨されません--> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

公式が提供する CDN アドレス：

<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> <!--本番環境での使用は推奨されません--> <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

注意：ブラウザで Babel を使用して JSX をコンパイルするのは非常に非効率です。

使用例

次の例は Hello, React! を出力します。

React の例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script> </head> <body> <div id="example"></div> <script type="text/babel">// シンプルな React コンポーネント function App() { return<h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); // React コンポーネントを DOM にレンダリング root.render(<App />); </script> </body> </html> </script> </body> </html>

試してみる »

例の解説：

この例では、react.production.min.js、react-dom.production.min.js、babel.min.js の3つのライブラリを導入しています：

  • react.min.js- React のコアライブラリ
  • react-dom.min.js- DOM 関連の機能を提供します
  • babel.min.jsBabel は ES6 コードを ES5 コードに変換できるため、現在 ES6 に対応していないブラウザでも React コードを実行できます。Babel には JSX のサポートが組み込まれています。Babel と babel-sublime パッケージを併用することで、ソースコードのシンタックスハイライトをまったく新しいレベルに引き上げることができます。
//シンプルな React コンポーネント function App() { return <h1>Hello, React!</h1>; } const root = ReactDOM.createRoot(document.getElementById("example")); //React コンポーネントを DOM にレンダリング root.render(<App />);

上記のコードは、h1 見出しを id="example" ノードに挿入します。

const root = ReactDOM.createRoot(document.getElementById("example"));
  • DOM コンテナを取得：document.getElementById("example")id が "example" の DOM 要素を取得しました。
  • ルートノードを作成：ReactDOM.createRootReact 18 で導入された新しいメソッドで、React ルートノードを作成するために使用します。この例では、root変数はこのルートノードを保持しています。

注意：

JSX を使用する必要がある場合は、<script> タグの type 属性を text/babel に設定する必要があります。

その他の拡張