React入门基础+练习 (一)

一、关于react

1.1 react相关文档

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

1.2 react是什么？

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

1.3 react的特点？

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

1. 使用jsx创建react元素
2. 将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注意事项

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