React入門總結

官方文檔：React

概念

React元素

元素是構成 React 應用的最小單位。

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

JSX

一種 JavaScript 的語法擴展。

你可以任意地在 JSX 當中使用 JavaScript 表達式，在 JSX 當中的表達式要包含在大括號裏。
在編譯之後呢，JSX 其實會被轉化爲普通的 JavaScript 對象。
JSX 屬性
你可以使用引號來定義以字符串爲值的屬性：

const element = <div tabIndex="0"></div>;

也可以使用大括號來定義以 JavaScript 表達式爲值的屬性：

const element = <img src={user.avatarUrl} />;

組件

函數定義

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

類定義

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

props

當React遇到的元素是用戶自定義的組件，它會將JSX屬性作爲單個對象傳遞給該組件，這個對象稱之爲“props”。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

如上，name屬性。

組件名稱必須以大寫字母開頭。

組合組件

組件的返回值只能有一個根元素。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);