什么是React？
React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来
特点
- 声明式
你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI - 基于组件
组件时React最重要的内容，组件表示页面中的部分内容 - 学习一次，随处使用
使用React可以开发Web应用，使用React可以开发移动端
React基本使用
npm i react react-dom
- react 包是核心，提供创建元素，组件等功能
- react-dom 包提供DOM相关功能
基本使用
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
// 创建元素节点
let title = React.createElement('li', null, 'hellow react');
// 渲染到页面
ReactDOM.render(title, root)
React脚手架
React脚手架意义
- 脚手架是开发现代Web应用的必备
- 充分利用 Webpack，Babel，ESLint等工具辅助项目开发
- 零配置，无需手动配置繁琐的工具即可使用
- 关注业务，而不是工具配置
使用React脚手架初始化项目
- 初始化项目， npx create-react-app my-pro
- npx 目的：提升包内提供的命令行工具的使用体验
- npx 无需安装脚手架包，就可以直接使用这个包提供的命令
- 启动项目，在项目根目录执行命令： npm start
脚手架中使用React
import React from 'react'
import ReactDOM from 'react-dom'
// 创建元素
let h1 = React.createElement('h1',null,'这里是一个h1标题')
//渲染至节点中
ReactDOM.render(h1,document.getElementById('root'))
JSX语法
JSX是来描述页面的结构，我们一般在编写业务逻辑渲染页面的时候，需要涉及到传递值，调用函数，判断条件，循环等，这一些在JSX中都能得到支持
注意点
- 只要是合法的js表达式都可以进行嵌入
- JSX自身也是js表达式
- 注意：js中的对象是一个例外，一般只会出现在style属性中
- 注意：在{}中不能出现语句
要点：条件渲染，列表渲染
// 条件渲染
let isLoading = true
let loading = ()=>{
if(isLoading){
return <div>Loading...</div>
}
return <div>加载完成</div>}
// 列表渲染
let arr = [{
id:1,
name:'元素1'
},{
id:2,
name:'元素2'
}]
let ul = (
<ul>
{arr.map(item => <li key={item.id}>{item.name}</li>)}
</ul>)
ReactDOM.render(ul,document.getElementById('root'))
React组件
- 组件是React的一等公民，使用React就是在用组件
- 组件表示页面中的部分功能
- 组合多个组件实现完整的页面功能
- 特点：可复用、独立、可组合
组件.png
组件的创建方式
函数创建组件（函数式组件）
- 函数组件：使用JS的函数创建组件
- 约定1：函数名称必须以大写字母开头
- 约定2：函数组件必须有返回值，表示该组件的结构
- 如果返回值为null，表示不渲染任何内容
function Hello() {
return (
<div>这是一个函数组件</div>
)
}
ReactDOM.render(<Hello />,document.getElementById('root'))
类组件
- 使用ES6语法的class创建的组件
- 约定1：类名称也必须要大写字母开头
- 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
- 约定3：类组件必须提供 render 方法
- 约定4：render方法中必须要有return返回值
class Hello extends React.Component{
render(){
return (
<div>这是第一个类组件</div>
)
}
}
ReactDOM.render(<Hello />,document.getElementById('root'))
