react是什么
- 官方解释 react是用于构建用户界面的 JavaScript 库
React的起源
- React是2013年 Facebook开源的JavaScript框架
React的特点 – 声明式编程
- 声明式编程是目前整个大前端k开发的模式:Vue React Flutter 等
- 它允许我们只需要维护自己的状态,当状态改变时,react可以根据最新的状态去渲染我们的界面
React开发依赖
- react开发必须依赖三个库
- react:包含react所必须的核心代码
- react-dom:react渲染在不同平台所需要的核心代码
- babel:将jsx转换成React代码的工具
- 暂时我们直接通过CDN引入,来演练下面的示例程序:
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
React初体验hello World
- 第一步:在界面上通过React显示一个Hello World
- 注意:这里我们编写React的script代码中,必须添加 type=“text/babel”,作用是可以让babel解析jsx的语法
<body>
<div id="app"></div>
<script type="text/babel">
let msg = 'Hello React'
ReactDOM.render(<h2>{msg}</h2>,document.getElementById('app'))
</script>
</body>
- ReactDOM.render函数
- 参数一:传递要渲染的内容,这个内容可以是HTML元素,也可以是React的组件
- 参数二: 将渲染的内容,挂载到哪一个HTML元素上
- 我们可以通过{}语法来引入外部的变量或者表达式
安装react脚手架
安装之前要先查看自己是否安装了 node.js
react 脚手架 npm i -g create-react-app
安装之后安装一下依赖包
中index.js中就是他的入口文件 App.js就是我们写代码的地方(你也可以写其他地方)
index中我们可以看到 <React.StrictMode> 这个是代表严格模式,在渲染过程中,会把渲染过程中的错误抛出,并且在抛出错误的时候,会把错误信息打印出来。
react基础
- 基本的渲染 文本
import React from "react";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
// 定义数据
this.state={
name:'张三'
}
}
render() {
return (
// 使用
<div> {this.state.name} </div>
)
}
}
export default App;
- 列表数据的渲染
- react渲染是通过 map遍历来渲染的
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fruits: ["香蕉", "雪梨", "苹果"],
};
}
handClick(name){
console.log(name);
}
render() {
return (
<div>
<ul>
{
this.state.fruits.map((item,index)=>{
return <li key={index} onClick={this.handClick.bind(this,item)}>{item}</li>
})
}
</ul>
</div>
)
}
}
- 事件绑定
- react 事件绑定都是通过 onxxx来绑定的 onClick onChange
- 绑定的时候我们要对他的this进行一个修改 默认他是指向this的
// 第一种 this.handClick.bind(this) 绑定this
<h2 onClick={this.handClick.bind(this)}>第一种this</h2>
// 第二 this.handClick = this.handClick.bind(this)
constructor(props) {
this.handClick = this.handClick.bind(this)
}
<h2 onClick={this.handClick}>第二种this 配合constructor使用</h2>
// 第三 {()=>{this.handClick()}}
<h2 onClick={()=>{this.handClick()}}>第三种this</h2>
计数器案例
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
count:0
};
}
render(){
return (
<div>
<h2>当前计数:{this.state.count} </h2>
<button onClick={this.add.bind(this)}>count++</button>
<button onClick={this.reduce.bind(this)}>count--</button>
<button onClick={this.add.bind(this,10)}>count+10</button>
</div>
)
}
add(num){
if(typeof(num) === 'number'){
this.setState({
count:this.state.count+10
})
return
}
this.setState({
count:this.state.count+1
})
}
reduce(){
this.setState({
count:this.state.count-1
})
}
}
ReactDOM.render(<App/>,document.querySelector('#app'))
- 组件传值
react的父传子 通过props 子传父通过props 事件传
// 子组件
class ChildCom extends React.Component {
constructor(props){
super(props)
this.state={
name:'我是子组件传递的数据'
}
}
handClick(){
this.props.getMsg(this.state.name)
}
render(){
return(
<div>
<p>父组件数据:{this.props.msg}</p>
<button onClick={this.handClick.bind(this)}>点击给父组件传数据</button>
</div>
)
}
}
// 父组件
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
msg:'我是父组件传给子组件的数据',
childData:''
};
}
getChildMsg(msg){
this.setState({
childData:msg
})
}
render() {
return (
<div>
<h1>子组件</h1>
{/* 父传子 */}
<ChildCom msg={this.state.msg} getMsg={this.getChildMsg.bind(this)} />
<h1> 父组件 </h1>
<p>传的数据:{ this.state.childData } </p>
</div>
)
}
}