Cheng

Appearance

基础 ​

基本使用 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx语法</title>
  </head>
  <body>
    <!-- 容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
      crossorigin
    ></script>
    <!-- 引入babel,用于讲jsx转换成js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      let data = ["Apple", "orange", "banana"];
      // 创建虚拟dom
      const VDom = (
        <div>
          <h1>列表</h1>
          <ul>
            {data.map((item, index) => {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      );
      //渲染虚拟dom到页面
      ReactDOM.render(VDom, document.getElementById("test"));
    </script>
  </body>
</html>

创建虚拟 Dom 的两种方式 ​

  • js
html
<script type="text/javascript">
  //1.使用 React 提供的 API 创建虚拟DOM
  const VDOM = React.createElement(
    "h1",
    { id: "title" },
    React.createElement("span", {}, "Hello,React")
  );
  //2.渲染虚拟DOM到页面
  ReactDOM.render(VDOM, document.getElementById("test"));
</script>
  • jsx
html
<script type="text/babel">
  //1.创建虚拟DOM
  const VDOM = (
    <h1 id="title">
      <span>Hello,React</span>
    </h1>
  );
  //2.渲染虚拟DOM到页面
  ReactDOM.render(VDOM, document.getElementById("test"));
</script>

jsx 语法规则 ​

  1. 标签中混入 JS 表达式需要使用 {}
  2. 指定类名不用 class，使用 className
  3. 内联样式，使用 style={ { key: value } } 的形式
  4. 只能有一个根标签
  5. 组件标签首字母大写且需提前定义