React入門總結

zhouzhou發表於2019-01-31
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`)
);

相關文章