React学习[一]

React概述

React是一个用于构建用户界面的JavaScript库。
用户界面:HTML页面(前端)；
React主要用来写HTML页面，或构建Web应用；
如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。

React特点

声明式

你只需要描述UI（HTML）看起来是怎么样，就跟写HTML一样
React只负责渲染UI，并在数据变化时更新UI

const jsx = <div className="app">
	<h1>Hello React! 动态变化数据: {count}</h1>
</div>

基于组件

组件是React最重要的内容
组件表示页面中的部分内容
组合、复用多个组件，可以实现完整的页面功能

学习一次，随处可用

使用React可以开发Web应用
使用React可以开发移动端原生应用( react-native )
使用React可以开发VR(虚拟现实)应用(react360)

React基本使用

安装命令：npm i react react-dom
react包是核心，提供创建元素、组件等功能
react-dom包提供DOM相关功能等

React使用

1、引入react和react-dom两个js文件

<script src="./node_ modules/react/umd/react.development.js"></ script>
<script src="./node_ modules/react-dom/umd/react-dom.development.js"></ script>

2、创建react元素
3、渲染react元素到页面中

<div id="root"></div>
<script>
	const title = React.createElement('hl', null, 'Hello React')
	ReactDOM.render(title, document.getElementById('root'))
</script>

方法说明

react.createElement()

// 返回值： react元素
// 参数1： 要创建的react元素名称，同html名称是一样的
// 参数2： 该react元素的属性
// 第3个及其以后的参数： 元素节点或子节点
const el = React.createElement('h1', {title:'标题'}, 'Hello React')

ReactDOM.render()

// 3、渲染React元素
// 参数1： 要渲染的react元素
// 参数2：挂载点(DOM对象，用于指定渲染到页面中的位置)
ReactDOM.render(el, document.getElementById('root'))

React脚手架意义

脚手架初始化项目

初始化项目命令：npx create-react-app my-app(项目名字)(推荐使用)，create-react-app是脚手架名字，不能更改；
npm init react-app my-app；
yarn create react-app my-app；
yarn是Facebook发布的包管理器，可以看作npm的替代品，功能与npm相似；具有快速、可靠和安全的特点

出现Happy hacking表示成功
启动项目，在项目根目录执行命令npm start或yarn start(安装有yarn的使用yarn start)，在此之前，需要使用命令cd my-app进入根目录

npx命令介绍

目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供的命令
现在：无需安装脚手架包，就可以直接使用这个包提供的命令

在脚手架中使用react

1、导入react和react-dom两个包；

import React from 'react'
import ReactDOM from 'react-dom'

2、调用React.createElement()方法创建react元素；
3、调用ReactDOM.render()方法渲染react元素到页面中。

JSX

JSX的基本使用

1.繁琐不简洁。
2.不直观，无法一眼看出所描述的结构。
3.不优雅，用户体验不爽。

React.createElement(
	'div',
	{className: 'shopping-list'},
	React.createElement('h1', null, 'shopping List'),
	React.createElement(
		'ul' ,
		nul1,
		React.createElement('li', null, 'Instagram'),
		React.createElement('li', null, 'WhatsApp')
	)
)

JSX

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML ( HTML )格式的代码。
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率。

<div className="shopping-list">
	<h1>Shopping List</h1>
	<ul >
		<li> Instagram</li>
		<li>WhatsApp</li>
	</ul>
</div>

JSX是react的核心

使用步骤

1.使用JSX语法创建react元素

// 使用JSX语法，创建react元素:
const title = <h1>Hello JSX</h1>

2.使用ReactDOM.render0方法渲染react元素到页面中

// 渲染创建好的React元素
ReactDOM.render(title, root)

注意：

• React元素的属性名使用驼峰命名法
• 特殊属性名：class -> className(18版本可用class),for -> htmlFor，tabindex -> tabIndex
• 没有子节点的react元素可以用/>结束
• 推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

// 使用小括号包裹JSX
const title = (< h1 > Hello JSX < /h1>)

JSX中使用JavaScript表达式

嵌入式JS表达式

数据存储在JS中
语法：{JavaScript表达式}
注意：语法中是单大括号，不是双大括号

const name = 'Jack'
const dv = (<div>你好，我叫{name}</div>)

注意点：

• 单大括号中可以使用任意的JavaScript表达式
• JSX自身也是JS表达式
• JS中的对象是一个例外，一般只会出现在style属性中
• 不能在{}中出现语句，比如if、for等

const h1 = <h1>JSX</h1>
const dv = (<div>嵌入表达式：{h1}</div>)

JSX的条件渲染

根据不同的条件来渲染不同的JSX结构
可以发现，写JSX的条件渲染与我们之前编写代码的逻辑是差不多的，根据不同的判断逻辑，返回不同的 JSX结构，然后渲染到页面中
可以使用if/else或三元运算符或逻辑与运算符来实现

// 条件渲染
const isLoading = true
const loadData = () => {
    if (isLoading) {
        return <div>数据加载中，请稍后...</div>
    }
    return (
        <div>数据加载完成，此处显示加载后的数据</div>
    )
}
// 三元表达式
// const loadData = () => {
//     return isLoading ? 
数据加载中，请稍后...
 : 
数据加载完成，此处显示加载后的数据
// }
// 逻辑与运算符
const loadData = () => {
    return isLoading && <div>数据加载中，请稍后...</div>
}
const dv = (<div>{loadData()}</div>)
const title = (
    <h1>
        条件渲染：{dv}
    </h1>
)
ReactDOM.render(title, document.getElementById('root'))

JSX的列表渲染

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

// 列表渲染
const songs = [
    { id: 1, name: '1' },
    { id: 2, name: '2' },
    { id: 3, name: '3' }
]
const list = (
    <ul>
        {songs.map(item => <li key={item.id} > {item.name}</li>)}
    </ul >
)
ReactDOM.render(list, document.getElementById('root'))

JSX的样式处理

• 行内样式 ——style

在style里面我们通过对象的方式传递数据
这种方式比较的麻烦，不方便进行阅读，而且还会导致代码比较的繁琐

<h1 style={{color:'red', backgroundcolor:'skyblue'}}>
	JSX的样式处理
</h1>

• 类名——className

创建CSS文件编写样式代码
在js中进行引入，然后设置类名即可

<h1 className="title">
	JSX的样式处理
</h1>

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