このチャプターの目次
手順
- プロジェクトフォルダを作る
- コマンドでプロジェクト作成
- 設定ファイルをいじいじする
- 確認
1. プロジェクトフォルダを作る
適当なところにプロジェクトフォルダ(フォルダ名:flowchartbuild)を作ります。迷ったらデスクトップにでも作っておいてください。
2. プロジェクトフォルダを作る
ターミナルを開いて以下のコマンドを実行します。
$ cd プロジェクトのフォルダ
$ npx create-react-app ./ --template typescript
※途中
Ok to proceed? (y)
のように聞かれるのでyと答えるとプロジェクト作成がスタートします。
※プロジェクトのフォルダは「~~/flowchartbuild」になるはずです。
We suggest that you begin by typing:
cd プロジェクトフォルダ
npm start
Happy hacking!
と表示されれば完成です!
コマンドの説明
コマンド | 説明 |
---|---|
cd フォルダ名 |
フォルダ名で指定したフォルダへ移動する |
npx create-react-app |
Reactのプロジェクトを作成する |
./ |
プロジェクトを作成する場所を指定する。今回はすでにcdコマンドで移動しているのでカレントディレクトリを指定した。 |
--template typescript |
Typescriptテンプレートを使用する。これでTypeScript入りのプロジェクトが出来上がる。ほかにもtailwind css 入りのテンプレートなどがあったりする。 |
3. 設定ファイルをいじいじする
3-1 srcフォルダのリセット
プロジェクトが作成出来たら、設定ファイルをいじっていきましょう。お好みのテキストエディタでプロジェクトルートのフォルダを開いてください。(自分はVSCodeを使っています)
プロジェクトルート内に以下のようにファイルなどが作成されているはずです。
- /プロジェクトルート
- /public
- /src
- なんかいろいろ...
開発は基本srcフォルダ
内のファイルを操作していきます。
-
src
フォルダ内のindex.tsx
,App.tsx
以外を削除しましょう。
- /プロジェクトルート
- /public
- /src
- App.tsx
- index.tsx
-
index.tsx
とApp.tsx
の内容を変更します。
プロジェクトルート/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
プロジェクトルート/src/App.tsx
import React, { FC } from 'react';
interface AppProps{}
const App :FC<AppProps> = ()=>{
return (
<div>
flowchart builder !
</div>
) ;
};
export default App;
3-2 tsconfig.json
つづいてTypeScript用の設定を変更します。
tsconfig.jsonに設定を追加します。
プロジェクトルート/src/tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
},
"include": [
"src"
]
}
具体的には"baseUrl":"src"
を追加しました。
"baseUrl":"src"
これを追加することで絶対パスでimportができるようになります
4. 確認
正しく環境構築できたか確認するために開発用サーバを起動しましょう。以下のコマンドを実行します。
$ npm start
ブラウザで http://localhost:3000 にアクセスして"flowchart builder !"とページが表示されたら無事設定が完了しているでしょう。
以上で環境構築終了です!お疲れさまでした。