React 交流區

react 岩D large scale front end application用
react 係比較reusable一點 做出來堆component 拆得比較散，方便重用，亦因為如此，寫上來比較煩
vue比較岩D one page / small scale front end野去寫

vue佢劣係佢係要pass個element id唔能夠成個dom食入去，食到入去就真係

vue唔係都可以拆component架咩

我係想直接食個由document.createElement產生的dom

https://vuejs.org/v2/guide/render-function.html

react 岩D large scale front end application用
react 係比較reusable一點 做出來堆component 拆得比較散，方便重用，亦因為如此，寫上來比較煩
vue比較岩D one page / small scale front end野去寫

vue佢劣係佢係要pass個element id唔能夠成個dom食入去，食到入去就真係

vue唔係都可以拆component架咩

我係想直接食個由document.createElement產生的dom

https://vuejs.org/v2/guide/render-function.html

留名

搭單問，如果做single page application, 一版有好多款野攞，咪要call 好多個唔同嘅api?

如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content

搭單問，如果做single page application, 一版有好多款野攞，咪要call 好多個唔同嘅api?

如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content

Json?
用Server side rendering?

搭單問，如果做single page application, 一版有好多款野攞，咪要call 好多個唔同嘅api?

如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content

個api你自己砌，用人地野另計
不過你都唔會一劑過囉曬啦

搭單問，如果做single page application, 一版有好多款野攞，咪要call 好多個唔同嘅api?

如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content

Json?
用Server side rendering?

json, 因為想app 都用同一套所以唔做server side rendering

搭單問，如果做single page application, 一版有好多款野攞，咪要call 好多個唔同嘅api?

如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content

講真 有都真係唔出奇

搭單問下
如果係做一個類似新聞網嘅野
home page 就列曬所有新聞嘅title 出黎
之後撳入去會去左個篇新聞 有曬content 咁
呢類網係咪應該係寫套api 畀json 個client 做client side rendering?
定係成個網每次都server render 埋 直接掉成個html 過去

搭單問下
如果係做一個類似新聞網嘅野
home page 就列曬所有新聞嘅title 出黎
之後撳入去會去左個篇新聞 有曬content 咁
呢類網係咪應該係寫套api 畀json 個client 做client side rendering?
定係成個網每次都server render 埋 直接掉成個html 過去

both

岩岩學，唔明api 點運作

可能有用：https://www.codecademy.com/apis

玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},

render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>

<option value="Gromulus">
Gromulus
</option>

<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎

this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 （其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去

唔知有無錯 可能有d 1999

玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},

render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>

<option value="Gromulus">
Gromulus
</option>

<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎

this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 （其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去

唔知有無錯 可能有d 1999

咁個parameter e實際係D咩黎

Event object
https://www.w3schools.com/jsref/dom_obj_event.asp

玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},

render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>

<option value="Gromulus">
Gromulus
</option>

<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎

this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 （其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去

唔知有無錯 可能有d 1999

咁個parameter e實際係D咩黎

Event object
https://www.w3schools.com/jsref/dom_obj_event.asp

我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event

https://facebook.github.io/react/docs/handling-events.html

Here, e is a synthetic event. React defines these synthetic events according to the W3C spec, so you don't need to worry about cross-browser compatibility. See the SyntheticEvent reference guide to learn more.

玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},

render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>

<option value="Gromulus">
Gromulus
</option>

<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎

this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 （其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去

唔知有無錯 可能有d 1999

咁個parameter e實際係D咩黎

Event object
https://www.w3schools.com/jsref/dom_obj_event.asp

我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event

this.handleChange 係reference 黎
this.handleChange() 先係function
React 根據你個reference
再入parameter call你個function

玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},

render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>

<option value="Gromulus">
Gromulus
</option>

<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎

this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 （其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去

唔知有無錯 可能有d 1999

咁個parameter e實際係D咩黎

Event object
https://www.w3schools.com/jsref/dom_obj_event.asp

我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event

你唔比個e都無問題
但如果你要classify邊個obj送個event入去，就要
1，放parameter
2，用arguments array去read

個人鐘意用後者，因為做緊的job入面d doc唔齊，無講會pass 咩param入去

有講我就建議用1

玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},

render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>

<option value="Gromulus">
Gromulus
</option>

<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎

this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 （其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去

唔知有無錯 可能有d 1999

咁個parameter e實際係D咩黎

Event object
https://www.w3schools.com/jsref/dom_obj_event.asp

我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event

你唔比個e都無問題
但如果你要classify邊個obj送個event入去，就要
1，放parameter
2，用arguments array去read

個人鐘意用後者，因為做緊的job入面d doc唔齊，無講會pass 咩param入去

有講我就建議用1

我都鍾意用後者
{}

有冇ide 有react/js autocomplete
即係你require others js
it can auto infer the underlying properties and function
atom nuclide seems not capable on this