以最簡單的例子來說

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

如果不是用JSX來寫的話，正規的JS要這樣來寫，才能像上面一樣

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('hello-example'));

在上面的JSX裡面，render裡面這也是JSX特有的寫法，這邊也可以帶入變數，不過React不是雙向綁定，想在畫面上即時更新必須先學state，這邊就沒VUE來的方便。

另外JSX的寫法return 裡面不能有2個父級標籤，不然會報錯，也就是說如果你這樣寫是不可以的

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
       <div>
        Hello 2
      </div>
      
    );
  }
}

只能夠

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      <div>
        Hello 2
      </div>
      </div>

      
    );
  }
}

標籤用法

1.使用者定義的 Component 必須由大寫字母開頭

//這樣寫是錯誤的
class helloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <helloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

解決這個問題

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

2.註解

// 單行註解

/*
  多行註解
*/

class HelloMessage extends React.Component {
  render() {
    return (
    {/* 若是在子元件註解要加大括號{}  */}
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

3.樣式使用

class HelloMessage extends React.Component {
  render() {
    return (
    {/* 寫style的話必須用{{ }}這樣來寫  */}
    
      <div style={{ color: '#FFFFFF', fontSize: '30px'}}>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

參考:https://zh-hant.reactjs.org/docs/jsx-in-depth.html
今天有點趕，本來想寫更完整的，下班完立刻補今天的鐵人，