認識 React JSX & Babel

*JSX:在 JS 中類似 HTML 標籤的語法

*JSX 用途:方便產生 React Element -> 取代 React.createElement()

*瀏覽器不支援 JSX 語法,所以要用 Babel 編譯

*Babel:將 JSX 轉換成瀏覽器相容的程式

React 寫法:React.createElement()

作法:

//原生的寫法
class MyHead extends React.Component {
 render() {
 // 建立以[原生 HTML 標籤]為基礎的 React Element
 return React.createElement(“h1”, null, “Hello World”);
 }
}

window.addEventListener(“load”, () => {
 // 建立以 [React 組件]為基礎的 React Element
 let myElement = React.createElement(MyHead);

 ReactDOM.render(
 myElement, document.body
 );
});

JSX 寫法:

作法:

//載入 Babel 編譯器套件
https://unpkg.com/@babel/standalone/babel.min.js
//包含 JSX 語法的 JavaScript 必須使用 type = "text/babel"
class MyHead extends React.Component{
 render(){
 // 取代 React.createElement(“h1”, null, “Hello World”)
 return Hello World;
  }
}
 window.addEventListener("load", () =>{
 let myElement = ;
 // 取代 React.createElement(MyHead)
 ReactDOM.render(
 myElement, document.body
 );
});

JSX 基本使用與動態資料

// 取代 React.createElement(MyHead)
let myComponent = < MyHead/ >;
// 取代 React.createElement(MyHead, {level:3})
let myComponent = <MyHead level = "3" />;

在 JSX 中使用 {JS 程式} 結合動態資料

class MyHead extends React.Component{
render(){
// 取代 React.createElement("div", {className:"head"}),
"Hello World" + this.props.level
return < div className=“head”>Hello World {this.props.level} </div>;
 }
}
window.addEventListener("load", ()=>{
// 1. 建立自訂的 React 組件實體
let myComponent = < MyHead level="3"/>;
// 2. 將建立好的 React 組件實體畫到容器中
ReactDOM.render(
myComponent, document.body
 );
});

建立巢狀結構

// 省略 MyHead 組件的定義
class MyHeadList extends React.Component{
render // 類似 HTML 般使用巢狀的結構
;}
}

window.addEventListener("load", ()=>{
// 1. 建立自訂的 React 組件實體,並提供組件的屬性物件
let list = <MyHeadList/>;
// 2. 將建立好的 React 組件實體畫到容器中
ReactDOM.render(list, document.body);
});

比起 HTML, JSX 更接近 JavaScript

比如:使用 className 而不是 class
Hello World {this.props.level}

範例一:

class MyHead extends React.Component{
render(){
// 取代 React.createElement("h1", {className:"head"}, "Hello World" + this.props.level)
return Hello World{this.props.level};
}
}

window.addEventListener("load", () =>{
let elem = ;
// 取代 React.createElement(MyHead, {level:2})
ReactDOM.render(elem, document.body);
});

範例二:

class MyHead extends React.Component{
render(){
// 取代 React.createElement("h1", {className:"head"}, "Hello World" + this.props.level)
return Hello World{this.props.level};
 }
}
class MyHeadList extends React.Component{
render(){
return;
 }
}

window.addEventListener("load", () =>{
let elem = ;
// 取代 React.createElement(MyHeadList) ;
ReactDOM.render(
elem, document.body
);
});

 

在 JSX 中套用 CSS 樣式

透過 className 屬性對應 CSS

<style type="text/css">
.head{font-size:24px; font-weight:bold;}
</style>
class MyHead extends React.Component{
render(){
// 取代 React.createElement("h1", {className:"head"}, "Hello World" + this.props.level)
return Hello World{this.props.level};
 }
}
class MyHeadList extends React.Component{
render(){
return;
 }
}
window.addEventListener("load", () =>{
let elem = ;
// 取代 React.createElement(MyHeadList) ;
ReactDOM.render(
elem, document.body
);
});

React.createElement 套用行內樣式 // 在屬性的部分使用 style,並設定 CSS 的樣式物件 //最外層{}是物件屬性

React.createElement(“div”, {style:{color:"red"}}, "Hello World");

使用 JSX 套用行內樣式

//一樣的:在屬性的部分使用 style, 並設定 CSS 的樣式物件

//在 JSX 大括號{} 裡頭才可以寫 JS code

實際範例演練:

//寫在行外
<style type="text/css">
.head {
font-size: 24px;
font-weight: bold;
}
</style>
class MyHead extends React.Component{
render(){
// 取代 React.createElement("h1", {className:"head"}, "Hello World" + this.props.level)
//寫在行內
return Hello World{this.props.level};
 }
}
class MyHeadList extends React.Component{
render(){
return;
 }
}

window.addEventListener("load", () =>{
let elem = ;
// 取代 React.createElement(MyHeadList) ;
ReactDOM.render(
elem, document.body
);
});

 

更彈性的寫法:

<style type="text/css">
.head {
font-size: 24px;
font-weight: bold;
}
</style>
class MyHead extends React.Component{
render(){
// 取代 React.createElement("h1", {className:"head"}, "Hello World" + this.props.level)
return Hello World{this.props.level};
 }
}
class MyHeadList extends React.Component{
render(){
return;
//level 就是 props 屬性下面的 level,color 就是 props 屬性下面的 color;
 }
}

window.addEventListener("load", () =>{
let elem = ;
// 取代 React.createElement(MyHeadList) ;
ReactDOM.render(
elem, document.body
 );
});

假設要使用原 createElement 的寫法:

<style type="text/css">
.head {
font-size: 24px;
font-weight: bold;
}
</style>
<script type="text/babel">
class MyHead extends React.Component{
render(){
return React.createElement("div", {className:"head", style:{color:this.props.color}}, "Hello World" + this.props.level);
//return Hello World{this.props.level};
 }
}

class MyHeadList extends React.Component{
 render(){
return;
//level 就是 props 屬性下面的 level,color 就是 props 屬性下面的 color
}