React入门基础+练习 (一)

文章目录

一、关于react
- 1.1 react相关文档
- 1.2 react是什么？
- 1.3 react的特点？
二、react的脚手架
三、react元素的创建
- 练习
四、JSX
- 4.1 JSX是什么
- 4.2 JSX的使用
- 4.3 JSX中使用JavaScript表达式
- - *4.3.1 可以访问对象的属性*
  - *4.3.2 可以访问数组下标*
  - *4.3.3 可以调用方法*
  - *4.3.4 可以使用三元表达式*
- 4.4 条件渲染
- - *4.4.1 if/else*
  - *4.4.2 三元表达式*
  - *4.4.3 &&运算符*
- 4.5 列表渲染
- 4.5 JSX注意事项

一、关于react

1.1 react相关文档

React文档点击跳转
React中文文档点击跳转

1.2 react是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
简单来说：React 是一个用于构建用户界面（HTML 页面）的 JavaScript 库

1.3 react的特点？

声明式设计：
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件
组件化:
构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
高效：
React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活：
无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。

二、react的脚手架

FaceBook的React团队官方出的一个构建React应用的脚手架工具（create react app）
命令：npx create-react-app 文件名
运行：npm start

三、react元素的创建

通过React.createElement进行创建

React.createElement('html元素名',{属性1:属性值1,属性2:属性值2...},子元素...)

在index.js 中

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'// 创建元素
const title = React.createElement('h1', null, 'hello react')// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

页面显示效果：

练习

创建如下图所示的一个结构

const li = React.createElement('li', null, 'li1')
const li1 = React.createElement('li', null, 'li2')
const ul = React.createElement('ul', null, li, li1)
// 渲染react元素
ReactDOM.render(ul, document.getElementById('root'))

四、JSX

4.1 JSX是什么

通过上述对react元素的创建，我们发现，createElement 的问题，繁琐、可读性差
对于这个问题，我们可以通过JSX来解决，JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码（与HTMl相同）。 JSX是react的核心内容

4.2 JSX的使用

使用jsx创建react元素
将react元素渲染到页面中

import ReactDOM from 'react-dom'//react17版本之后，使用jsx不需要额外导入React
const title = <h1>JSX的使用</h1>
ReactDOM.render(title, document.getElementById('root'))

页面显示效果：

4.3 JSX中使用JavaScript表达式

js表达式，像访问数组下标arr[1]、访问对象obj.name等都属于js表达式
下面是针对各种情况的一个使用：

4.3.1 可以访问对象的属性

const obj = {name: '对象属性的访问'
}
const div= (<h1>js表达式：{obj.name}</h1>
)

页面显示效果：

4.3.2 可以访问数组下标

const arr = ['数组1', '数组2']
const div = (<h1>js数组：{arr[1]}</h1>
)

页面显示效果：

4.3.3 可以调用方法

function fn () {return '方法'
}
const div = <h1>js方法：{fn()}</h1>
ReactDOM.render(div, document.getElementById('root'))

页面显示效果：

4.3.4 可以使用三元表达式

const num = 20
const div = (<h1>js三元表达式：{num >= 18 ? '是' : '否'}</h1>
)

页面显示效果：

4.4 条件渲染

条件渲染可以分为：三元表达式、if/else、&&运算符

4.4.1 if/else

const controll = false
const controllBoolean = () => {if (controll) {return <p>controll————true</p>} else {return <p>controll————false</p>}
}

4.4.2 三元表达式

const controll = false
const controllBoolean = () => {return controll ? (<p>controll——true</p>) : <p>controll——false</p>
}const div = <div>三元表达式:{controllBoolean()}</div>

页面显示效果：

4.4.3 &&运算符

const controll = false
const controllBoolean = () => {return controll && <p>controll——true</p>
}const div = <div>&&运算符:{controllBoolean()}</div>

4.5 列表渲染

在react对于列表的渲染，我们使用map方法

const list = [{ id: 1, name: 'list1' },{ id: 2, name: 'list2' },{ id: 3, name: 'list3' }
]const div = (<div><ul>{list.map(item => <li>{item.name}</li>)}</ul></div>
)

页面显示效果：

列表渲染时应该给重复渲染的元素添加key属性，key属性的值要保证唯一(key 值尽量避免使用 index 下标)

4.5 JSX注意事项

JSX必须要有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）或者<React.Fragment></React.Fragment>
所有标签必须结束，如果是单标签可以使用/>结束
JSX中语法更接近与JavaScript，属性名采用驼峰命名法
JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止 JS 自动插入分号的 bug