Reactを０から勉強・練習している時の自分用メモです。
Reactってなんぞ？？ってとこからざっくりメモっています。
Reactてなに？
Facebookのエンジニアが作ったjsライブラリで世界的に人気。
複雑なアプデートにも柔軟に対応できる上、早くてレスポンシブ。
長いコードを書かなくて良い、使い回しできる。
大規模なプログラムで沢山変化するデータがあってもreactは素晴らしいパフォーマンスである。
フレキシブルなのでWebアプリ以外でも使える
とても人気。reactを理解すると採用されやすくなるかも？
JSXでコーディング
例：const h1 = <h1>Hello world</h1>;
JSXとは？
jsのシンタックスエクステンションでReactに使われる
HTMLに似ている
シンタックスエクステンション？
JSXはvalid(有効)なjavascriptではないのでブラウザーは読み込むことができない
どうする？
コンパイルしないといけない
JSXのcompiler(コンパイラー)でJSXをブラウザーが読めるように普通のjavascriptに変換する
Virtual(仮想)DOMについて
reactがサクセスフルなのはこれがあるからでもある
通常は、javascriptフレームワークはDOMで不要な部分も読み込み表示するため遅い
例えば、10個のアイテムがリストにあって、1つチェックしただけでも残りの9個も読み込み直すのでそのぶん遅くなるし無駄。
reactではDOMオブジェクトには対応するVirtual DOMが存在し、軽くて早い
通常のDOMと同じプロパティがある
通常のDOMを操作するのは遅いが、Virtual DOMだと早い。
JSXをレンダーするときに全てのVirtual DOMのオブジェクトがアップデートされます。
すごく効率的で、早いにもかかわらず、開発コストもあまりかからない
なぜ早い？
ReactがVirtual DOMの変更されたとこをだけを変更前と比較するので必要な箇所のDOMのみを更新する：これをDiffingという
ざっくりな流れ
- (1) 全体のVirtual DOMが更新される
- (2) Virtual DOMが更新される前の状態と比較する
- (3) Reactがどのオブジェクトが変更されたのか理解する
- (4) 変更が加わったオブジェクトのみリアルのDOMに更新される
- (5) リアルのDOMの更新が画面に反映される
てかDOMって何？という方
DOM（Document Object Model）とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。
例えば<p>の中身のテキストを変更したり、<img src="sample.jpg">のsrcの中身を変更して別の画像に差し替えるといったことができます。
参照：DOMとは
JSX Writingルール
classはclassName
img / br / inputなどはself-closing tagを使う
ReactDOM.render(
<h1>2 + 3</h1>,
document.getElementById('app')
);だと”2 + 3”と表示される
＊計算して”5”とは表示されない（テキストとして読み込む）
どうするか？
ReactDOM.render(
<h1>{2 + 3}</h1>,
document.getElementById('app')
);{}で囲むとその中身は通常のjavascriptとして読み込まれる
JSXの中にはif文は入れることはできない
例：
(
<h1>
{
if (purchase.complete) {
'ご購入ありがとうございます！'
}
}
</h1>
)これダメ
ならどうやって条件分岐とかすんの？
JSX文の中に書かないだけ
例：
if (user.age >= drinkingAge) {
message = (
<h1>
お酒は控えめにしましょう
</h1>
);
} else {
message = (
<h1>
お酒は二十歳になってから
</h1>
);
}The ternary operatorがよく使われる
The ternary operator(三項演算子)てどげん使うんけ？復習〜
例：
if(userIsYoungerThan21) {
serveGrapeJuice();
}
else {
serveWine();
}このif文を短くできる
userIsYoungerThan21 ? serveGrapeJuice() : serveWine();
参考：How do you use the ? : (conditional) operator in JavaScript?
x ? y : z xがtrueならyを返す xがfalseならzを返す
keyとは？
keyはJSXのattributeでidのようなもの＊ユニークじゃないとダメ
見えないものだけどReactが中でゴニョゴニョしてリストをトラック(追跡)します。
もし、keyが必要なのに設定していないとreactが違う順番にリストを並べてしまうかもです。
ならkeyはいつ使うの？
例：todoリストのようなリストアイテムに記録があるもの
シャッフルされるようなリスト
.map()と一緒に使うとき、
const peopleLis = people.map(person =>)から
const peopleLis = people.map((person, i) => )にして、
key={‘person_’ + i}
と記述する
person_1 person_2 person_3 person_4 ……………
となる
JSXを使わなくても記述できる＊ほとんどJSX使うけど
With JSX
const sampleTxt = <p>i am sample</p>;Without JSX
const sampleTxt = React.createElement(
“p",
null,
"i am sample"
);Componentてなに？
コンポーネントは小さい、使い回しできるコードで１つの仕事を持っているやつ。
ほとんどの場合はhtmlをrenderする仕事。
Component Classは？
コンポーネントを作る工場のようなもの
コンポーネントクラスがあれば、そのクラスを使って好きなだけコンポーネントを作ることができる。
React.Componentでコンポーネントクラスを作れる
React.Componentてなんぞ？
Javascriptクラスで自分のコンポーネントクラスを作るために必ずサブクラスしないといけない。＊作るのはコンポーネントではない
参考：サブクラス化
どうやって？
例：以下のシンタックスを使ってできます。
class MyComponentName extends React.Component {}＊MyComponentNameを好きな名前に（ただし大文字スタートUpperCamelCaseで！！）
Render Functionについて
class MyComponentClass extends React.Component {
この中にどうコンポーネントを作るのか命令を書く
}この命令の中にはrenderメソッドを入れないといけない。
class MyComponentClass extends React.Component {
render() {
}
}そしてrenderメソッドはreturnを含まないといけない。
class MyComponentClass extends React.Componet {
render() {
return <h1>Hello world</h1>;
}
}これでMyComponentClassができました
以下のコードでコンポーネントを作る。
ReactDOM.render(<MyComponentClass />, document.getElementById('app'));◯番目のものを使う時
const greetings = [
{
title: “hello",
src: “画像url"
},
{
title: “what’s up",
src: “画像url"
},
{
title: “hola",
src: “画像url"
}
];
const greeting = greetings[ここにgreetingsの何番目か記述(0,1,2,3,4…)];if文使う時
import React from 'react';
import ReactDOM from 'react-dom';
// 半分の確率でfalse or true
const fiftyFifty = Math.random() < 0.5;
// 新しいコンポーネントクラス
class TonightsPlan extends React.Component {
render() {
if(fiftyFifty) {
return <h1>今夜はパーティーだぁ！</h1>
} else {
return <h1>今夜はコーディングだぁ！</h1>
}
}
};
ReactDOM.render(<TonightsPlan />, document.getElementById('app'));thisを使う時
thisはReactでよく使うらしい
例：
class MyName extends React.Component {
// nameプロパティはここ
get name() {
return 'コーディングマン';
}
render() {
return <h1>My name is {this.name}.</h1>;
}
}ここでのthisはMynameのインスタンスです。
イベントリスナー
Render functionはよくイベントリスナーを含んでる
render() {
return (
<div onHover={function名}>
</div>
);
}＊onClickを良く使う
Reactではこんな感じでコンポーネントクラスのメソッドのイベントハンドラーを定義するぞよ
class MyClass extends React.Component {
function名() {
alert(‘ハ、、、ハ、、、ファンクション!!!!!');
}
render() {
return (
<div onHover={this.function名></div>;
</div>
);
}
}他のjsファイルからコンポーネントを読み込む：import
import { コンポーネント名 } from ‘./ファイルの場所’;
exportも重要
exportをエクスポートしたいもののすぐ前に記述
例：
export const sampleThings = {
sample1: ‘xxxxxxxx’,
sample2: ’yyyyyyyy’,
sample3: ‘zzzzzzzzz'
};＊var, let, const, function, classが使える
使い分けについて：var/let/constの使い分けのメモ
var,let,constの違いは、ブロックスコープと巻き上げ
複数のものをexportできる
export const sampleThings = {
sample1: ‘xxxxxxxx’,
sample2: ’yyyyyyyy’,
sample3: ‘zzzzzzzzz'
};
export const anotherOne = ‘xxxxxxxx’;Propsてなに？
全てのコンポーネントはpropsを持っている。
コンポーネントのpropsはそのコンポーネントの情報を持ったオブジェクトである。
コンポーネントのpropsを見るには、this.propsを使う
例：
render() {
console.log(“Propsオブジェクトがくるよ〜");
console.log(this.props);
console.log(“今のがワシのpropsじゃよ");
return <h1>Hello world</h1>;
}情報をコンポーネントに渡す
以下みたいに属性を与えることで渡すよ〜
<SampleComponent sample=“this is smaple” />配列を渡すことも
<Jobs myJobs={[“cleaner", “DJ", “waiter"]} />色々渡せる
<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />＊stringじゃない時は{}で囲む
全体はこんな感じ
class Greeting extends React.Component {
render() {
return <h1>Hi there, {this.props.name}!</h1>;
}
}
ReactDOM.render(
<Greeting name='こんにちは' />,
document.getElementById('app')
);propsはコンポーネントに情報を渡す時に使われるのが一般的
Propsでfunctionを渡す
Sample.js内：
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';
class Test extends React.Component {
sample() {
命令内容
}
render() {
return <Button test={this.sample} />;
}
}
ReactDOM.render(
<Test />,
document.getElementById('app')
);Button.js内
import React from 'react';
export class Button extends React.Component {
render() {
return (
<button>
Click me!
</button>
);
}
}Propsで情報を受け取る
Button.js内
export class Button extends React.Component {
render() {
return (
<button onClick={this.props.sample}>
Click me!
</button>
);
}
}＊onClick={this.props.sample}でsampleの命令内容の情報を受け取る
名前の付け方
＊別に従わなくても良い
例から
さっきのSample.js内：sample()をhandleClick()に変更し、
<Button />内のtestをonClickに変更し、event名に合わせてsampleをhandleClickに変更
class Test extends React.Component {
handleClick() {
命令内容
}
render() {
return <Button onClick={this.handleClick} />;
}
}
ReactDOM.render(
<Test />,
document.getElementById('app')
);さっきのButton.js内
<button>内のsampleをprops名に合わせてonClickに変更
export class Button extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>
Click me!
</button>
);
}
}この時、Sample.js内の<Button />にあるonClickはevent listenerを作らない、通常のpropsの名前。
Button.js内の<button>にあるonClickはevent listenerを作る。
<Button />はJSXではなく、コンポーネントのインスタンスだから。
HTMLに似ているJSXでonClickなどの名前が使われたら、それはevent listenerを生成する。それ以外は普通のpropの名前。
this.props.childrenてどげんして使うと？？？
コンポーネントの全てのpropsオブジェクトはchildrenというプロパティを持っている。
this.props.childrenはコンポーネントのJSXの開始タグから閉じタグ内のものを返す。
今まで、<MyComponent />のようなself-closingタグで書いていましたが、<MyComponent></MyComponent>でも動きます。
そんで、this.props.childrenは<MyComponent>と</MyComponent>の間のもの全て返します。
例：
// Example 1
<Sample>
Hello world
</Sample>this.props.childrenは「Hello world」になる
// Example 2
<Sample>
<Test />
</Sample>this.props.childrenは「
// Example 3
<Sample />this.props.childrenは「undefined」になる
コンポーネントが１つ以上childをJSXタグ内に持っていたら、それを全部配列で返す。
defaultPropsてなんぞよぉぉぉぉ？？？
デフォルトのpropsを設定できる
例：
class Example extends React.Component {
render() {
return <h1>{this.props.text}</h1>;
}
}
Example.defaultProps = { text: ’this is a default' };Dynamic informationてなんやね〜〜〜ん？？？
Dynamic informationとは変化可能な情報であ〜る
？？どゆこと
Reactコンポーネントはよくrenderするのに、Dynamic informationが必要になる。
例：バスケットボールゲームでスコアはどんどん変わる。ということは、そのスコアはDynamicであ〜る。
コンポーネントがDynamic informationを得るのに２つの方法がある：propsとstate
propsとstate以外、コンポーネントで使われているvalueは変わらない
State？？？なんそれ？？
stateは外から渡されるものではない
コンポーネントが自分のstateを決める
コンポーネントにstateを持たせるためにはコンポーネントにstateプロパティを与えないといけません。
このプロパティはconstructorメソッド内で宣言されないといけない。
例：
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { mood: ’sad' };
}
render() {
return <div></div>;
}
}
<Example />何これ？？？
constructor(props) {
super(props);
this.state = { mood: ’sad' };
}this.stateはオブジェクトとイコールになってないといけない。
このオブジェクトはコンポーネントインスタンスの最初の”state”になる。
superて何？すごいの？
細かいことは省くが、Reactコンポーネントはプロパティをセットするためにconstructor内でsuperを使わないといけない。
一番下の<Example />がstateを持っていることになり、{ mood : ’sad’ }とイコールになっている。
＊constructorとrenderはコンマで分割しない！
Stateにアクセス
this.state.プロパティ名
例：
<h1>{this.state.プロパティ名}</h1>this.setState()でstateをチェーーーーンジ
this.state = {
mood: ’sad’
angry: false
}こういうstateがあって、
this.setState({ angry: true});
をすると、その後は
{
mood: ’sad’
angry: true
}がstateになる。
＊moodの箇所は変わってないです。
違うfunctionからthis.setStateを呼び出す
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { weather: 'sunny' };
this.makeSomeFog = this.makeSomeFog.bind(this);
}thisを使うコンポーネントクラスメソッドを書く時、以下をconstructor内に記述
this.methodName = this.methodName.bind(this)
ボタンを押すと背景が変わるやつ
import React from 'react';
import ReactDOM from 'react-dom';
const green = '#39D1B4';
const yellow = '#FFD712';
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = { color: green }
this.changeColor = this.changeColor.bind(this);
}
changeColor() {
//今表示している色ともう一つの色を入れ替える
const newColor = this.state.color == green ? yellow : green;
this.setState({ color: newColor });
}
render() {
return (
<div style={{background: this.state.color}}>
<h1>
Change my color
</h1>
<button onClick={this.changeColor}>
Change color
</button>
</div>
);
}
}
ReactDOM.render(<Toggle />, document.getElementById('app'));以下は、Aの時B、Bの時Aを渡すやつ(changeColor()内)
const newColor = this.state.color == A ? B : A;
this.setState({ color: newColor });this.setState()をコールする時はいつでも、this.setState()がrender()をコールする。
そのため、renderの中にthis.setState()をコールしてしまうと、無限ループする、、、
＊勉強次第随時更新します〜〜〜