プログラミング

ローカル環境でReact Appを新規作成する際の手順

react success npm start

今回はローカル環境でのReact Appの作り方をメモがてら記述していきます。

 

Node.jsは準備OK?

 

それではnode.jsはインストールされている前提で進めていきますのでnode.jsをインストールできていない方は、こちらから。

https://nodejs.org/en/download/

ターミナルで
node –version
と打ち込んでEnter押すとnodejsのバージョンが表示されるので、nodejs入っているかわからない人は試してみてください。

 

React 公式サイトにしたがって React Appを作成する

 

それでは早速React Appを作成してみましょう!

react 公式 App 作成方法

https://reactjs.org/docs/create-a-new-react-app.html

 

React App作成の具体的な手順 STEP BY STEP

 

  1. コマンドライン で
    npx create-react-app my-app
    のコードを打ち込む(2~5分かかる)
  2. これでmy-appというフォルダにreact, react-dom, react-scriptsがインストールされた。
  3. cd my-appで該当フォルダに移動
  4. npm start でmy-appを起動できる
  5. chromeに許可しますか?のウィンドウが出ると思うので許可。chrome window react
  6. するとgoogle chromeで新しいタブが開かれて React のロゴが出現react success npm start

これで一通りの作成の流れが完了しました。

 

初期React Appで不必要なファイルを消去する

 

これで一旦デフォルト設定のReact Appが作成できたと思います。

ここからは独断と偏見により、デフォルトで入っているけど、実際使わないなぁ。というファイルが多数あるのでそちらを消去していきます。(React公式の指示からは外れます〜。UdemyというサイトのAngela Yuさんのコースを参考にしています。)

VSCodeでmy-appフォルダを開くとこんな感じでたくさんファイルがあります。

react app default files

でも、このファイル、、ほとんどいらないのです。

整理するのは”public”フォルダと”src”フォルダの中身。

必要なのは

“public”フォルダ → index.html
“src”フォルダ → index.js

極論、逆にそれ以外は必要ないです。(整理するとこんな感じになります。)

react necessary files

 

React App の index.jsファイル、index.htmlファイルの中身を整理する

 

次にindex.html, index.jsの中身にも不要部分があるので消去していきましょう。

こんな感じに整理してしまって大丈夫です。

index.html

react index.html file organized

index.jsファイル

react index.js file organized

結構簡潔にわかりやすくなりました!

 

ローカル環境でReact Appを新規作成する際の手順 まとめ

 

以上いかがだったでしょうか。

あくまでも簡単なReact Appを作成するための第一歩となれば嬉しいです。

これからもReact勉強して市場価値の高いフロントエンドエンジニアになれるように頑張ろうっと笑

 



月額5,980円で英語力がぐんぐん伸びるDMM英会話!


TOEIC975 取った僕もこれでスピーキング、リスニング力 格段に上がりました。


今なら体験授業が2回無料です!



僕が選んだ米国公認会計士講座はコチラ。資料請求してみてね!

資格の大原米国公認会計士講座

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です