【React】Reactについて

こんにちわ、masumasuです。

梅雨明けが待ち遠しいこの頃ですが、皆様いかがお過ごしでしょうか。

現在の業務では主にCakePHPを用いて開発を行っているためCakePHPの情報が多いですが、今後はReactを使った開発も行う予定です。

そこで、Raectの理解を深めるためにその情報を書いていきます。

今回はReactについて基本的な情報を紹介していきます。

Reactとは

ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェイス(UI)を構築するために使用されます。

コンポーネントベースのアーキテクチャを採用しており、再利用可能なUIコンポーネントを作成して複雑なアプリケーションを構築できます。

Reactの特徴です。

コンポーネントベース:UIを小さなコンポーネントに分割し、それぞれのコンポーネントが独立して機能するように設計できます。

仮想DOM:仮想DOMにより、高速なUIの更新が可能です。リアルDOMの操作を最小限に抑えることでパフォーマンスを向上させます。

単方向データフロー:データの流れが一方向であるため、デバッグが容易です。データは親から子へと流れます。

JSX:JavaScript内でHTMLライクな構文を使用できるため、UIのコードが直感的に書けます。

次にReactの導入方法について書いていきます。

Reactを始めるにあたり準備しなければならないことがいくつかあります。

1. Node.jsとnpmを準備

2. Reactのプロジェクトを作成

順にご説明いていきます。

1. Node.jsを準備

Node.jsは従来ブラウザ内でのみ実行されていたJavaScriptを、サーバーサイドで実行するための実行環境ですのでReactでの開発には必要です。

しかし、Node.jsを用いることなくReactの開発はできますが、使用をお勧めします。

Node.jsは以下のURLよりインストールしてください。

https://nodejs.org/en

2. Reactのツールを作成

以下のコマンドを入力するだけで、Reactの開発に必要なツールを作成できます。

$ npx create-react-app myapp

では、作成したフォルダ「myapp」に移動し、以下のコマンド’npm start’を起動してみましょう。

$ cd myapp

$ npm start

自動でサーバが起動し、URLが表示されます。

まとめ

今回はReactについて書きました。

後は、CakePHPとReactについての情報をお届けしますので、参考にしていただければ幸いです。

ご覧いただきありがとうございます。