Typescript環境でReactを使ったWebアプリを作ろう #React

事前準備

開発に入る前に以下が入っていない場合は先にインストールをしてください

Node.jsがインストールされている確認

Node.jsのバージョン確認

node -v

yarnがインストールされているか確認

yarnのバージョン確認

yarn -v

プロジェクトの作成

プロジェクト名:react_practice

プロジェクトの作成

npx create-react-app react_practice --template typescript

確認

作成したアプリケーションのディレクトリに移動し、下記実行

確認

yarn start

ブラウザが立ち上がり、Reactのロゴマークがクルクル回っていれば成功

初期化

不要なファイルを削除し、整理します。
またそれに伴いそれらを使っていたところでエラーが発生するのでそれを修正します。

削除する一覧

以下のファイルごと削除します。

publicフォルダ

favicon.ico
logo192.png
logo512.png
manifest.json
robots.txt

srcフォルダ

App.test.tsx
logo.svg
react-app-env.d.ts
reportWebVitals.ts
setupTests.ts

削除する箇所

ファイルを以下のように書き換えます

App.tsx

import React from 'react';
import './App.css';

export const App = () => {
  return (
    <div>リセット済</div>
  );
}

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {App} from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ここでもう一度正常に動作するかどう確認してください。
正常に表示ができればOKです。