LoginSignup
1
1

More than 3 years have passed since last update.

React超入門~jQuery知識しかない状態からの学習

Posted at
1 / 2

アジェンダ

1.Reactについて

2.Reactの導入

3.Reactの実装

4.まとめ

1.Reactについて

JavaScriptライブラリ。類似のライブラリにjQuery、Vue.js等がある。つまりHTMLの画面上で動的に見せたいときに利用される。
■Reactの特徴
・ソースをコンパイルする必要がある
(そのため開発環境の作成が必要)
・React内でのHTML部分はJSXという書き方で書く(=JavaScriptとHTMLが混ざったような書き方)
 ⇒複雑なUIを作るのが得意。
・誤解を恐れずに言えば、JavaScript版のWicketのような実装になる

2.Reactの導入

■Reactの導入にはいくつかの方法がある。
1.png

1.の導入方法はjQueryと同様の方法。Reactを使えるが本当に初歩のことしかできません。JSXが使えず、何より処理負担が大きいためサービスを作るにあたって実用的ではない。
2.は開発環境を手軽に作成できる用。
3.についてはReactを使っていく上で、必要になるNode.jsやBabelを自力で導入していく。既存のシステムに組み込むときにはこの方法。
babel  ・・・新しいJavaScriptの形式を今のサービスでも対応できるように書き換えるもの。
Node.js ・・・javaScriptをサーバーサイドでも動かせるようにできるプラットフォーム。
npm  ・・・Node.jsを利用するにあたっての必要な情報を取りまとめて動かす

導入

①Node.jsのインストール
以下の公式サイトからdownload&Install
https://nodejs.org/ja/
2.png

②create-react-appをインストール
コマンドプロント上で
npm install -g create-react-app
3.png

③プロジェクトの作成
任意のパスに移動し、
create-react-app <プロジェクト名>
4.png

※プロジェクトの作成上の注意
以下のプロジェクト名はエラーになる模様
・react
・react-dom
・react-scripts
5.png

④プロジェクトのスタート
作成したプロジェクトの直下に移動し、npm start
6.png

⑤ブラウザが立ち上がる
7.png

3.Reactの実装

ソースコードの説明

8.png

9.png

10.png

コードを修正(&保存)すると自動でリロードされる
11.png

実装について注意点

renderメソッドを必ず実装しなくてはならず、return できるコンポーネントは一つしか指定できない。
12.png

イメージタグ等、HTMLでは"/"で閉じなくても表示できるが、Reactではエラーになる。
13.png

Reactによるコーディングの基本

14.png

StateとPropsについて

State(状態) Props(プロパティ)
可変のデータ 不変のデータ
コンポーネントによって保持 親から渡される
変更可 変更不可
プライベートであるべき デフォルト値の設定と検証が可能

Steteの詳細

15.png
16.png

Propsの詳細

17.png
18.png

まとめ

■Reactの感想
・jQueryとは比較にならないほど別物で、学習コストが高かった。
・HTML を更新する必要がある場合(=画面の変化が大きいもの)は便利そう。
・実際の運用面を考慮すると、React、Babel、Node.jsのバージョン不整合等が起きる可能性もあるので導入メリットが大きいとは思えなかった。

参照サイト

https://qiita.com/KKoh/items/8aa1bf0bb3673e8e2455
https://qiita.com/maron8676/items/4457b4d70be6db260eee
https://tech-brook.com/525/
https://tech-brook.com/558/
https://qiita.com/tomi_linka/items/6563eacd88e63bda5de3
https://qiita.com/kyrieleison/items/78b3295ff3f37969ab50
https://codezine.jp/article/detail/9928

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1