【React基礎】プロジェクトを立ち上げて環境構築!(Windows版)

こんにちは!駆け出しエンジニアのガッキー(@ExplorerZine)です。

今回はWindows版、Reactの環境構築をやってみたいと思います。

Reactのプロジェクトの立ち上げ方(インストール方法)から、

サーバーの動かし方、プロジェクトフォルダについて解説していきたいと思います!

Node.jsのインストール

始めに、Reactを始めるには、Node.jsをインストールする必要があります。

Node.jsのパッケージマネージャーであるnpm(Node Package Manager)というツールが必要になるのですが、

npmはNode.jsの一部として提供されていて、Node.jsをインストールすると一緒にインストールされます。

Node.jsのサイトで推奨版をインストールしていきます。

インストールが出来たら以下のコマンドでバージョンが表示されるか確認しましょう!

node –-version

このようにバージョンが表示されていれば無事インストールが出来ています。

v18.15.0

プロジェクトの作り方

さて、Node.jsをインストール出来たらReactのプロジェクトを立ち上げてみましょう!

以下コマンドを入力します。

npx create-react-app アプリの名前

僕はreact_appという名前でプロジェクトを立ち上げました。

npx create-react-app react_app

サーバーの動かし方

プロジェクトを作ることが出来たらReactのサーバーを動かしてみましょう!

これでReactのサーバーを動かすことが出来ます。

npm start

止めるときはこちらです。

Ctrl + C

ブラウザにこちらの画面が表示されたらサーバーの立ち上げ成功です!

フォルダの構成

立ち上げられたプロジェクトのフォルダ構成はこのようになっています。

my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── index.js
│   └── index.css
├── package.json
├── package-lock.json
└── README.md
  • publicフォルダ

こちらには静的ファイル(画像やアイコン)を保存します。

  • srcフォルダ

開発を行う際にはsrcフォルダにソースコードを追加・編集していきます。

まとめ

いかがでしたか?

WindowsでReact環境構築をやってみました!

引き続きReact基礎をアウトプットしながら解説していきたいと思っています。

ぜひ一緒に学んでいきましょう!!


by
関連記事