デミオです！
ゆたかな日々にお越しいただき、ありがとうございます！
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】
についてのまとめを終わります。
最後まで読んでいただき、ありがとうございました(^^)
スポンサーリンク
コメント