React はじめに
本番環境でReactを使用するには、Node.jsに含まれるnpmが必要です。
Reactの概要を理解するには、ReactコードをHTMLで直接記述します。
ただし、本番環境でReactを使用するには、npmとNode.jsがインストールされている必要があります。
HTMLでコードを記述
Reactの学習を開始する最も簡単な方法は、ReactをHTMLファイルに直接記述することです。
テックアイエスガイドスペース
HTMLファイルの作成を開始する最も簡単な方法は、テックアイエスガイドスペースです。
作品を作成、編集し、他のユーザーと共有するのに最適な場所です!
まず3つのスクリプトを追加します。最初の2つはJavaScriptsの中にReactのコードを書けるようにするもので、3つ目のBabelはJSXの構文とES6を古いブラウザで書けるようにするものです。
JSXの詳細については、React JSXの章で学習します。
例
HTMLファイルに3つのCDNを追加します。
Reactをこのように使用する場合、テスト目的であれば問題ありませんが、本番環境ではReact環境をセットアップする必要があります。
React環境のセットアップ
npxとNode.jsがインストールされている場合は、create-react-appを使用してReactアプリケーションを作成できます。
すでにcreate-react-appをインストールしている場合は、npxが常にcreate-react-appの最新バージョンを使用するように、パッケージをアンインストールすることをお勧めします。
アンインストールするには、コマンドnpm uninstall -g create-react-appを実行します。
次のコマンドを実行して、my-react-appという名前のReactアプリケーションを作成します。
拡張機能オプション
create-react-appReactアプリケーションを実行するために必要なものがすべてセットアップされます。
Reactアプリケーションを実行する
これで、最初の実際のReactアプリケーションを実行する準備が整いました。
次のコマンドを実行して、my-react-appディレクトリに移動します。
次のコマンドを実行して、Reactアプリケーションmy-react-appを実行します。
新しく作成したReactアプリが表示された新しいブラウザーウィンドウがポップアップ表示されます。そうでない場合は、ブラウザを開いて、localhost:3000アドレスバーに入力します。
結果：
Reactアプリケーションを変更する
コンテンツを変更する方法は?
my-react-appディレクトリを見ると、srcフォルダーが見つかります。srcフォルダー内にApp.jsというファイルがあります。これを開くと次のようになります。
/myReactApp/src/App.js:
HTMLコンテンツを変更して、ファイルを保存してください。
ファイルを保存するとすぐに変更が表示されることに注意してください。ブラウザをリロードする必要はありません。
例
内のすべてのコンテンツを置き換えます<div className="App">とともに<h1>要素。
「保存」をクリックすると、ブラウザーで変更が確認されます。
不要なインポート(logo.svgとApp.css)を削除したことに注意してください。
結果：
次の課題は？
これで、コンピューターにReact環境が作成され、React についてさらに学習する準備が整いました。
このチュートリアルの残りの部分では、「Show React」ツールを使用して、Reactのさまざまな側面と、それらがブラウザーにどのように表示されるかを説明します。
コンピューターでも同じ手順を実行する場合は、まずsrcフォルダーを削除して、index.js1つのファイルのみを含めます。また、index.jsファイル内の不要なコード行を削除して、以下の「Show React」ツールの例のようにする必要があります。
例
[例の実行] ボタンをクリックして結果を確認します。
index.js:
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。