什么是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'))