React基本使用、jsx语法介绍

发布于：2022-12-12 ⋅ 阅读:(545) ⋅ 点赞:(0)

文章目录

1. 第一个 react 应用

引入文件：

react 开发需要引入多个依赖文件，其中 react.js、react-dom.js 这两个文件是我们创建 react 应用程序必须要引入的依赖文件。

# react.js 是核心库，提供创建元素，组件等功能，把数据转成虚拟dom
	+ https://unpkg.com/react@17/umd/react.development.js
# react-dom.js 提供DOM相关功能，针对网页开发，把虚拟dom转化成html，并且挂载到页面中
	+ https://unpkg.com/react-dom@17/umd/react-dom.development.js

下载对应的 react.js 和 react-dom.js 的开发版本的 js 类库文件到本机中后，通过 script 引入到当前的网页中。

// React 的核心库   生成虚拟dom
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
//DOM 相关的功能  虚拟dom转为真实的dom，挂载到页面中
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

使用：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第1个react应用</title>
  <!-- 1.引入react库文件 核心文件和dom解析文件 引入的顺序不能错 -->
  <script src="./js/react.js"></script>
  <script src="./js/react-dom.js"></script>
  <style>
    .title {
      color: red;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <!-- 2.指定虚拟dom转为真实的dom挂载到页面的根节点 -->
  <div id="root"></div>

  <!-- 3.react界面展示 -->
  <script>
    // 生成一个虚拟dom  React.createElement 方法来生成虚拟dom
    const h = React.createElement
    // 属性中不能使用class，要用className,因为class在js中它是一个定义类的关键词
    // h(标签类型，标签属性，子元素)
    // const vnode = h('div', { className: 'title' }, '我是react应用')
    const vnode = h('ul', {},
      h('li', {}, h('strong', {}, '新闻1')),
      h('li', {}, '新闻2'),
      h('li', {}, '新闻3'),
    )

    // 4.把react中的虚拟dom转成真实的dom并且挂载到页面根节点中
    // ReactDOM.render(虚拟dom,容器)
    ReactDOM.render(vnode, document.getElementById('root'))
  </script>

</body>

</html>

在这里插入图片描述

注意：

  1. React.createElement 的参数有三个，分别为标签名称、标签属性和子元素。
  2. 属性中不能使用class，要用className,因为class在js中它是一个定义类的关键词。

2. jsx

2.1 jsx 介绍

由于通过 React.createElement() 方法创建的 React 元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

React使用 JSX 来替代常规的 JavaScript，JSX 可以理解为的 JavaScript 语法扩展（超集），它里面的标签申明要符合 XML 规范要求。

  • jsx浏览器认识吗？

    答：浏览器只能识别 js，对于jsx不能识别。

  • 浏览如何来识别jsx呢？

    答：react 工程化中内置了一个将 jsx => js 的编译工具：babel(库)

React不一定非要使用JSX，但它有以下优点：

  1. JSX 执行更快，因为它在编译为JavaScript代码后进行了优化
  2. 它是类型安全的，在编译过程中就能发现错误
  3. 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
  4. jsx 语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行

2.2 使用 jsx 重构页面显示结构

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第1个react应用</title>
  <!-- 1.引入react库文件 核心文件和dom解析文件 引入的顺序不能错 -->
  <script src="./js/react.js"></script>
  <script src="./js/react-dom.js"></script>
  <!-- 2.引入babel解析 -->
  <script src="./js/babel.js"></script>
</head>

<body>
  <!-- 3.指定虚拟dom转为真实的dom挂载到页面的根节点 -->
  <div id="root"></div>

  <!-- 4.react界面展示 -->
  <!-- 如果使用jsx则一定要把type类型修改为text/babel -->
  <script type="text/babel">
    // 生成一个虚拟dom  jsx
    // jsx浏览不能直接解析 需要一个babel解析器，解析
    // jsx它必须要有一个顶层元素包裹
    // const vnode = <div>你好React</div>
    const vnode = (
      <div>
        <h3>你好React</h3>
        <ul>
          <li>新闻1</li>
          <li>新闻2</li>
        </ul>
      </div>
    )

    // 5.把react中的虚拟dom转成真实的dom并且挂载到页面根节点中
    // ReactDOM.render(虚拟dom,容器)
    ReactDOM.render(vnode, document.getElementById('root'))
  </script>

</body>

</html>

在这里插入图片描述

2.3 jsx 表达式

描述：

在 jsx 语法中，jsx 表达式要把 JS 代码写到 { } 中，所有标签必须要闭合。

使用：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第1个react应用</title>
  <!-- 1.引入react库文件 核心文件和dom解析文件 引入的顺序不能错 -->
  <script src="./js/react.js"></script>
  <script src="./js/react-dom.js"></script>
  <!-- 引入babel解析 -->
  <script src="./js/babel.js"></script>
</head>

<body>
  <!-- 2.指定虚拟dom转为真实的dom挂载到页面的根节点 -->
  <div id="root"></div>

  <!-- 3.react界面展示 -->
  <!-- 如果使用jsx则一定要把type类型修改为text/babel -->
  <script type="text/babel">
    // jsx表达式 ： {表达式}
    let username = '张三'
    const run = () => 'run方法'
    const age = 11

    const vnode = (
      <div>
        {
          // 单行注释
          /* 多行注释 */
        }
        <h3>你好React -- {username}</h3>
        {/* 字符串拼接 */}
        <div>{'aa' + 'bb' + username}</div>
        {/* 运算 */}
        <div>{1 + 1}</div>
        {/* 调用方法 */}
        <div>{run()}</div>
        {/* 3目运算，表达式中不能使用 for while if等块语句 3目运算在jsx中使用非常非常多 */}
        <div>{age < 10 ? '未成年' : <h3>成年</h3>}</div>
      </div>
    )

    // 把react中的虚拟dom转成真实的dom并且挂载到页面根节点中
    ReactDOM.render(vnode, document.getElementById('root'))
  </script>

</body>

</html>

在这里插入图片描述

2.4 jsx 动态属性赋值

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第1个react应用</title>
  <!-- 1.引入react库文件 核心文件和dom解析文件 引入的顺序不能错 -->
  <script src="./js/react.js"></script>
  <script src="./js/react-dom.js"></script>
  <!-- 引入babel解析 -->
  <script src="./js/babel.js"></script>
  <style>
    .active {
      color: red;
    }

    .title {
      font-size: 30px;
    }
  </style>
</head>

<body>
  <!-- 2.指定虚拟dom转为真实的dom挂载到页面的根节点 -->
  <div id="root"></div>

  <!-- 3.react界面展示 -->
  <!-- 如果使用jsx则一定要把type类型修改为text/babel -->
  <script type="text/babel">

    const title1 = '我是er个标题'
    const title = '我是一个标题'
    const cname = 'active'
    const html = '<h3>我是一个标题</h3>'

    const vnode = (
      <div>
        <div title={title}>{title}</div>
        {/* jsx中如果你的属性为一个动态的值，则原来的引号不要写，用单个花括号,花括号中间写表达式 */}
        <img src="http://img.1314000.cn/face.png" title={title} />
        {/* 
          在jsx中如果你用class定义外部样式名称，则class==>className,因为class它是js中的关键词
          如果有多个class名称，不管动态和静态，只能写一个。如果有多个，并且动态和静态属性都有，
          则采用下面这种写法，注意 title 后面有空格
        */}
        <div className={'title ' + cname}>{title}</div>
        {/* 如果你要对于一个class样式进行开关操作，需要用到3目，手动更改 true 和 false 达到效果 */}
        <div className={false ? 'active' : ''}>{title}</div>
        {/* style 内联样式，在jsx中，只能写对象 */}
        <div style={{ color: 'blue', fontSize: '30px' }}>我是一个标题</div>
        {/*
        表单项中的 label 标签，在书写 for 属性时，在 jsx 中换成 htmlFor
        因为 for 是关键字，不能用
        */}
        <div>
          <label htmlFor="username">账号：</label>
          <input type="text" id='username' />
        </div>
        {/*
          html不转义输出，花括号中的下划线是两个
          dangerouslySetInnerHTML={{__html:html字符串}}
          使用它有一定的安全问题，xss攻击
        */}
        {/*转义输出*/}
        <div>{html}</div>
        {/*不转义输出*/}
        <div dangerouslySetInnerHTML={{ __html: html }}></div>
      </div>
    )

    // 把react中的虚拟dom转成真实的dom并且挂载到页面根节点中
    ReactDOM.render(vnode, document.getElementById('root'))
  </script>

</body>

</html>

在这里插入图片描述

2.5 jsx 列表渲染

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>第1个react应用</title>
  <!-- 1.引入react库文件 核心文件和dom解析文件 引入的顺序不能错 -->
  <script src="./js/react.js"></script>
  <script src="./js/react-dom.js"></script>
  <!-- 引入babel解析 -->
  <script src="./js/babel.js"></script>
</head>

<body>
  <!-- 2.指定虚拟dom转为真实的dom挂载到页面的根节点 -->
  <div id="root"></div>

  <!-- 3.react界面展示 -->
  <!-- 如果使用jsx则一定要把type类型修改为text/babel -->
  <script type="text/babel">
    const users = [
      '张三',
      '李四',
      '王五'
    ]

    // const users = [
    //   '张三',
    //   '李四',
    //   '王五'
    // ].map(item => (<li key={item}>{item}</li>))

    const vnode = (
      <div>
        {/* 
        列表渲染 -- 就是使用数组方法中的map进行映射就可以 
        列表渲染，一定要在顶层元素中添加一个key，为了提升数据比对时的性能 dom diff性能
        */}
        {/*<div>{users}</div>*/}
        <div>{
          users.map(item => (<li key={item}>{item}</li>))
        }</div>
      </div>
    )

    // 把react中的虚拟dom转成真实的dom并且挂载到页面根节点中
    ReactDOM.render(vnode, document.getElementById('root'))
  </script>

</body>

</html>

在这里插入图片描述

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布