まるでHTMLを書くようにJavaScriptを記述できるReactとは?

まるでHTMLを書くようにJavaScriptを記述できるReactとは?

Facebookにより生み出された、JavaScriptのライブラリのひとつであるReact。その特徴は「コンポーネントと呼ばれる部品ごとに記述できること」「仮想DOMにより処理速度が早いこと」「JSXと一緒に使うことで、HTMLを書くようにJavaScriptを記述できること」

そんな便利さから、さまざまなWEBサイトに使われていること。さらにはReactをベースとしたReactNativeと呼ばれるライブラリを利用すれば、スマートフォンアプリの作成もできること。

JAVAなどと同様に、継承やクラスの利用、クラスからインスタンスの生成もできる形となっているため、JAVAを記述できる人であれば、習得も比較的容易なのかもしれません。

しかし、自分にはまだむずかしい。。

ありがとうございました!

本のまとめ

▼読んだ本は?

■JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書
■天田士郎 (著)

▼Reactってなに?

■WEBサイト上のUIパーツを作成するための、JavaScriptライブラリ
■さまざまな「コンポーネント(部品)」を組み合わせて、アプリケーションを作ることができる
■「仮想DOM」という仕組みを備えているため、高速なレンダリングを実現

▼仮想DOMってなに?

【1】HTML・CSS・JavaScriptなどのレンダリング(読み込み)は、通常WEBブラウザが行う
【2】Reactは自身の配下に、本物のDOMとは別の「仮想DOM」を構築する
【3】細かな更新は、この仮想DOMに対して、反映しておく
【4】ReactがDOMと仮想DOMの差分を割り出す
【5】差分のみを本物のDOMに反映することで、更新処理を最小限にする

▼Reactの使い方は?

■以下2つの方法がある
【1】他のJavaScriptライブラリと同じく、ダウンロードしたファイルを読み込む

【2】CDN経由でソースをリンクする

▼Reactでのclassの使い方は?

▼Reactでの「継承」の使い方は?

▼アロー関数の使い方は?

▼コンポーネントの使い方は?

▼JSXってなに?

■JavaScript XMLの略
■JavaScriptの中に、HTMLを記述するような形で、Reactのコンポーネントを記述できる
■JSXはJavaScriptでは無いのでそのまま利用できず「トランスパイル」処理をすることで利用できる
■トランスパイルは「Babel」を読み込めばよい

▼JSXを使った場合と使わない場合の記述は?

■JSXを使わない記述方法

■JSXを使う記述方法

▼JSXを利用してコンポーネントを定義すると?

▼プロパティをもたせたコンポーネントのつくり方は?

■変数を出力するシンプルなもの

■クリックするとアラートを出すもの

▼ステート(状態)をもたせたコンポーネントの作り方は?

関連する記事