react基本使用

发布日期: 2021-11-02

文章字数: 379

阅读时长: 1 分

阅读次数:

react基本使用

// 新建文件夹 使用npm init
// cnpm i react react-dom

<!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>Document</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>
      // 引入react react-dom
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
  /**
   * 创建react元素
   * 参数1 元素名称
   * 参数2 元素属性
   * 参数3 元素的子节点
  */
  const title = React.createElement('h1', null, '你好 react')
  /**
   * 渲染dom元素
   * 参数1 要渲染的react元素
   * 参数2 挂载点
  */
  ReactDOM.render(title, document.getElementById('root'))
  // open in browser 到浏览器即可看到 你好 react
</script>

<!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>Document</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
  /**
   * 创建react元素
   * 参数1 元素名称
   * 参数2 元素属性
   * 第三个及以后的参数：元素的子节点， 可写多个
  */
  const title = React.createElement('p',
    { title: 'p标签', id: 'p1' },
    React.createElement('h3', null, '我是span'),
    React.createElement('li', null, 'li'),
    React.createElement('div', null, 'div')
  )
  /**
   * 渲染dom元素
   * 参数1 要渲染的react元素
   * 参数2 挂载点
  */
  ReactDOM.render(title, document.getElementById('root'))
    // 这里无法直接使用jsx，脚手架可以直接使用
</script>