React勉強部屋その⓪ React環境構築方法 👍

2022/07/09に公開

React環境構築方法

目次

  1. Node.js のインストール
  2. create-react-app のインストール
  3. Reactアプリ実行

ReactIcon

Node.js のインストール

以下のリンクからNode.jsをインストールしましょう!
LTS版(Long Time Support版)でOKです!

Node.jsのインストール

Node.js

  • 以下の順番です
  1. Node.jsのインストールよりLTS版をダウンロード
  2. Node.jsのインストーラを実行
  3. ようこそNode.jsインストーラーへ → 続ける
  4. 使用許諾契約 → 続ける → 同意する
  5. インストール先の選択 → 続ける
  6. "XXXXX"に標準インストール → インストール
  7. インストールが完了しました → 閉じる

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環境構築完了

これでReactアプリの環境構築が完了です!
🚀皆様お疲れ様でした🚀

Homework

  1. [Edit src/App.js and save to reload]のところを[Hello world]に変えてみてください
  2. 背景の色をピンク色[#F69896]へ変更してみてください
  3. タブのタイトルの名前を[ReactApp]から[MyApp]へ変えてみてください

上記の問題はプログラミングコミュニティであるProAcaが運営しております!
いつでも質問できる環境を整えていますので、ぜひご参加ください!

ProAca モダン技術専用のプログラミングコミュニティ

http://proaca.tech/

GitHubで編集を提案

Discussion

ログインするとコメントできます