記事ディレクトリ
反応シリーズを0から学ぶ - 第1節：環境構築＋プロジェクト作成
1.node.js をインストールする
最初に node.js をインストールします。インストール後、ターミナルでコマンドを実行して、インストールが成功したかどうかをテストします。成功すると、バージョン番号が出力されます。
$ node -v
$ npm -v
$ npx -v
2. create-react-app を使用してプロジェクトを初期化します
# 其中 npx 是npm附带的package运行工具, react-blog是我们的项目名称
$ npx create-react-app react-blog
node.js のバージョンが低すぎるというメッセージが表示された場合は、node.js14 以降のバージョンを要求するか、必要なバージョンを再インストールするか、nvm を使用してより高いバージョンに切り替えます。
node.jsのバージョン管理ツールnvmのインストールと使い方については別記事を参照してください
.nvmがインストールされたら実行してくださいnvm use 18.12.0.ここではバージョン18.12に切り替えます.必要に応じて切り替えることができます. npx create-app コマンドを再度実行すると、パッケージがインストールされることを確認するメッセージが表示されます。Enter キーを押して続行し、パッケージのインストールが完了するまで待ちます。
行き詰まった場合は、npm ソースを設定できます。別の記事
how to publish npm package and the use of npmを参照してください。
# 设置为淘宝源
npm config set registry=https://registry.npm.taobao.org/
# 查看是否设置成功
npm config get registry
上記で create-react-app を実行したため、プロジェクトが作成されました. この時点では、作成を繰り返すことはできません. そうしないと、ディレクトリが既に存在することを確認するプロンプトが表示されます.
以前に作成したディレクトリを削除して、再度実行する必要があります
$ rm -rf react-blog
$ npx create-react-blog
3. プロジェクト ディレクトリに入り、プロジェクトを開始します。
インストール成功後、プロンプトに従ってディレクトリに入り、npm startでプロジェクトを起動
$ cd react-blog
$ npm start
ターミナルは、webpack が正常にコンパイルされたことを確認し、ブラウザーが自動的に開いて localhost:3001 にアクセスします (3000 を占有する別のプロジェクトがここにあるため、自動的にポート 3001 に切り替わり、新しく起動されたポートは 3000 です)、プロジェクトのスキャフォールディングの初期化ページが正常に表示されました。
4. /src/App.js ファイルを編集して保存します
vscode を使用してプロジェクトを開き、src ディレクトリ内の App.js を編集すると、変更がブラウザーの更新に自動的に再読み込みされます。プロジェクト ディレクトリへの新しいターミナル cd を開き、 code を実行します。
# 使用vscode打开目录
$ code .
App.js のテキストを少し変更します
それに応じて、ブラウザ ページのテキストが変更されました。
このシリーズには、さらに多くの記事が引き続き記録されます
