React学习

React 的特点

1.声明式

只需要描述UI，React负责渲染UI，并在数据变化时更新UI

const jsx = <div className="app">
    <h1>Hello React! {count}</h1>
</div>

2.基于组件

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

React的基本使用

1.React的安装

安装命令：npm i react react-dom

react 包是核心，提供创建元素、组件等功能
react-dom 包提供DOM相关功能等

2.React的使用

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

创建React元素并渲染Html页面

<div id='root'>
</div>
<script>
    // 参数1： 元素名 参数2： 元素属性 参数3： 元素的子节点
	const title = React.createElement('h1',null,'Hello React.')
    
    // 参数1： 要渲染的React元素 参数2： DOM对象，用于指定渲染的对象
    ReactDOM.render(title, document.getElementById('root'))
</script>

3.React 脚手架的使用

使用React脚手架初始化项目

初始化项目，命令：npx create-react-app my-app

启动项目，在项目目录中执行命令：npm start
npx 命令

npm v5.2.0 引入的语法糖
在脚手架中使用React

导入react和react-dom
```
import React from 'react'
import ReactDOM from 'react-dom'
```
调用React.createElement()方法创建react元素

调用ReactDOM.render()方法渲染react元素到页面中

JSX

1.JSX的基本使用

不推荐使用createElement()方法，推荐使用JSX（JavaScript XML）的代码格式，也即是html的格式

JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展
需要使用babel编译处理后，才能在浏览器环境中使用
create-react-app脚手架中已经默认有该配置，无需手动配置
编译JSX语法的包为：@babel/preset-react

2.JSX的使用步骤

使用JSX语法创建react元素

const title = <h1>Hello JSX</h1>

使用ReactDOM.render()方法渲染react元素到页面

ReactDOM.render(title, root)

3.JSX使用注意

React元素的属性名使用驼峰命名法
特殊属性名：class->className、for->htmlFor、tabindex->tabIndex
没有子节点的元素可以直接使用 / 结束
推荐使用小括号包裹JSX语法

4.JSX使用JavaScript表达式

语法：{JavaScript表达式}

const name = 'Alex'
const title = (<h1>Hello {name}</h1>)

5.JSX的条件渲染

const isLoading = false
const loadData = () => {
    if(isLoading){
        return (<div>loading...</div>)
    }
    
    return (<div>success</div>)
}

const title = (<h1>条件渲染:{loadData}</h1>)

6.JSX的列表渲染

const songs = [
    {id: 1, name: '空山新雨后'},
    {id: 2, name: '有酒今朝醉'},
    {id: 3, name: '我可以抱你吗'},
    {id: 4, name: '白月光与朱砂痣'}
]

const list = (<ul>
    	{songs.map(item=><li key={item.id}>{item.name}</li>)}
    </ul>)

7.JSX的样式处理

行内样式——style

<h1 style={{color: 'red', backgroundColor: 'skybule'}}>
    JSX中形内样式
</h1>

类名——className（推荐）

<h1 className='red'>
    JSX中类名样式
</h1>