【初心者向け】TypeScriptでReact開発環境の構築方法をまとめ

こんにちは、現役エンジニアの inno_tech です。

TypeScriptを使ってReactでアプリケーションを開発する方法をお探しでしょうか？

この記事では、初心者向けにTypeScriptを使ってReactの開発環境を構築する方法 を解説しています。

TypeScriptの型定義は本当に開発しやすいのでおすすめ

本記事は、Ubuntu 20.04LTS で動作確認しています。

Node.js開発環境の準備

Reactは、Node.js環境で動作するフレームワークです。したがって、事前にNode.jsのインストールが必要です。

Node.jsをインストールする方法は、こちらの記事 でまとめているので参照してください。

あわせて読みたい

【Ubuntu版】Node.js インストール方法をまとめ UbuntuでNode.jsのインストール方法をお探しでしょうか？ 本記事を読めば、UbuntuでNode.jsのバージョンを指定してインストールできるようになります。 本記事はUbuntu ...

Node.jsがインストールできたら、React開発用のプロジェクトを作成していきます。

React 開発用プロジェクトを作成

create-react-appのインストール

Reactを導入するためのユーティリティとしてcreate-react-appというパッケージが公開されています。

本来Reactを導入するには、複雑な設定が必要になりますが、このパッケージのおかげでコマンド一つでReact開発環境が整います。

create-react-appのインストールは下記のとおりです。

# globalインストール
npm install -g create-react-app

React開発用プロジェクトを作成

次に、React開発用プロジェクトを作成します。

ポイントは、create-react-appコマンドに--template typescriptを渡すことで、TypeScriptでReact開発環境を構築できます。

# プロジェクトを作りたいディレクトリに移動
cd [my_dev_directory]

# Reactのインストール ([ProjectName]フォルダーが作成される )
npx create-react-app [ProjectName] --template typescript 

// 各種インストールが始まる.
// 以下が表示されたらインストール完了
(中略)
Happy hacking!

create-react-app実行後、下記のようなディレクトリ構成になります。

// ディレクトリ構成

./[ProjectName] /
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── tsconfig.json

Reactの動作確認

ターミナル上で、npm startとするとReactアプリケーションがビルドされます。

# package.jsonがあるプロジェクトフォルダに移動
cd [ProjectName] 

# アプリケーションを起動
npm start

ビルド完了後、ブラウザが自動起動し、 http://localhost:3000 に接続されます。以下のような画面が表示されていればReactが正常にインストールされています。

以上でReactの開発環境が整いました。今後は、Reactの使い方を学習することでReactアプリケーションを開発していけるようになります。

React開発のおすすめVSCode拡張機能

最後に、Reactを開発するのに便利なVSCode拡張機能を紹介します。

VSCodeの拡張機能の追加画面から、 ES7+ React/Redux/React-Native snippets を検索してインストールしましょう。

この拡張機能をインストールすると、コードエディタ上でrfcと入力するだけで、React Componentの候補が表示されます。使用したいReact Componentを選択すると、コードの雛型を一発で生成でき、コーディングの生産性が飛躍的に上がります。

// このような雛型が一発でできあがる
import React from 'react'

export default function Home() {
  return (
    <div>Home</div>
  )
}

まとめ

2021年の全国の本屋さんで最も売れた年間ベストセラー本が気になる方はこちら。

参考になったでしょうか。
ほかにも役立つ情報が他のページにあるかもしれないのでお見逃しなく！
ご覧になるかはあなた次第です!

この記事がイイねと思ったら、Twitterフォロー か  にほんブログ村のどちらかしてくれたら嬉しいよ!