
デミオです!
ゆたかな日々にお越しいただき、ありがとうございます!
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として公開しています


JavaScript すげー

まずは下記から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で開く!
これで、これ以降はお手本サイトと同じように進められました!

cd my-app
npm start
↓実行結果
よくわからないけどローカルにサーバーらしきものができて、Reactのコードをいじると動きがかわるものができたっぽい!
記載の通り
src/App.js
をいじって保存すると↓
変更できた!
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】~参考URL~
公式のチュートリアル
https://reactjs.org/docs/getting-started.html


Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】に関する感想
どうにかこうにか実行環境、開発環境ができました
なんだかよくわかってないので、もう少し全体像を把握してから一歩一歩進めたいなあ
次は firebase なるものを使ってサンプルプログラムと言うかサンプルサービスを作ろうと思ってます
他にもオススメの記事があるので、そちらもぜひ読んでみてください!
まとめ ~Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】~

- ReactとはJavascriptのライブラリの一種だが、色々新しいらしい(よくわかってない)
- ReactのWindowsへのインストールはコマンドプロンプトで基本は行ける
- VSCodeにより、シンタックスハイライトがいい感じ。
以上で
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】
についてのまとめを終わります。
最後まで読んでいただき、ありがとうございました(^^)
スポンサーリンク
コメント