1.React 基础

1.1React 概述

1.1.1什么是React?

React 是一个用于构建用户界面的 JavaScript 库。
用户界面：HTML页面（前端）
React 主要用来写HTML页面，或构建Web应用

1.1.2React的特点

声名式
基于组件
学习一次，随处使用
- 声明式:
  你只需要描述 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（虚拟现实）应用（react 360）

2. React 的基本使用

2.1React 的安装

安装命令：npm i react react-dom

新建一个文件,输入命令,会初始化新城一个node_modules包,里面包含着所有的配置文件,以及两个重要的文件react与react-dom; 如图:
在这里插入图片描述

2.2 React 的使用

react 包是核心，提供创建元素、组件等功能
react-dom 包提供 DOM 相关功能等
type=“text/babel”

引入 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">.
<!-- 加上下放这个标签,
	 会解析JSX语法,
	 意思就是可以在js中解析html标签,
	 用法是给script标签
	 加一个type="text/babel" -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"</script>
</script>

创建 React 元素
渲染 React 元素到页面中

<script type="text/babel">
        // 第二歩:创建一个react元素
        // 参数一:元素名称  
        // 参数二:元素属性
        // 参数三:元素的子节点
        //span标签为h1的子属性,比喻一下这种写法就相当于套娃
        const title = React.createElement('h1', null, "我是react欢迎来到",
            React.createElement('span', { title: '新建的属性' }, '我是新建的属性')
        )

        // 渲染react元素
        // 参数一:要渲染的react元素
        // 参数二:挂载点
        ReactDOM.render(title, document.getElementById('app'))
        
        //JSX写法
        ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('dog'))
    </script>

2.3 方法说明

React.createElement() 说明（知道一下就行,后期就不用这种方法）

返回值：React元素
第一个参数：要创建的React元素名称
第二个参数：该React元素的属性
第三个及其以后的参数：该React元素的子节点
const el = React.createElement(‘h1’, { title: ‘标题’ }, ‘Hello React’)

ReactDOM.render() 说明

第一个参数：要渲染的React元素
第二个参数：DOM对象，用于指定渲染到页面中的位置
ReactDOM.render(el, document.getElementById(‘root’))

3. React 脚手架的使用

React 脚手架意义

脚手架是开发现代Web 应用的必备。
充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。

3.1 使用 React 脚手架初始化项目

三种创建命令方式:

推荐使用：npx create-react-app my-app
npm init react-app my-app
yarn create react-app my-app

初始化项目，命令：npx create-react-app my-app
启动项目，在项目根目录执行命令：npm/yarn start

npx 命令介绍:

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

3.3 在脚手架中使用 React

导入 react 和 react-dom 两个包。

import React from ‘react’
import ReactDOM from ‘react-dom’
调用 React.createElement() 方法创建 react 元素。
调用 ReactDOM.render() 方法渲染 react 元素到页面中。

4.JSX 的基本使用

4.1 createElement() 的问题

繁琐不简洁。
不直观，无法一眼看出所描述的结构。

不优雅，用户体验不爽。
下方比较:
createElement()创建的元素:

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

JSX:

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

1.2 JSX 简介

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

1.3 使用步骤

与之前的写法差不多,就是改变成了JSX语法,渲染跟之前一样没变

使用 JSX 语法创建 react 元素

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

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

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

1.4 注意点

React元素的属性名使用驼峰命名法
特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex 。
没有子节点的React元素可以用 /> 结束。
推荐：使用小括号包裹 JSX ，避免 JS 中的自动插入分号抱语法错误。

// 使用小括号包裹 JSX
const dv = (
	<div>Helo JSX</div>
)

5.JSX的列表渲染

使用ES6遍历数组的 map() 方法
注意:

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

// 列表渲染 使用map
const dataList = [
  {id:1,name: '张三',age:'26'},
  {id:2,name: '李四',age:'15'},
  {id:3,name: '王五',age:'17'},
  {id:4,name: '赵六',age:'22'}
]

const nameList = (
  // 两种添加样式的方法
  // 1.style添加
  // 2.className添加,在css文件中写样式,最后引入进来
  <ul className="ulList" style={{ fontSize: 32 }}>
    {dataList.map(item =>
      <li key={item.id}>
        名字:{item.name}
        年龄:{item.age}
      </li>
      )
    }
  </ul>
)
ReactDOM.render(nameList, document.getElementById('root'))