在React中,写一个HelloWorld!!
总结
以下是使用React创建一个简单的HelloWorld应用的步骤。由于兼顾环境搭建,可以快速用于环境设置。
这篇文章非常非常参考了Naoya Abe先生的《React入门教程:尝试打印HelloWorld!》。对此表示感谢。
大致步骤
1. 安装Node.js
2. 安装Yarn
3. 安装create-react-app
4. 执行create-react-app命令
5. 运行yarn run start
詳細步驟
安装Node.js
Node.jsにアクセスしましょう。(2021年8月時点)
推奨版でOKです。
ダウンロードして手順に従ってインストールしましょう。
确认Node.js和npm是否已安装。
-
- Windowsキー+R を押して「ファイル名を指定して実行」を開く。
-
- 「powershell」と入力しエンターを押して、PowerShellを開く。
-
- 「node -v」を入力してENT。
-
- 「npm -v」を入力してENT。
- バージョン情報が表示されればOK。
安装Yarn
-
- Windowsキー+R を押して「ファイル名を指定して実行」を開く。
-
- 「powershell」と入力しエンターを押して、PowerShellを開く。
-
- 「npm install -g yarn」を入力してENT。
- インストールが完了した旨のメッセージが表示されればOK。
检查是否已安装了yarn。
-
- powershellに「yarn -v」を入力してENT。
- バージョン情報が表示されればOK。
打通道路
-
- スタートメニューを押して、「kan」と入力し、「環境変数を編集」を押す。
- 「C:\Users\UserName\AppData\Local\Yarn\bin」をPathに追加する。
创建并安装 create-react-app
-
- Windowsキー+R を押して「ファイル名を指定して実行」を開く。
-
- 「powershell」と入力しエンターを押して、PowerShellを開く。
- 「yarn global add create-react-app」と入力する。
执行create-react-app命令
-
- 任意のディレクトリに移動する。「cd C:\reactProject」
- 「create-react-app test」を実行する。
运行yarn run start命令
-
- 「cd test」で作成したプロジェクトに移動する。
-
- 「yarn run start」を実行する。
- このコマンドを入力すると自動的にブラウザが表示されReactの画面が表示されます。