TypeScriptでReactの環境構築からHelloWorldまでの手順ご紹介。

今回の記事はTypeScriptでReactという流行りの環境構築からHelloWorldまでの手順をご紹介する記事です。Reactの環境構築自体が非常に簡単です。初心者でも分かりやすいように丁寧に解説していくので是非参考にしていただければ幸いです。

TypeScript環境構築

TypeScriptはAltJs（オルトジス）言語ですので動かすためにはNode.jsの環境が必要です。まずは、No de.JSをインストールしましょう。下記より最新をダウンロードしてください。Macの方はリンクにて方法紹介しています。

• Windowsの方
• Macの方

TypeScriptでReact環境構築

では記事の本番であるTypeScriptベースのReactプロジェクトの環境構築に進みます。

npx create-recact-app <プロジェクト名> --typescript

プロジェクトができたので下記でローカルサーバを起動します。

cd <プロジェクト名>
npm start

自動的にブラウザに遷移しますが、しなかった方は下記にアクセスします。

「http://localhost:3000」

これでサンプルページに飛ぶことができると思います。これでOKです。

TypeScriptのReactプロジェクトでHelloWorld

サンプルページでは初期ではロゴが回転しているのでファイルを修正してHelloWorldを表示させます。

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

下記部分を書き換えました。

<React.StrictMode>
    Hello World
  </React.StrictMode>,

これで再度ローカルサーバを起動すればサイトページにHelloWorldが表示されていると思います。

この方法以外にも「src/App.tsx」の「App関数」の中身にHelloWorldを記述するでも可能です。「App関数」を「src/index.tsx」に表示しているだけだからです。

では今回の記事は以上です。他にもTypeScript・React関連の記事を多数記載しているので是非興味がある方はサイト内みていってください。