angular2を放置して何故かReactをやってみるだめな子。
単純に話が難しくなってきたから若干別の知識が必要だということに気づいただけです。
というかある程度まで記事は書いているけど公開していないだけです。
そちらはほそぼそ勧めてます。
というわけでReactやっていきたいと思います。
基本的にはreactを覚えたいのもあるけど英語の勉強がてらやってるものなので日本語を探してすらいません。
参考にする場合どっかに日本語版があるのであればそっちを見たほうがいいでしょう。
あ、インストールからじゃないのでそこら辺は適当にやってください。
[Get started]から始めるReact開発：その1
[Get started]から始めるReact開発：その2:Rendering Elements
[Get started]から始めるReact開発：その3:Components and Props
[Get started]から始めるReact開発：その4(State and Lifecycle①
[Get started]から始めるReact開発：その4(State and Lifecycle②
#Get Started
##まずは基本中の基本Hello World
どうやら簡単なReactの始め方はこのコードをCodePenで実行してみることらしい。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
次の幾つかのセクションで徐々にReactの使い方を教えてくれるらしい。
一度マスター出来れば小さな再利用できる...まぁかけらでいいか、かけらで複雑なアプリケーションを作り出すことができるんだって。
##javascriptについて
Reactはjavascriptライブラリなので、javascriptの基礎知識が前提になっている。なのでjavascriptについて自身がないなと感じたのなら、ここ(そのままなので英語だけど)でjavascriptについての知識をリフレッシュすることをおすすめしています。
私たちはまた、例文の中でES6の構文を幾つか使用します。これについてはまだ比較的に新しいので控えめに使用を試みますが、arrow functions/ classes/template literals/let/constなどのstatementについて知識を得ることを奨励しています。
Babelなんかも使えるよって。
#Introducing JSX
下記変数宣言について考えます。
const element = <h1>Hello, world!</h1>;
これはHTMLでも文字列でもありません。
JSXと呼ばれ、javascriptの拡張構文(syntax extension)です。
UIの外観を記述するのにはこれを利用するのをおすすめしています。
JSXはテンプレートエンジンを思い出すかもしれませんが、これはjavascriptのフルパワーがついています。
JSXはReact"element"を生成します。次のセクションでDOMへの描画を調査します。その前に、JSXを始めるのに必要な基礎知識を理解しましょう。
##Embedding Expressions in JSX
任意のjavascript表現を中括弧で囲んでJSXに組み込むことができるようです。
例えば、2 + 2, user.firstName, and formatName(user)これらはすべて妥当な表現です。
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
CodePenで試してみる
可読性のために複数の行二分割してJSXを書いているらしい。これ自体は必須ではないけど、自動セミコロン挿入の落とし穴？を避けるためにカッコで囲むことをおすすめしてるんだって。
##JSX is an Expression Too
コンパイル後にJSX表現(式)はjavascriptオブジェクトになる。これは、JSXをif文とforループの内部で使用し、変数に代入し、引数として受け取り、関数から戻すことができることを意味します。
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
##Specifying Attributes with JSX
属性の中で文字列を使いたい場合は"を使う。(quotesってduoble quoteのことなの？複数形だから？
const element = <div tabIndex="0"></div>;
また、属性の中でJSXを記述したい場合は中括弧{}を使う。
const element = <img src={user.avatarUrl}></img>;
属性にjavascriptを埋め込む時には中括弧を"で囲んではだめです。その場合は式としてではなく文字列として扱われてしまいます。
両方を同じ属性の中で扱うことはできません。
##Specifying Children with JSX
もしタグの中身画からの場合はXMLのように/>で即座にタグを閉じることができる。
const element = <img src={user.avatarUrl} />;
また、JSXタグは子を持つこともできる
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
ここで警告
基本的にJSXはHTMLというよりもjavascriptに近いため、ReactDomは従来HTML Attribute namesの代わりにcamelCaseを使用します。
例としてはclassはclassName/tabindexはtabIndexになります。
##JSX Prevents Injection Attacks(インジェクション攻撃を防ぐ…的な)
基本的にはデフォルトでエスケープされます。明示的に書かれていない値は挿入されない絶対に入ってこないようです。すべてがレンダリング時に文字列に変換されるそうです。これでXSSをふせぐことができる…みたいですね。
##JSX Represents Objects
Babel compiles JSX down to React.createElement() calls.(これうまく日本語に訳せないというかちょっと意味わからん。BabelはReact.createElementの呼び出しによりJSXをコンパイルします？？？？down toをどう訳したらいいかがよくわからない)
下記2つの例は同一のものになる。
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElementはあなたがバグのないコードを書くための手助けとして幾つかのチェックを行うが、本来は下記のようなオブジェクトをつくる。
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
これらのオブジェクトはReact elementsと呼ばれている。これがスクリーン上でどのように見せるかを説明していると考えるといいようだ。Reactはそれらのオブジェクトを読み、DOMを構築するのに使い、それを最新に保ち続ける。
次のセクションでは`React elements'がどのようにDOMを描画しているかを調べましょう。