5.24-React基础

最新推荐文章于 2024-07-24 08:58:17 发布

晚安不熬夜了

最新推荐文章于 2024-07-24 08:58:17 发布

阅读量105

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/cjjaixuexi/article/details/117231530

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React

什么是React？

React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来

React基本使用

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

<body>
  <!-- 准备好一个“容器” -->
  <div id="text"></div>

  <!-- 引入 react 核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入 react-dom ，用于支持react操作dom -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引用babel，用于将jsx转换为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel"> /* 此处一定要写babel */
    // 1.创建虚拟 dom
    const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
    // 2.渲染虚拟dom到页面
    // 第一个参数是渲染哪个虚拟dom，第二个参数是容器
    ReactDOM.render(VDOM, document.getElementById('text'))
  </script>
</body>

</html>

React虚拟DOM的两种创建方式

第一种：使用jsx创建虚拟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>1-使用jsx创建虚拟DOM</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="text"></div>

  <!-- 引入 react 核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入 react-dom ，用于支持react操作dom -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转换为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel"> /* 这儿要写babel */
    // 1.创建虚拟 dom
    const VDOM = (  /* 这儿不要写引号，因为不是字符串 */
      <h1 id="title">
        Hello,React
      </h1>
    )
    // 2.渲染虚拟dom到页面
    // 第一个参数是渲染哪个虚拟dom，第二个参数是容器
    ReactDOM.render(VDOM, document.getElementById('text'))
  </script>
</body>

</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xTVz2RIH-1621859031304)(C:\Users\86157\AppData\Roaming\Typora\typora-user-images\image-20210524190735979.png)]$

第二种：使用js创建虚拟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>2-使用js创建虚拟DOM</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="text"></div>

  <!-- 引入 react 核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入 react-dom ，用于支持react操作dom -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转换为js -->
  <script src="../js/babel.min.js"></script>

  <script type="text/javascript">
    // 1.创建虚拟 dom
    // 第一个参数是标签名，第二个参数是标签属性，第三个属性标签内容
    const VDOM = React.createElement('h1', { id: 'title' }, 'hello,React')
    // 2.渲染虚拟dom到页面
    // 第一个参数是渲染哪个虚拟dom，第二个参数是容器
    ReactDOM.render(VDOM, document.getElementById('text'))
  </script>
</body>

</html>

在这里插入图片描述

但是用js创建虚拟DOM太过繁琐，若是我想让h1包含别的标签比如加一个p标签，使用jsx则只需要

<script type="text/babel"> /* 这儿要写babel */
    // 1.创建虚拟 dom
    const VDOM = (  /* 这儿不要写引号，因为不是字符串 */
      <h1 id="title">
        <span>Hello,React</span>
      </h1>
    )
    // 2.渲染虚拟dom到页面
    // 第一个参数是渲染哪个虚拟dom，第二个参数是容器
    ReactDOM.render(VDOM, document.getElementById('text'))
  </script>

在这里插入图片描述

而使用js创建虚拟DOM则需要

<script type="text/javascript">
    // 1.创建虚拟 dom
    // 第一个参数是标签名，第二个参数是标签属性，第三个属性标签内容
    const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'hello,React'))
    // 2.渲染虚拟dom到页面
    // 第一个参数是渲染哪个虚拟dom，第二个参数是容器
    ReactDOM.render(VDOM, document.getElementById('text'))
  </script>

在这里插入图片描述

可想而知若是还想包更多的标签js创建虚拟DOM有多繁琐

React脚手架

React脚手架意义

1.脚手架是开发现代Web应用的必备
2.充分利用 Webpack，Babel，ESLint等工具辅助项目开发
3.零配置，无需手动配置繁琐的工具即可使用
4.关注业务，而不是工具配置

使用React脚手架初始化项目

初始化项目，命令： npx create-react-app my-pro
	npx 目的：提升包内提供的命令行工具的使用体验
	原来：先安装脚手架包，再使用这个包中提供的命令
	现在：无需安装脚手架包，就可以直接使用这个包提供的命令
	create-react-app  这个是脚手架名称 不能随意更改
	my-pro  自己定义的项目名称

JSX的使用

JSX产生的原因

由于通过createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，用户体验不爽

JSX的概述

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

简单入门使用

先创建一个“容器”

<!-- 准备好一个“容器” -->
<div id="text"></div>

使用JSX语法创建react元素

const VDOM = (  /* 这儿不要写引号，因为不是字符串 */
      <h1 id="title">
        我是通过JSX创建的元素
      </h1>
    )

使用ReactDOM来渲染元素

ReactDOM.render(VDOM, document.getElementById('text'))

JSX语法

JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持

嵌入JS表达式

语法：{JavaScritp表达式}

举例：

<!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>嵌入JS表达式</title>
</head>

<body>
  <!-- 准备好一个“容器” -->
  <div id="text"></div>

  <!-- 引入 react 核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入 react-dom ，用于支持react操作dom -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转换为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel"> /* 这儿要写babel */
    let content = '插入的内容'
    // 1.创建虚拟 dom
    let VDOM = (  /* 这儿不要写引号，因为不是字符串 */
      <h1 id="title">
        我是通过JSX创建的元素+ {content}
      </h1>
    )
    // 2.渲染虚拟dom到页面
    // 第一个参数是渲染哪个虚拟dom，第二个参数是容器
    ReactDOM.render(VDOM, document.getElementById('text'))
  </script>
</body>

</html>

在这里插入图片描述

注意点：

- 只要是合法的js表达式都可以进行嵌入
- JSX自身也是js表达式
- 注意：js中的对象是一个例外，一般只会出现在style属性中
- 注意：在{}中不能出现语句

条件渲染

根据不同的条件来渲染不同的JSX结构

let isLoading = true
let loading = ()=>{
    if(isLoading){
        return <div>Loading...</div>
    }
    return <div>加载完成</div>
}

可以发现，写JSX的条件渲染与我们之前编写代码的逻辑是差不多的，根据不同的判断逻辑，返回不同的 JSX结构，然后渲染到页面中

列表渲染

如果需要渲染一组数据，我们应该使用数组的 map () 方法
注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
原则：map()遍历谁，就给谁添加key属性
注意：尽量避免使用索引号作为key

let arr = [{
    id:1,
    name:'三国演义'
},{
    id:2,
    name:'水浒传'
},{
    id:3,
    name:'西游记'
},{
    id:4,
    name:'红楼梦'
}]
let ul = (<ul>
    {arr.map(item => <li key={item.id}>{item.name}</li>)}
</ul>)
ReactDOM.render(ul,document.getElementById('root'))

样式处理

行内样式 -style

在style里面我们通过对象的方式传递数据

<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

类名 -className

创建CSS文件编写样式代码

.container {
    text-align: center
}

在js中进行引入，然后设置类名即可

import './css/index.css'

<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

小结

JSX是React的核心内容
JSX表示在JS代码中写HTML结构，是React声明式的体现
使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
推荐使用className的方式给JSX添加样式
码

.container {
    text-align: center
}

在js中进行引入，然后设置类名即可

import './css/index.css'

<li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>

小结

JSX是React的核心内容
JSX表示在JS代码中写HTML结构，是React声明式的体现
使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
推荐使用className的方式给JSX添加样式
React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能

晚安不熬夜了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.24-React基础

React什么是React？React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来React基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
复制链接

扫一扫

专栏目录