React アプリケーションをローカルで実行する
React アプリをローカルで実行することは、Web 開発スキルを練習するための非常に貴重な機会になります。 Webpack、Babbel、その他の必要なツールのセットアップなどの時間のかかる構成ではなく、コードの記述に集中できます。
単一の HTML ページで React アプリケーションをローカルで実行する
React 公式 ドキュメント は、React をローカルで実行するための既製の HTML ファイルを提供します。 HTML ファイルをダウンロードし、コード エディターで開き、必要な変更を加えてから、ブラウザーでファイルを開くだけです。
この HTML ファイルには、<head> セクションと <body> セクションがあります。 前者では CDN リンクを使用して React をインポートし、後者には id 属性 root を持つ <div> が含まれています。
次に、<script> の開始タグと終了タグを使用して、HTML ファイルで JavaScript を実行できるようにします。 ここでは、document.getElementById() メソッドを使用して DOM 要素を参照し、ReactDOM.createRoot() メソッドを使用してこの特定のコンテナーの React を開始します。
最後に、render() メソッドを使用して、HTML ファイルでコンポーネントを実行します。
create-react-app を使用してローカルで React アプリケーションを実行する
React ライブラリを開発および維持する組織である Facebook は、create-react-app パッケージを作成しました。 npm コマンドを数回実行するだけで、SPA (シングル ページ アプリケーション) を作成できます。
React でアプリを構築するためのほぼ理想的な環境をセットアップします。 コンパイラ、トランスパイラ、Webpack などのツールを含むプロジェクトがセットアップされます。
これらのツールは必要であり、JSX テンプレート言語などの高度な React 機能を使用できるようにします。 また、destructuring、アロー関数など、最新の JavaScript 機能を使用する必要があります。
これにより、React 開発者は環境のセットアップではなく、コードの学習に集中できます。 プロジェクトを作成するには、必要なファイルを格納するディレクトリを作成する任意のフォルダーを見つけます。
次に、コマンド プロンプトを開き、そのフォルダーに移動します (Windows では cd コマンドを使用)。 次のコマンドを使用して、プロジェクトを作成します。
npx create-react-app app-name
ここで、npx create-react-app はコマンドで、最後の部分は React アプリケーション用に選択した名前です。
次に、次のコマンドを使用して、新しく作成されたプロジェクトのフォルダーに移動します。
cd app-name
最後に、このコマンドを使用して、コンポーネントのライブ プレビューを開始できます。
npm start
通常、JavaScript ファイルはプロジェクトの src フォルダーにあります。 App.js ファイルはデフォルトの親コンポーネント ファイルですが、新しいコンポーネントごとに別のファイルを作成できます。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn