昨天學習到了JSX的幾大特色與優點之後，今天就正式來學習用JSX搭配react。載入JSX之前先引用babel-core這個JSX的編譯器。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

載入JSX有兩種方式:

1. 內部引入

<script type="text/babel">
    
</script>

2. 外部引入

<script type="text/jsx" src="test.jsx"></script>

以下用官網的範例作為練習:

HTML結合Javascript用法

function formatName(user) {
  return user.firstName+ ' ' + user.lastName;
}

const user = {
  firstName: '陳',
  lastName: '小羽'
};
// 產生h1的react元素
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
// 將react元素渲染到html架構裡
ReactDOM.render(
  element,
  document.getElementById('app')
);

設定JSX屬性

JSX同樣可以做到如HTML標籤上的屬性設置，但要注意class和for為Javascript的保留關鍵用字，若要設定的話請用className和htmlFor取代。

<div className="greeting">
     <p>Hello  {formatName(user)}</p>
     <label htmlFor="name"><input type="text" id="name"/></label>
    <img src="" alt="" />
</div>

另外需要注意下列兩點:

• JSX會被編譯成Javascript給瀏覽器讀取，且每一個JSX只會對應到一個Javasciprt，因此Component中若有多個HTML標籤要渲染的話，最外面可以包覆<div>標籤。
• JSX裡的HTML標籤中，若為<input>或<img>的話，需要自行加上'/'關閉標籤。

註解方式

const element = (

  /* 
  多行
  註解
  */
// 單行註解
 <content
      /* 
  多行
  註解
  */
 name={formatName(user)}// 單行註解
  />
);

樣式使用

在JSX中若要引用CSS樣式的話，用兩個{}包住，第一個{}是JSX 語法，第二個為JavaScript物件，命名方式為駝峰式命名法，多個樣式要引用的話用'，'做區隔。

<div className="greeting" style={{fontSize:'36px',fontWeight:'bold'}}>
     <p>Hello {formatName(user)}</p>  
</div>