引入 jsx 語法內容時，需要指定 type為 text/babel
<script src="./jsx.js" type="text/babel"></script>
或者
<script type="text/babel">
...jxs
</script>
ReactDOM.render(html,target[,callback])將內容和渲染到指定的節點
變量用法
{ }代表進入了JavaScript執行環境
//基礎用法
const a = <h1>Hello React</h1>;
// 變量用法
//{ }代表進入了JavaScript執行環境
let msg = "Hello React";
let ;
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*將內容和渲染到指定的節點
ReactDOM.render(
<div>
{a}
{b}
</div>,
document.querySelector(".box")
)
jsx 標簽必須要有結束標簽。<a></a><input/>
jsx 中注釋必須用{ 包裹}
只有一個根節點
//基礎用法
const a = <h1>Hello React</h1>;
// 變量用法
//{ }代表進入了JavaScript執行環境
let msg = "Hello React";
let ;
const b = <a href={href}>{msg}</a>
//*ReactDOM.render(html,target[,callback])*將內容和渲染到指定的節點
const c = React.createElement("a",{href:"http://www.baidu.com"},"復雜超鏈接")
const d = React.DOM.a({href:"http://www.baidu.com"},"復雜的超鏈接D");
const e = <div>
<h1>嵌套</h1>
<span> 數據</span>
</div>;
const f = React.createElement("div",null,
React.createElement("h1",null,"嵌套二")
);
//書寫style時，橫線式要改為駝峰式，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關鍵字 聲明了類
//對于一些關鍵字要進行轉換， class=>className label的 for=>htmlFor
const i = <span className="cn"> Class 寫法</span>;
const j = [
<h3 key="1"> 數組1 </h3>,
<h3 key='2'> 數組2 </h3>,
<h3 key='3'> 數組3 </h3>
];
const k = <div>
<hr/>
<h3>Hello</h3>
{j}
</div>
const l = ['數組4','數組5','數組6']
ReactDOM.render(
<div>
{/*這是一段注釋*/}
{a}
{b}
{c}
b41qoke
{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()終將被棄用，請盡量使用ES6的寫法創建組件
// 由于繼承的子類沒有this，所以在ES6中需要使用constructor 得到 this
// 而在 ES5 中，createClass 所創建的類將自動擁有 this，可直接使用this.props
// this.props 將得到父級向下傳遞的數據
//this.props.children 得到組件的原始內容（子元素）
//當有一個子元素時，返回對象
//當有多個子元素時，返回數組
//當沒有子元素時，返回 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")
)
