引入 jsx 語法內(nèi)容時(shí)姊舵，需要指定 type為 text/babel
<script src="./jsx.js" type="text/babel"></script>
或者
<script type="text/babel">
...jxs
</script>
ReactDOM.render(html,target[,callback])將內(nèi)容和渲染到指定的節(jié)點(diǎn)
變量用法
{ }代表進(jìn)入了JavaScript執(zhí)行環(huán)境
//基礎(chǔ)用法
const a = <h1>Hello React</h1>;
// 變量用法
//{ }代表進(jìn)入了JavaScript執(zhí)行環(huán)境
let msg = "Hello React";
let ;
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*將內(nèi)容和渲染到指定的節(jié)點(diǎn)
ReactDOM.render(
<div>
{a}
晰绎
</div>,
document.querySelector(".box")
)
jsx 標(biāo)簽必須要有結(jié)束標(biāo)簽。<a></a><input/>
jsx 中注釋必須用{ 包裹}
只有一個(gè)根節(jié)點(diǎn)
//基礎(chǔ)用法
const a = <h1>Hello React</h1>;
// 變量用法
//{ }代表進(jìn)入了JavaScript執(zhí)行環(huán)境
let msg = "Hello React";
let ;
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*將內(nèi)容和渲染到指定的節(jié)點(diǎn)
const c = React.createElement("a",{href:"http://www.baidu.com"},"復(fù)雜超鏈接")
const d = React.DOM.a({href:"http://www.baidu.com"},"復(fù)雜的超鏈接D");
const e = <div>
<h1>嵌套</h1>
<span> 數(shù)據(jù)</span>
</div>;
const f = React.createElement("div",null,
React.createElement("h1",null,"嵌套二")
);
//書寫style時(shí)，橫線式要改為駝峰式，font-size=>fontSize
const g = <span style={{color:'red',fontSize:'20px'}}>Style 寫法</span>
const so = {
color:'green'
}
const h = <span style={so}>STYLE</span>;
//ES6中使用class關(guān)鍵字 聲明了類
//對(duì)于一些關(guān)鍵字要進(jìn)行轉(zhuǎn)換决侈， class=>className label的 for=>htmlFor
const i = <span className="cn"> Class 寫法</span>;
const j = [
<h3 key="1"> 數(shù)組1 </h3>,
<h3 key='2'> 數(shù)組2 </h3>,
<h3 key='3'> 數(shù)組3 </h3>
];
const k = <div>
<hr/>
<h3>Hello</h3>
{j}
</div>
const l = ['數(shù)組4','數(shù)組5','數(shù)組6']
ReactDOM.render(
<div>
{/*這是一段注釋*/}
{a}
{c}
ycgow5i
{e}
{g}
{f}
{h}
{i}
{j}
{k}
{l}
{
l.map((m,n)=>{
return <h1 key={n}>{m}</h1>
})
}
</div>,
document.querySelector(".box")
)
// Array.map(function(item,index){})
map/forEach/for/filter
組件化
//ES5 的React.createClaa()終將被棄用尖昏，請(qǐng)盡量使用ES6的寫法創(chuàng)建組件
// 由于繼承的子類沒有this，所以在ES6中需要使用constructor 得到 this
// 而在 ES5 中祸憋，createClass 所創(chuàng)建的類將自動(dòng)擁有 this会宪，可直接使用this.props
// this.props 將得到父級(jí)向下傳遞的數(shù)據(jù)
//this.props.children 得到組件的原始內(nèi)容（子元素）
//當(dāng)有一個(gè)子元素時(shí)，返回對(duì)象
//當(dāng)有多個(gè)子元素時(shí)蚯窥，返回?cái)?shù)組
//當(dāng)沒有子元素時(shí)，返回 undefined
const Com1 = React.createClass({
render(){
return <div>
<h1>Hello ES5 React Component!!!</h1>
<h3>{this.props.msg}</h3>
</div>
}
});
//ES6
class Com2 extends React.Component{ //繼承的類不能使用this
constructor(props){//props 接收 傳過來的值
super(props);
}
render(){
return <div>
<h1>Hello ES6 react component!!!</h1>
<h3>{ this.props.msg }</h3>
</div>
}
}
ReactDOM.render(
<div>
<h1>Hello react</h1>
<Com1 msg="你好"></Com1>
<Com2 msg="你好"></Com2>
{/*<Com2/>*/}
</div>,
document.querySelector(".box")
)
