Reactの簡単な紹介

1. CDNの紹介

通常の JS ライブラリやフレームワークと同様に、React も CDN からインポートできます。

CDN を使用してインポートする前に、cjs と umd の 2 種類の JS ファイルについて理解する必要があります。

cjs: 正式名称はCommonJSで、Node.jsでサポートされているモジュール仕様です。

umd: 正式名称はUniversal Module Definitionで、Node.jsが使用するcjsを含んだ統一されたモジュール定義であり、ブラウザやNode.jsを含むモジュール仕様と互換性があります。

新しいモジュール規則: 最新のモジュール規則では、import および export キーワードを使用します。

そのため、Reactを導入する際には、Node.jsとブラウザの両方をサポートできるumdバージョンを最初に使用するのが一般的です。

React の CDN 導入には、 react と react-dom という 2 つの JS ライブラリ ファイルの導入が必要です。ここでは BootCDN 導入を例に説明します。

次のインポートでは、umd バージョンも導入されており、インポートの順序は、最初に react を導入し、次に react-dom を導入する必要があります。

1.1 react (最初にインポート)

ここには開発版と製品版があります。1つは開発者版、もう1つは製品版です。どちらでも構いません。製品版は開発者版よりも機能が充実しているかもしれませんが、メモリを多く消費します。ここでは製品版の紹介を例に挙げます。

<script src="https://cdn.bootcss.com/react/16.13.1/umd/react.production.min.js"></script>

1.2 react-dom（後ほど紹介）

reactとreact-domの導入方法は上記と同様です。製品版はumd版にしてください。バージョン番号はreactと同じであればベストです。

<script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

1.3 reactが正常に導入されているか確認する

<スクリプト>
  コンソールにログ出力します。
  コンソールにログ出力します。
</スクリプト>

ReactとReactDOMの2つのオブジェクトを正常にインポートできれば導入成功です！

2. Webpackの紹介

Webpack 構成環境で import ... from を使用します。コマンドは次のとおりです。

//React react-dom をインストール
糸を追加して反応し、反応-dom

//React react-dom を導入する
「react」からReactをインポートします
「react-dom」からReactDOMをインポートします。

Webpack 以外にも、rollup や parcel も上記のインポート方法をサポートしています。

3. Reactアプリを作成する

Webpcakは、ベテランがReactを導入するのにはより柔軟ですが、初心者にとってはWebpackの設定が非常に複雑です。Reactを導入するには、複雑なWebpackを設定する必要があり、それがより困難になります。そのため、VueにVue cliが搭載されているのと同じように、ReactにもReact開発用の標準ツール、つまりVue cliに似たcreate-react-appツールが搭載されています。どちらもWebpackが組み込まれており、React開発環境の設定に役立ち、直接使用できます。

初心者にとっては、create-react-app ツールの方が使いやすいです。

//create-react-appをグローバルにインストールする
糸グローバル追加create-react-app

// バージョン番号を確認する create-react-app --version

//Reactファイルを作成し、作成するディレクトリを入力して、createコマンドcreate-react-appプロジェクト名を実行します

以上がReact導入の詳細についての簡単な紹介です。React導入の詳細については、123WORDPRESS.COM内の他の関連記事にも注目してください！