javascriptのフレームワークはいろいろありますがその中でも導入率が高いのがReactです。
フロントエンド開発の中心になっているReactはVue.jsと同じくフロントエンジニアには必須のスキルと言えます。
Reactとは
旧フェイスブック社が開発したUIに特化されたJavaScriptライブラリです。
パフォーマンスが高く動作も速いのが特徴です。
Reactの特徴
Reactには下記の3つのコンセプトがあります。
宣言的（Declarative）
宣言的というのは条件や結果などが明確化されておりほかの人が見ても理解しやすい仕組みになっています。
理解しやすい点で問題点やデバックがしやすくなります。
コンポーネントベース（Component-Based）
コンポーネントとは小さい部品のことであり小さい部品の集合として設計されています。
なので複雑なUIでも管理がしやすく拡張性があります。
一度、学習することでどこでも使える（Learn Once, Write Anywhere）
Reactを学習するとアプリだけでなくほかの分野にも適用することができます。
アプリを作るのにjavaなどほかの言語を使わなくてもjavascriptやReactだけで作成することも可能です。
モバイルアプリやサーバサイドレンダリングなどでも利用することができる点が特徴です。
Reactの書き方
JSX
Reactを知るうえでまずJSXを理解することが大事です。
classではなくclassNameを使う
<div className="test"></div>{ ～ }を使う
JSX内でjavascriptを記述するとき、{}で囲みます。
基本構文
JSXでHTMLを埋め込むような書き方ができるという仕組みになります。
let test = (
<h1>タイトル</h1>
);JSXを簡単に表現するhtmlライクな記述ができるJavaScriptの言語拡張と言えます。
Reactの導入方法
Node.jsのインストール
下記のページからNode.jsをダウンロードしましょう。
https://nodejs.org/ja/
ダウンロードしたファイルをクリックして指示に従うとインストールが始まります。
Create React Appのインストール
Create React Appは簡単にReactを導入することができるツールになります。
任意でデスクトップにフォルダを作成します。
コマンドプロンプトを開いてフォルダに移動します。
cd フォルダのディレクトリ下記のコマンドを入力します。
npx create-react-app 任意のフォルダ名アプリ起動する
cd 先ほど作成したフォルダ
npm startブラウザで表示確認
http://localhost:3000/
srcフォルダにApp.jsが存在するので自由に変更することで練習できます。
Node.jsを使用しないでReactを使う場合
cdnで下記のファイルを読み込みます。
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
コメント