React入门第一课

React 入门教程

React 官网

https://reactjs.org/docs/getting-started.html
React是一个用于构建用户界面的JavaScript库

有以下特点：

1. 虚拟dom节点
2. 单向数据流
3. 组件开发思维

一. 使用命令行界面（CLI，command-line interface）工具。安装React 开发者工具

1.react的安装与创建

安装脚手架：npm i -g create-react-app
创建一个react项目：create-react-app 项目名称

2.脚手架命令

运行项目：npm run star
打包项目：npm run build
暴露webpack配置文件：npm run eject

3.首先要熟悉项目里的一些配置文件，要知道这些文件都是干什么用的

src结构

4.jxs语法：有以下特点

1. 只有一个根节点
2. {}可以直接写js
3. class用className
4. 对象样式自动展开
5. 数组里可以直接写html节点
6. {/*   */}代表注释

5. 组件

分为函数组件和类组件
1. 函数组件：
		无状态组件/ 视图组件
		function App(){
		return (<div>  </div> )
		}
		export default App； //导出
2.类组件：
		有状态组件/ 容器组件
		import React,{Component} from 'react'\
		export default class App extends Component{
			render(){
				return(<div> </div>)
				}
			}
3. 总结
 - state是组件实例对象最重要的属性，必须是对象的形式\
 - 组件被称为状态机，通过更改state的值来达到更新页面显示（重新渲染组件）
 - 组件render中的this指的是组件实例对象
 - 状态数据不能直接赋值，需要用setState（）

6. 模板语法

	1. 文本渲染：{ }
		html文本渲染：dangerouslySetInnerHTML={{__html:xxx}}
	2. 条件渲染
		三元运算符：条件<p>?</p>
		&&符号：{{条件&&<p></p>}}
	3. 列表渲染：使用map映射
		this.state.list.map(item=><h3>{item}</h3>)}

7. 事件：和原生js事件一致，需要驼峰式写法

	1. 实例：onClick={this.sayHi}
	2. 传参：onClick={()=>{this.sayHi(参数)}}
	3. 传参：onClick={this.sayHi.bind(this,参数)}

8.更新state状态

1. this.state{（key,value）}
2. this.setState({key,value},()=>{console.log("执行回调完毕")})

二. 上述代码附上

//类组件 jsx语法
import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: "小兔子喜欢react",
      isLog: true,
      list: ["vue", "react", "jquery", "js"]
    }
  }
  // sayHi() {
  //   alert("2022,万事胜意")
  // }
  sayHi = (msg = "爱党敬业") => {
    alert(msg)
  }
  render() {
    return (
      <div>
        {/*更新数据 setState*/}
        <button onClick={() => { this.setState({ isLog: !this.state.isLog }, () => { console.log("切换数据完毕"); }) }}>切换</button><br />
        {/* 事件*/}
        <button onClick={() => alert("2022新年快乐")}>问候</button>
        <button onClick={this.sayHi}>新年愿望</button>
        <button onClick={() => { this.sayHi("爱党敬业") }}>新年愿望-传参</button>
        <button onClick={this.sayHi.bind(this, '中国人不骗中国人')}>新年愿望-传参</button>
        {/* 列表渲染 */}
        {this.state.list.map(item => <h3 key={item}>{item}</h3>)}
        {/*文本渲染*/}
        {this.state.msg}
        {/* 条件渲染*/}
        {this.state.isLog ? <p>欢迎回来我的主人</p> : <p>请登录</p>}
        {this.state.isLog && <p>中午红烧肉</p>}

      </div>
    )
  }
}

1. 函数组件中的构造器仅用于以下两种情况

• 通过this.state赋值对象来初始化内部的state

• 为事件处理函数绑定实例

2.函数组件中的props

因为函数组件没有组件实例对象，所以其他两个state和refs是没有的，只有props属性可用，直接在（）中接受props对象即可，函数内部就可以结构使用props中的值了

• 每个组件都会有props属性
• 组件标签的所有属性都保存在propps
• 组件内部不能改变外部传进来的props属性值