React JSX

What is JSX?

JSX stands for JavaScript XML.

JSX allows us to write HTML in React.

JSX makes it easier to write and add HTML in React.

Hint: 在React裡面 ,原本的class標籤要改用 className, for標籤要改用 htmlFor

你可以在 JSX 的大括號中寫入任何合法的 JavaScript expression

可以直接在大括號內使用變數名稱 或 方法

Example:

const App = () =>{

  const buttonText ='click me!';

  const labelText = 'Enter Name :';

  return(

    <div>

      <label className="label" htmlFor="name">

        {labelText}

      </label>

      <input id="name" type="text"></input>

      <button style={{ backgroundColor: 'blue', color: 'white'}}>

        {getButtonText()}

      </button>

    </div>

  );

};

React DOM 預設會在 render 之前 escape 所有嵌入在 JSX 中的變數。這保證你永遠不會不小心注入任何不是直接寫在你的應用程式中的東西。所有變數都會在 render 之前轉為字串，這可以避免 XSS（跨網站指令碼）攻擊。