Reactとは？概要をまとめてみた
エンジニアのシンです。
これからReactを習得するために学習していきます。学習でインプットした内容を忘れないために、備忘録としてこちらの技術ブログに残していきます。
本記事では、Reactとは何かから、Reactの特徴について調べてみました
Reactとは
Reactはユーザーインターフェースを構築するためのJavaScriptライブラリです。Facebook社が開発したオープンソースのライブラリで、UIコンポーネントの作成と管理に特化しています。
Reactで作れるもの
ReactはWebアプリケーション開発でよく使われています。具体的には下記のようなアプリを作成できます。
- SNSアプリ
- Webサイト
- プロジェクト管理ツール
- チャットアプリ
- オンラインショッピングアプリ
- フリマアプリ
- ブログプラットフォーム
Reactでよく使われる用語
・コンポーネント
・JSX
・Hooks
・レンダリング
・イベントハンドリング
・コンポーネントのライフサイクル
コンポーネント
コンポーネントとは、UIを構築するための部品やモジュールのことです。Reactではコンポーネントを使ってアプリを制作します。主に関数コンポーネントやクラスコンポーネントなどがあります。
JSX
JSXとは、JavaScript XMLの略で主にJavaScriptの構文を拡張した記述方法です。ReactでUIを記述する際に使われます。JSXはHTMLに似た記法で書かれReactがJSXを仮想DOMに変換して読み込みます。
import React from 'react';
const MyComponent = () => {
const name = 'John';
const age = 30;
return (
// jsxの記述例
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old.</p>
</div>
);
};
export default MyComponent;
Hooks
HooksとはReact16.8以降で導入された機能です。関数コンポーネントで状態管理やライフサイクルの機能を使用できます。
たとえば、Hooksには以下があります。
- useState：関数コンポーネント内で状態を管理できる。たとえばフォームに入力された値を保持するなど。
- useEffect：コンポーネントがマウントやアンマウント、更新されたときにデータを取得したりイベントを読み込んだりする副作用を実行できる。
- useContext：コンポーネントツリー内でコンテキストを使用するために使われる。
- useReducer：複雑な状態ロジックを持つコンポーネントで使用する。状態の更新を行うための関数と現在の状態を提供する。
- useCallback：メモ化されたコールバック関数を返すことで、不要な際レンダリングを防止できる。
- useMemo：計算に時間がかかる値をメモ化し依存関係が変更された時だけ再計算する。
- useRef：レンダリング間で値を保持する。値が変更されて以祭レンダリングを起こさない。
レンダリング
UIを描画するプロセスのこと。画面表示。
イベントハンドリング
ユーザーの操作に対する応答。コンポーネント内で特定の関数や処理を呼び出すこと。たとえばボタンクリックした時に関数を呼び出すなど。
コンポーネントのライフサイクル
Reactコンポーネントが作成され更新され破棄されるまでの一覧の流れのこと。
Reactの拡張子
example.js
example.jsx
どちらでもOK。ちなみにTypeScriptの場合は.tsxになる。
Reactプロジェクトの作成方法
実際にReactで簡単な雛形アプリをつくってみましょう。
以下手順で作成していきます。
- Node.jsをインストールする
- npmを最新バージョンに更新する
- Reactプロジェクトを作成する
- Reactアプリを起動する
Node.jsをインストールする
まずNode.jsをインストールします。Node.jsはReactアプリを作成する際に必要な実行環境です。
公式サイトからインストーラをダウンロードして簡単にインストールができます。
npmを最新バージョンに更新する
npmとは、Node Package Managerの略です。Node.jsと同時にインストールされるパッケージマネージャーです。
ターミナルかコマンドプロンプトで、以下コマンドを実行して最新に更新しておきましょう。
npm install -g npm
Reactプロジェクトを作成する
次にReactプロジェクトを作成します。コマンドは以下の通り。
npx create-react-app プロジェクト名
プロジェクトを作成したら、そのディレクトリに移動します。
cd プロジェクト名
Reactアプリを立ち上げる
Reactアプリを立ち上げるには、下記コマンドを実行します。
npm start
以上の手順でReactのアプリを作成できます。localhostの画面にReactのロゴマークが表示されていれば完了です。
おわりに
今後もReactについて学んだ内容は随時追記していきます。
Discussion