react 01 初学react

react渲染页面方式

创建容器->创建虚拟DOM->渲染虚拟DOM到页面

react引库

java 复制代码

  <!-- 这三行代码分别引入了 React、ReactDOM 和 Babel Standalone 库。 -->
  <!-- React 用于构建用户界面。 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" ></script>
  <!-- ReactDOM 用于在浏览器中渲染 React 组件。 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  <!-- Babel Standalone 用于在浏览器中即时编译 JSX 语法。 --> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" ></script>

创建虚拟DOM方式

1.采用JS创建

java 复制代码

const VDOM = React.creatElement('h1',{id:'title'},React,createElement('span',{},'Hello,react'))

2.采用JSX创建

java 复制代码

const  VDOM = <h1 title='test'><span>hello ,React</span></h1>;

显而易见第二种方式更加简单，所以常用JSX书写

jsx语法规则

1.定义虚拟DOM时。不要写引号。

2.标签中混入JS表达式时要用{ }。

3.样式的类名指定不要用class,要用className。

4.内联样式，要用style={{key:value}}的形式去写。

5.只有一个根标签。

6.标签必须闭合。

7.标签首字母

(1)若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

示例代码

java 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 准备一个"容器" -->
  <div id="test"></div>


  <!-- 这三行代码分别引入了 React、ReactDOM 和 Babel Standalone 库。 -->
  <!-- React 用于构建用户界面。 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
  <!-- ReactDOM 用于在浏览器中渲染 React 组件。 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  <!-- Babel Standalone 用于在浏览器中即时编译 JSX 语法。 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

  <script type="text/babel">
    //1.创建虚拟DOM
    const VDOM = <h1>hello React</h1>;

    // 2. 获取容器元素
    const container = document.getElementById('test');

    // 3. 创建 React 根并渲染
    const root = ReactDOM.createRoot(container);
    root.render(VDOM);
  </script>
</body>

</html>

结果会打印标题hello React

hello React