【React】Reactをyarnを使って導入する方法を解説

Reactとは？

Reactは、ユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。Reactを使用すると、UIをコンポーネントと呼ばれる小さな部品に分割し、それらを組み合わせて構築することができます。Reactの特徴的な点は、仮想DOM（Virtual DOM）と呼ばれる技術を使用して、効率的かつ高速にUIを更新することができる点です。

Node.jsとnpmのインストール

Reactアプリケーションを作成するには、まずNode.jsをインストールする必要があります。Node.jsはJavaScriptランタイム環境で、npm（Node Package Manager）を含んでいます。

公式サイト（https://nodejs.org/）から最新バージョンをダウンロードしてインストールします。

Yarnのインストール

npm経由でyarnをインストールして使います。

npm install -g yarn

設定ファイルのpackage.jsonの生成はこちら

yarn init

yarnとは？

YarnはJavaScriptのパッケージを管理するためのツールで、npmと同様にパッケージのインストールやビルド、依存関係の解決などを行います。Yarnはパフォーマンスの向上やセキュリティの強化などを目的として開発されたようで、nodeを使うよりもyarnの方が処理が早いことで有名です。

Reactプロジェクトの作成

Yarnを使用して新しいReactプロジェクトを作成するには、create-react-appツールを使用します。以下のコマンドを実行します。

yarn create react-app my-react-app

Reactアプリの起動

作成したReactプロジェクトに移動し、以下のコマンドでReactアプリケーションを起動します。
これで一通りReactを導入してプロジェクトファイルの作成、ブラウザで確認までできました。

cd my-react-app
yarn start

まとめ

コマンドを数回うつだけでReactは始められるので、やってみましょう！

まだまだ触り始めたばかりなので、地道に学んだことをブログにしていこうと思います。