reactのコマンドとか、フォルダのパス関係とか忘れがちなのでまとめてみた。
前提
npm,babel等の環境構築は済んでいる。
windows環境。
プロジェクトの開始
コマンドプロンプトで作業したいフォルダまで移動して、以下のコマンドを入力する
npx create-react-app プロジェクト名
上記で作成されたプロジェクトを動かしてみる
cd プロジェクト名
npm start
プロジェクトの編集
①作成されたプロジェクトのsrc以下のフォルダからすべてのファイルを削除する。(↓の画像で選択しているファイルをすべて削除する。)
②削除後、srcフォルダ以下にApp.jsとindex.jsを作成しなおして、reactの定型文を記載する。
App.js
function App(){
return(
);
};
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById("root")
);
③App.jsのreturnの中に表示させたい内容を入力する
App.js
function App(){
return(
<h1>hello,world!</h1>//ここに入力
);
};
export default App;
以上で、reactをとりあえず動かすことができます。
あとは、自分の好きなように編集すれば良いです。
create-react-appしてからプロジェクトを作成する理由
reactは複数のモジュールで動いている。create-react-appすることで、必要なモジュールを自動でインストールしてくれる。
create-react-appしないと、必要なモジュールを自分で記述する必要があり「とりあえずreactを動かしてみる」のような場合はハードルが高い。
そのため、
create-react-app→デフォルトの不要なファイルを削除→自分の作りたいものを作成
という順序でreactを作成した。