React Getting Started
Reactの [Main Consepts] をなぞって学ぶ。 Getting Started から始める。
試す
- 既存のプロジェクトに徐々に追加可能
- どの程度利用するか選択可能
オンラインエディタで試せる
最初の例
最初の例として、React のホームページのサンプルを試せる。
<HelloMessage name="Taylor" />,
実際に試した人はいるのかな？
Taylor の文字を書き換えると右側のRESULTの出力結果が変わる。
ここに日本語を入力しようとするとキーボードの操作をReactが検出するのだろうか？ 日本語変換より前にキーがフックされる。
この動作を回避するにはどうしたら良いのか？
class を用いずに function の場合はどう書くのか？
興味倍増です！
私は、コンセプトから学びたいので、ガイドからはじめる。
準備として、用意されたHTMLファイルをダウンロードしておく。
Hello World
まずはHello World から始めます。
Reactのいちばん短い例
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
</script>
</body>
準備として用意したファイルのままですね。
ReactDOM.render(element, container[, callback])
element は、 <h1>Hello, world!</h1>
container は、 id="root"
<div id="root"></div> に <h1> タグでマークアップした Hello, world! を描画してると理解できる。
このリファレンス 項目の補足は重要じゃないだろうか？
DOM 差分アルゴリズムを使用します。
これが Virtual DOM の革命で「すごい」と騒がれたとか？
もっとも重要なことは
ReactDOM.render()を使用することは非推奨となり、React 17 では削除されます。代わりにhydrate()を使用してください。
日本語の Issue ページに質問を投げたら
SSR自体がやや上級者向けの話であり、少なくとも Hello World で触れるようなものではありません。SSR を使わずにブラウザで動くアプリを書く場合、
ReactDOM.render()を使い続けて全く問題ありません。
さらに
将来的に並列モードがデフォルトになると書き方がまた微妙に変わるのですが
と回答を頂いた。
JSXの導入
JSX とは JavaScript の構文拡張
- UI の見た目を記述する
- JavaScript の全機能を備える
- React要素を生成する
const element = <h1>Hello, world!</h1>;
生成された React 要素をさらに DOM に変換する必要がある。
表示のためのロジックは、状態の変化、データの準備などは結合する。
粗結合とか関心の分離などの考え方とは相容れない？
React を使うならコンポーネントの理解が必要なのですね。
式を埋め込む
変数を {} で囲む。
const name = 'React JSX';
const element = <h1>Hello, {name}</h1>;
ReactDOM.hydrate(element, document.getElementById('root'));
JavaScript関数の結果を埋め込む。
const formatName = ({ firstName, lastName }) => {
const initialName = firstName.charAt(0).toUpperCase() + firstName.slice(1);
return initialName + ' ' + lastName;
};
const user = {
firstName: 'harper',
lastName: 'perez',
};
const element = <h1>Hello, {formatName(user)}!</h1>;
ReactDOM.hydrate(element, document.getElementById('root'));
firstName の1文字目が大文字に変換されて出力されます。
hydrate() を使っていると Warning が発生した。
Warning: Expected server HTML to contain a matching <h1> in <div>.
at h1
<div><h1>Hello, {formatName(user)}!</h1></div>
<div> を使っても同じ警告!解決方法はわからない。
JSXは式である
コンパイルの後、JSX の式は普通の JavaScript の関数呼び出しに変換され、JavaScript オブジェクトへと評価されます。 https://ja.reactjs.org/docs/introducing-jsx.html#jsx-is-an-expression-too
const user = {
firstName: 'harper',
lastNmae: 'perez',
};
const formatName = ({ firstName, lastNmae }) => {
return firstName.toUpperCase() + ' ' + lastNmae;
};
const getGreeting = (user) =>
user ? <h1>Hello, {formatName(user)}!</h1> : <h1>Hello, Stranger.</h1>;
const element = getGreeting();
// const element = getGreeting(user);
ReactDOM.hydrate(element, document.getElementById('root'));
ブラウザには Hello, Stranger. と出力されます。
変数に代入したり、引数として受け取ったり、関数から返したりすることができる
JavaScript として実行できることは JSX としてできるということ。
属性を指定する
文字列リテラルを属性として指定するには引用符 "" で囲む。
const element = <div tabIndex="0"></div>;
属性に JavaScript 式を埋め込むために中括弧で囲む。
const element = <img src={user.avatarUrl></img>;
プロパティ命名規則はキャメルケースを用いる。 className , firstName
子要素を指定
空タグは、 /> で閉じる。
const element = <img src={user.avatarUrl}> />
タグは子要素を持つことができる。
const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> )
インジェクション攻撃を防ぐ
JSX にユーザの入力を埋め込むことは安全です
const title = response.```
potentiallyMaliciousInput;
const element = <h1>{title}</h1>
インジェクション攻撃。名前は聞いたことがある。でも何もわからない。
インジェクション攻撃とは<サイバー攻撃の一種で、文字入力を受け付けるプログラムに対して攻撃者がスクリプト文を送って想定外の動きをさせたり、システムを抜き取ったりする攻撃のこと。
レンダー前にエスケープします。...レンダーの前に全てが文字列に変換されます。
安全なので安心して「使って」と覚えておく。
オブジェクトの表現である
Babel でコンパイルされ React.createElement() に書き換わる。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)
Babel でコンパイル
const element = ReactElement(
'h1',
{calssName: 'greeting'},
'Hello, world!'
)
これは等価である。
そしてReact要素オブジェクトが爆誕!
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
