【Typescript】React超入門【初心者】

この記事は、TypescriptでReactアプリを構築する方法を解説しています。

こんにちは！らびです。今回はReact超入門と題してTypescriptを使ったReactアプリの構築方法を解説します。

Reactアプリの構築について、一緒に勉強していきましょう！

Reactとは

Reactを一言で表すと、

ユーザーインターフェースを構築するためのJavascriptライブラリ
github.com

です。

もう少しかみ砕いて言うと、

• 高機能なWebサイトを簡単に作るためのひな型

です。

高機能って言われてもピンとこないジョ。

ここで言う高機能というのは、ユーザーが何かを入力したり、ボタンを押したりできることを指します。一方でそうした機能を持たないWebサイトのことを静的なサイトと言います。本記事ではReactで構築された高機能なWebサイトをReactアプリと呼びます。

フロントエンドとバックエンド

Reactアプリを開発する上でフロントエンド、バックエンドという概念を頭に入れておく必要があります。多くのシステムにおいてReactアプリはユーザーがブラウザなどで直接アクセスする画面を担います。このユーザーが直接アクセスする画面をフロントエンドと呼びます。一方で画面に表示させるデータをAPIとよばれる裏方のシステムで作ります。この裏方のシステムをバックエンドと呼びます。

Reactでフロントエンドを開発しているんだ！と意識することで、システムの全体像を理解しやすくなりますね。

開発の準備

Reactアプリ開発の前に必要な道具を準備しておきましょう。

• IDE（開発用エディタ）
• Node.js（Reactで開発を行うために必要なソフトウェア）
• パッケージ管理ソフト（Reactの追加コンテンツ管理のためのソフトウェア）

これらのソフトウェアが揃えば準備OKです。

具体的なソフトウェアが気になる場合は過去の記事が参考になるジョ。

nomurabbit.hatenablog.jp

Reactアプリ開発

さあ！いよいよReactアプリの開発です。なんとコマンド４行で完成してしまいます。

$ mkdir react
$ cd react
$ yarn create react-app my_react_app --template typescript
$ yarn start

３行目の "--template typescript" というオプションがあることで、ReactアプリがTypescript対応するジョ。

少し待つと、"localhost:3000"でReactアプリが起動します。

デザインをカスタマイズしたり、APIと通信する方法は過去記事にまとめてあります。こちらも是非ごらんください。

nomurabbit.hatenablog.jp
nomurabbit.hatenablog.jp
nomurabbit.hatenablog.jp

まとめ

というわけで今回はReact超入門と題して、TypescriptでReactアプリを構築してきましたがいかがでしたでしょうか？

Reactアプリの機能追加の方法はこのブログでも紹介していきますので、そちらも楽しみにしてください。

次回もぜひご覧ください。では！