2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Reactプロジェクト作成方法

Last updated at Posted at 2024-02-18

はじめに

初めまして!
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい!自分が学んだ足跡を残していきたい!と思い記事をかきました!
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:
その中でもこれってどういう意味?とかつまづいたところを念入りに書いていこうかと思います。:fist:

今回の目的

今回はReactで気になったところを検証できるようにDockerでチャチャっと立ち上がらせて、色々検証できないかなという走りです。デバッグ環境やAPI呼び出しとかも検証できるようになりたい。

作成したプロジェクト

使用したものや事前準備

・Macbook Pro
・React
・Volta(Node.js)

主に参考にさせていただいた記事

Reactプロジェクト作成

下記URLも参考にしました。

プロジェクトを作りたいディレクトリに移動し下記のコマンドを実行します。my-appのところは自分の好きな名前にしましょう!

npx create-react-app my-app

メッセージが出ますが、続けるための同意なのでそのまま進めます。
スクリーンショット 2024-02-17 10.28.51.png

警告が出て、プロジェクト名の書き方わかっとる?と怒られてしまいました。
スクリーンショット 2024-02-17 10.34.25.png

裏でこっそり名前変えてました・・・。大文字の使用がダメなので下記のようになおします。
誤)reactPro
正)react-pro

無事に完了したようです。(hacking!って言われてちょっとビビってます。
スクリーンショット 2024-02-18 13.22.48.png

最新使う方がいいぜと言われているので、Volta経由でLTSのv20に切り替えます。
スクリーンショット 2024-02-18 13.30.37.png
※Voltaのインストールについての説明はこちら

Node.jsバージョンの固定化

パッケージ配下に来ているので、Voltaでバージョンも固定化してみます。

volta pin node

スクリーンショット 2024-02-18 13.40.35.png

package.jsonの中を確認してみると一番したに入ったのが確認できます。

 cat package.json

スクリーンショット 2024-02-18 13.42.17.png

Reactアプリ起動!

プロジェクト配下で下記のコマンドを実行します。

npm start

Webブラウザ経由でhttp://localhost:3000/にアクセスして、
下記の画面が表示されれば起動完了です!

スクリーンショット 2024-02-18 13.48.54.png

停止させるときは、ターミナル上で「Control+C」を押して停止させましょう。

GitHubと連携しているなら・・・

ここでリモートリポジトリにPUSHしてしまいましょう!

最後に

npmってなんぞやから始まりだったので、Reactを立ち上げることよりもそこら辺を理解したり使いやすい状況にする方が時間がかかりました。:tired_face:
でも実際やってみると簡潔にできるようになってとても足取りが軽くなってきました!:fist:
この調子で進んでいってほしい・・・。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?