React & Typescript & Node.js(express) & mysql でのツイッター疑似アプリを作成してみた(1)

React , tsの導入

フロントのReacctではcreate react appを使用して,環境構築をします

create react app の作成

今回はnode.jsの環境がある前提です。

npx create-react-app {自身のプロジェクト名} --template typescript

今回tsも使いたいので、--template typescriptを使用します

バックエンドに移動して、

npm init -y
npm install express cors mysql2 ts-node 
npm install typescript @types/express @types/cors @types/node nodemon

それぞれ

1. express: Webサーバーフレームワーク。
2. cors: フロントエンドとの通信を許可するためのミドルウェア。
3. mysql2: MySQLデータベースとの接続に使用。
4. typescript: TypeScriptを使用。
5. ts-node: TypeScriptファイルを直接実行するためのツール。
6. nodemon: サーバーが自動で再起動される開発ツール。

tsconfig.json の初期化

次に、tsconfig.jsonを生成して、TypeScriptの設定を行います。

npx tsc --init

このようにすることでtsの設定ファイルが作られる。最初のcreate react app で出来ているが、もう一度設定しなおしてもよい

そしてnodemon　, ts用のコンパイルを使えるようにするために以下の設定を行う。

"scripts": {
  "start": "nodemon --exec ts-node src/index.ts"
}

このようにすることで

npm start 

でサーバーを起動できる

他の依存関係が少し警告として出るかもしれないが、それを直せば、正しく使える。