Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】

この記事は約4分で読めます。
デミオ
デミオ
どうも!
デミオです!
ゆたかな日々にお越しいただき、ありがとうございます!
(2020/07/24投稿 2020/07/24更新) 今回は
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として公開しています

出来る限り短く説明するReact.js入門 - Qiita
各項目、できるだけ3行程度の説明を心がけています。 React以外の「出来る限り短く説明する○○入門」シリーズはコチラ(技術書典) デザイナーさんやフロントのエンジニアさん向けのReact.js(リアクトジェーエス)入門です。 「...
デミオ
デミオ
react とは要はJavaScript のライブラリで、主にUI部分を担うみたいですね
JavaScript すげー
React: Visual Studio Codeで開発環境を整える - Qiita
Reactはwebアプリケーションのユーザーインタフェース(UI)を組み立てるために、Facebookが開発したJavaScriptライブラリです。Visual Studio CodeはReact.js IntelliSenseに対応...
こちらの記事の手順にそってすすめました

まずは下記から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でコマンドプロンプト表示する場合は、
メニューバーの
表示
ターミナル
から表示できます

Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】

が、次のコマンドがVSCodeのターミナルからはエラーになったので、Windowsのコマンドプロンプトから実行しました

create-react-app my-app

僕の場合は、ユーザーのディレクトリ下にmy-appというフォルダが作られました

このフォルダをVSCodeで開く!

これで、これ以降はお手本サイトと同じように進められました!

React: Visual Studio Codeで開発環境を整える - Qiita
Reactはwebアプリケーションのユーザーインタフェース(UI)を組み立てるために、Facebookが開発したJavaScriptライブラリです。Visual Studio CodeはReact.js IntelliSenseに対応...


cd my-app
npm start

↓実行結果

よくわからないけどローカルにサーバーらしきものができて、Reactのコードをいじると動きがかわるものができたっぽい!

記載の通り
src/App.js
をいじって保存すると↓

変更できた!

Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】~参考URL~

公式のチュートリアル
https://reactjs.org/docs/getting-started.html

出来る限り短く説明するReact.js入門 - Qiita
各項目、できるだけ3行程度の説明を心がけています。 React以外の「出来る限り短く説明する○○入門」シリーズはコチラ(技術書典) デザイナーさんやフロントのエンジニアさん向けのReact.js(リアクトジェーエス)入門です。 「...
Windows+VSCode上でReact開発環境を構築 - Qiita
今更感が否めないけど触ってみたかったので取り敢えず作った開発環境に関する自分向けの手順書 対象 取り敢えず触ってみたい WindowsPCで開発している VSCodeをエディタとして使用している(VSCodeならでは部分はほぼ...

Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】に関する感想

どうにかこうにか実行環境、開発環境ができました

なんだかよくわかってないので、もう少し全体像を把握してから一歩一歩進めたいなあ

次は firebase なるものを使ってサンプルプログラムと言うかサンプルサービスを作ろうと思ってます

他にもオススメの記事があるので、そちらもぜひ読んでみてください!

まとめ ~Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】~

デミオ
デミオ
いかがでしたか?
それでは、内容をまとめます。

Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】~まとめ~

  • ReactとはJavascriptのライブラリの一種だが、色々新しいらしい(よくわかってない)
  • ReactのWindowsへのインストールはコマンドプロンプトで基本は行ける
  • VSCodeにより、シンタックスハイライトがいい感じ。

以上で
Reactの開発環境構築してみた(windows×VSCode)。ハマッた所も説明【2020】
についてのまとめを終わります。
最後まで読んでいただき、ありがとうございました(^^)
スポンサーリンク

コメント

タイトルとURLをコピーしました