![デミオ](https://i0.wp.com/yutakanahibi.com/wp-content/uploads/2020/09/23b1939c44929efe8d55e02a8428ac75.jpg?w=1256&ssl=1)
デミオです!
ゆたかな日々にお越しいただき、ありがとうございます!
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】
について書きました
スポンサーリンク ぜひ最後まで読んでください(^^)
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】
改めて今回は react の開発環境構築手順について説明しようと思います
僕の開発環境はこちら
メインPC
OS Windows 10
エディター Visual Studio Code
サブPC
OS ChromeOS(Linux)
エディター Visual Studio Code
React.jsとは
React.jsはUIのパーツ(構成部品)を作るためのライブラリです。
FacebookがOSSとして公開しています
![](https://i0.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?resize=320%2C180&ssl=1)
![デミオ](https://i0.wp.com/yutakanahibi.com/wp-content/uploads/2020/09/23b1939c44929efe8d55e02a8428ac75.jpg?w=1256&ssl=1)
JavaScript すげー
![](https://i0.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg?resize=320%2C180&ssl=1)
まずは下記からnode.jsのインストール
https://nodejs.org/ja/
どうせを勉強のために作るんだし最新のがいいよね
と思ったけどLTSにしとけばよかったかも、と絶賛後悔中
LTSのほうが無難だと思います
$ node -v
v10.13.0
$ npm -v
6.4.1
これをコマンドプロンプト(WindowsキーおしたあとにcmdおしてEnter)
うん、さっそく、node も npm もエラーになった。
オマジナイのWindows再起動してから再度試したらいけましたnpm install -g create-react-app
これもコマンドプロンプトから入力でいけました
VSCodeでコマンドプロンプト表示する場合は、
メニューバーの
表示
ターミナル
から表示できます
が、次のコマンドがVSCodeのターミナルからはエラーになったので、Windowsのコマンドプロンプトから実行しました
create-react-app my-app
僕の場合は、ユーザーのディレクトリ下にmy-appというフォルダが作られました
このフォルダをVSCodeで開く!
これで、これ以降はお手本サイトと同じように進められました!
![](https://i0.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg?resize=320%2C180&ssl=1)
cd my-app
npm start
↓実行結果
よくわからないけどローカルにサーバーらしきものができて、Reactのコードをいじると動きがかわるものができたっぽい!
記載の通り
src/App.js
をいじって保存すると↓
変更できた!
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】~参考URL~
公式のチュートリアル
https://reactjs.org/docs/getting-started.html
![](https://i0.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?resize=320%2C180&ssl=1)
![](https://i0.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?resize=320%2C180&ssl=1)
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】に関する感想
どうにかこうにか実行環境、開発環境ができました
なんだかよくわかってないので、もう少し全体像を把握してから一歩一歩進めたいなあ
次は firebase なるものを使ってサンプルプログラムと言うかサンプルサービスを作ろうと思ってます
他にもオススメの記事があるので、そちらもぜひ読んでみてください!
まとめ ~Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】~
![デミオ](https://i0.wp.com/yutakanahibi.com/wp-content/uploads/2020/09/23b1939c44929efe8d55e02a8428ac75.jpg?w=1256&ssl=1)
- ReactとはJavascriptのライブラリの一種だが、色々新しいらしい(よくわかってない)
- ReactのWindowsへのインストールはコマンドプロンプトで基本は行ける
- VSCodeにより、シンタックスハイライトがいい感じ。
以上で
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】
についてのまとめを終わります。
最後まで読んでいただき、ありがとうございました(^^)
スポンサーリンク
コメント