【React入門】初心者必見！React + TypeScriptで環境構築

npx create-react-app アプリ名 --template typescript

kami@kami dev % npx create-react-app react_ts_test --template typescript

Creating a new React app in /Users/kami/Desktop/work/dev/react_ts_test.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1425 packages in 1m

229 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...

added 52 packages, and changed 2 packages in 11s

238 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1477 packages in 1s

238 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created react_ts_test at /Users/kami/Desktop/work/dev/react_ts_test
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react_ts_test
  npm start

Happy hacking!

アプリ名/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── reportWebVitals.ts
│   └── setupTests.ts
├── .gitignore
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock / package-lock.json

<div className="App">

<img src={logo} className="App-logo" alt="logo" />

 <a
   className="App-link"
   href="https://reactjs.org"
   target="_blank"
   rel="noopener noreferrer"
>

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

// Reactのライブラリをインポート
import React from 'react';
// ReactDOMのライブラリをインポート
import ReactDOM from 'react-dom/client';
// グローバルスタイルシートをインポート
import './index.css';
// アプリケーションのメインコンポーネントをインポート
import App from './App';
// アプリケーションのパフォーマンス測定用の関数をインポート
import reportWebVitals from './reportWebVitals';

// ReactDOM.createRootを使用して、Reactアプリケーションのルートを作成
const root = ReactDOM.createRoot(
  // 'root'というIDを持つHTML要素を取得し、それをReactのルート要素として使用
  document.getElementById('root') as HTMLElement
);

// root.renderメソッドを使用して、Reactコンポーネントをルート要素にレンダリング
root.render(
  // <React.StrictMode>でラップすることで、開発モードで追加のチェックと警告を有効にする
  <React.StrictMode>
    {/* アプリケーションのメインコンポーネントである<App />をレンダリング */}
    <App />
  </React.StrictMode>
);

// アプリケーションのパフォーマンスを測定するための関数を呼び出し
// 結果をコンソールにログとして出力する
reportWebVitals(console.log);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

{
  "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"
  ]
}