react基本使用、jsx语法介绍

文章目录

1. 第一个 react 应用
2. jsx

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

//DOM 相关的功能  虚拟dom转为真实的dom，挂载到页面中

使用：

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>
  
  <script src="./js/react.js">script>
  <script src="./js/react-dom.js">script>
  <style>
    .title {
      color: red;
      font-size: 30px;
    }
  style>
head>

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

  
  <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>

在这里插入图片描述

注意：

React.createElement 的参数有三个，分别为标签名称、标签属性和子元素。
属性中不能使用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，但它有以下优点：

JSX 执行更快，因为它在编译为JavaScript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
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>
  
  <script src="./js/react.js">script>
  <script src="./js/react-dom.js">script>
  
  <script src="./js/babel.js">script>
head>

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

  
  
  <script type="text/babel">
    // 生成一个虚拟dom  jsx
    // jsx浏览不能直接解析 需要一个babel解析器，解析
    // jsx它必须要有一个顶层元素包裹
    // const vnode = 你好React
    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>
  
  <script src="./js/react.js">script>
  <script src="./js/react-dom.js">script>
  
  <script src="./js/babel.js">script>
head>

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

  
  
  <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>
  
  <script src="./js/react.js">script>
  <script src="./js/react-dom.js">script>
  
  <script src="./js/babel.js">script>
  <style>
    .active {
      color: red;
    }

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

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

  
  
  <script type="text/babel">

    const title1 = '我是er个标题'
    const title = '我是一个标题'
    const cname = 'active'
    const html = '我是一个标题
'

    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>
  
  <script src="./js/react.js">script>
  <script src="./js/react-dom.js">script>
  
  <script src="./js/babel.js">script>
head>

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

  
  
  <script type="text/babel">
    const users = [
      '张三',
      '李四',
      '王五'
    ]

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

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

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

body>

html>

在这里插入图片描述

相关阅读:
Vue 组件化
 Dynamics 365应用程序开发 7. 使用Web API开发应用程序
 安装Oracle、连接Oracle遇到的一系列问题
 Mock单测含义
 Java练手任务总结【20】
Android---DVM以及ART对JVM进行优化
 linux系统操作/基本命令/vim/权限修改/用户建立
 IDEA启动报错Failed to create JVM. JVM path的解决办法
 Oracle SQL执行计划操作（6）——并行相关操作
 Vue----组件
原文地址：https://blog.csdn.net/weixin_45605541/article/details/126951516