React：JSX

JSX

App中return的为JSX代码，看起来类似html；

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hi i am a React App</h1>
    </div>
  );
}

export default App;

JSX中React的原本用法

每次建立element都需要create，较繁琐；
故使用JSX作为创建element的方法；

import React from 'react';
import './App.css';

function App() {
  return React.createElement('div',{className:'App'},React.createElement('h1',null,'Hi I\'m a React App'));
}
export default App;

JSX——React——HTML

JSX的限制

（1）使用className代替HTML中的class，因为class在js中有别的用处；
（2）返回的内容必须在一个框框中，如下p在 </ div > 外面，就不行；

function App() {
  return (
    <div className="App">
      <h1>Hi i am a React App!</h1>
      <p>It is working!</p>
    </div>
    <p>It is working!</p>
  );
  //return React.createElement('div',{className:'App'},React.createElement('h1',null,'Hi I\'m a React App'));
}