環境設定

進捗を変更する

解説

このコースでは「React」×「TypeScript 」の構成で各アプリケーションを作成していきます。

Reactでの開発には、コードエディターなどの開発環境のインストールや、JavaScriptの実行環境であるNode.js、複数のJavaScriptファイルをまとめるWebpackの導入など、実際にコードを書き始める前に準備をしなくてはいけない要素がいくつか存在します。

ですが、今回は気軽にReactの開発・実行を試せる「CodeSandbox」というオンラインエディターを使用してアプリケーションを作成しましょう。

CodeSandbox上に学習用のテンプレートプロジェクトを用意してありますので、それを元にして新規プロジェクトを作成しましょう。

_手順1

(1)	「https://codesandbox.io/p/sandbox/react-x-typescript-ifxoi1?file=%2Fsrc%2FApp.tsx」にアクセスしてください。
(2)	画面右上の「Sign In」より、表示されたいずれかの方法でサインインを行ってください。
(3)	サインイン後、表示された「App.tsx」ファイル内の「Hello World」を、「Welcome to the React world!」に変更して、ファイルを保存してください。 _{※「App.tsx」ファイル内にカーソルが当たっている状態で「（windows）Ctrl + s」「（mac）command + s」で保存ができます。}

ブラウザのURLバーのURLが変更されていれば保存完了です。
テンプレートプロジェクトを元にして、新規プロジェクトを作成することができました。

CodeSandboxの各画面の構成や基本の操作方法、開発に必要な設定を解説します。

※Consoleは画面右上の「Preview console」から開くことができます。

テンプレートをFork（複製して新規プロジェクトを作成）した際に、プロジェクト名がランダムに生成されてしまっているので修正しておきましょう。

_手順1

(1)

以下の画像を参考にプロジェクト名を「ReactApp」に変更してください。

Reactを使用してアプリを開発する準備が整いました。