✨
React勉強部屋その⓪ React環境構築方法 👍
React環境構築方法
目次
- Node.js のインストール
- create-react-app のインストール
- Reactアプリ実行
Node.js のインストール
以下のリンクからNode.jsをインストールしましょう！
LTS版(Long Time Support版)でOKです！
- 以下の順番です
- Node.jsのインストールよりLTS版をダウンロード
- Node.jsのインストーラを実行
- ようこそNode.jsインストーラーへ → 続ける
- 使用許諾契約 → 続ける → 同意する
- インストール先の選択 → 続ける
- "XXXXX"に標準インストール → インストール
- インストールが完了しました → 閉じる
Nodeがインストールできたかどうか確認
コマンドプロンプト(Windows)もしくはTerminal(Mac)を開いて、以下のコマンドを叩きます。
node -v
以下の様にバージョン番号が出てきたらインストール成功です。
v16.14.0
npm(node package manager)もインストールされているかどうか確認
npm -v
こちらも以下の様にバージョン番号が出てきたらインストール成功です。
8.3.1
create-react-app のインストール
次はReactの環境を簡単に作成できるcreate-react-appをインストールします。
npm install -g create-react-app
では、デスクトップなどにReactのプロジェクトを作成していきましょう。
create-react-app react-app
Reactの雛形のインストールが終わったらHappy Hacking!と祈ってくれるはずです。
Reactアプリ実行
作成したプロジェクトに移動しましょう。
cd react-app
移動したら、Reactアプリ開始のコマンドを実行です！
npm start
以下の様な画面がでたら成功です。
これでReactアプリの環境構築が完了です！
🚀皆様お疲れ様でした🚀
Homework
- [Edit src/App.js and save to reload]のところを[Hello world]に変えてみてください
- 背景の色をピンク色[#F69896]へ変更してみてください
- タブのタイトルの名前を[ReactApp]から[MyApp]へ変えてみてください
上記の問題はプログラミングコミュニティであるProAcaが運営しております！
いつでも質問できる環境を整えていますので、ぜひご参加ください！
ProAca モダン技術専用のプログラミングコミュニティ
Discussion