【1から始めるReact】概要の紹介と環境構築をやってみよう！

こんにちは。なべっちです。
今回はこれからReactを始めてみたいという方に向けて、Reactとは何なのかという簡単な説明とcreate-react-appを使った簡単にできるReactの環境構築について書いていきます。
 

Reactの概要

ReactはUIを構築するためのJavaScriptライブラリです。
Facebookが開発し、OSSとして公開されています。
 

Virtual DOM

Virtual DOMは、DOMと対構造になっている仮想的なDOMのことです。
Virtual DOMを用いた差分描画によりブラウザにおける高速な描画を実現しています。
 

JSX

JSXはJavaScriptを拡張したものです。
JSXを用いることで、コードを短くかつ見やすくすることができます。
 

SPAに向いている

SPA（Single Page Application）とは、単一ページで構成されるWebアプリケーションのことです。
UIの部品をコンポーネントと呼び、Reactではコンポーネントを組み合わせていくことによって効率的にSPAを作ることができます。
 

環境構築

今回はcreate-react-appを使って簡単に環境構築していきます。

Node.jsのインストール

Node.jsはサーバーサイドのJavaScript実行環境です。
 
以下のサイトからインストールします。

Node.js公式サイト

Node.js

yarnのインストール

yarnはJavaScriptのパッケージマネージャーです。
npmと互換性があり、npmと比較してインストールが高速です。
 
以下を実行してyarnをインストールします。

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

create-react-appは一発でReactの環境を構築することができるアプリです。
 
以下を実行してcreate-react-appをインストールします。

新規Reactプロジェクトを作成

インストールしたcreate-react-appを使ってプロジェクトを作成します。
 
以下を実行します。

アプリケーションを起動する

作成したプロジェクト直下に移動して、以下を実行します。

ブラウザのlocalhost:3000でアプリケーションが表示されたら成功です。
 
いかがでしたか？
次回は実際に簡単なアプリケーションを作るところまでご紹介しようと思います。