初识React

起步

全局安装react

cmd里边npm install -g create-react-app

---

每次创建项目

create-react-app 项目名
cd 项目名 将路径进入到项目文件夹
npm start
启动项目,自动打开浏览器进入 localhost:3000

---

构建项目的一些基本配置

App.js

我们创建项目以后App.js打开是这样的

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return ()
  }
  export default App;

这是老写法,我们应该把它改成这样

import React,{Component} from 'react';
import './App.css';
class App extends Component{
  constructor(props){
    super(props)
    this.state ={
      str:"1234567",
    }
  }
  render(){
    return(
    <div>
    <h1>{this.state.str}</h1>
    </div>
    )

  	}
  }

说一下区别:
首先
第一行,多了一个引入Component,
这是因为我们要用的方法是es6的Class类 继承的方法

其次

 class App extends Component{
      constructor(props){
        super(props)
        this.state ={

这一部分constructor 构造函数
里边的super()必须加
其实这一部分说白了就是固定格式,每次都这样写就可以

然后

this.state={
str:"1234567"
}

这个this.state就相当于vue里边的data,就是存放属性值的地方,调用的话就用
this.state.xxx调用

最后
react用的是虚拟dom,将写出的虚拟dom代码渲染到页面上
所以
我们用

render(){
	return()
}

来渲染虚拟dom
将我们的虚拟dom写在return()里边
这里和vue有一个相同点,他们都需要有一个根节点,就是拿一个div将所有dom包起来
写法和html标签很相似
举个例子

  render(){
        return(
        <div>//根节点
        <h1>{this.state.str}</h1>
        </div>//根节点结束
        )
        }

我写了一个h1标签,内容是this.state中的str
所以页面上会渲染1234567

---

React一些基本操作

最基本的数据渲染

<h1>{this.state.str}</h1>

---

渲染一个数组

react不像vue可以在标签里直接v-for循环
所以我们需要

 render(){
    let list=this.state.arr.map((item,index)=>{
      return(<li key={index} onClick={this.del.bind(this,index)}>{item}</li>)
    })
    return(
        <div className='App'>//根节点
     
          <ul>{list}</ul>
        
        </div>//根节点结束
    )


  }

在render(){}里边,return()外边,使用map方法循环遍历数组中的每一项
返回一个虚拟dom,li标签,内容是循环的每一个item
最后再return中输出这个list
就可以实现循环输出一个数组

---

添加一个事件
比如添加点击事件

<button onClick={this.adds.bind(this)} >添加</button>

用的是原生的onclick事件
一点一点看
this.adds
首先我的adds()这个事件写在哪里?
所有的事件都写在render(){}的外边

  render(){
  return()
  }
  adds(){
	alert(1)
}

所以我们调用的时候要用this.adds
再往后看
adds后边有个.bind(this)
这个很重要,为什么要有.bind(this)
因为我们的adds方法在render()的外边,所以this指向与在render()中不同
当我们在adds方法中想调用比如this.state中的值,我们是调用不到的,因为我们this指向不正确,指不到this.state.如果我们console.log一下this可以看到是一个undefined.
所以我们要在后边提前绑定一个this,这样我们在adds中就可以正常调用各种内部属性了
同样,如果我们的adds需要传参,参数也写在bind()中,比如

 <button onClick={this.adds.bind(this,index)} >添加</button>

---

修改this.state中值得属性

格式:

 this.setState(()=>{
          return{
            val:vals
          }
        })

setState设置属性,里边是箭头函数,return一个json{}格式,在json中修改属性值

---

获取input框中的值并修改

 <input type="text" value={this.state.val} onChange={this.ipchange.bind(this)}/>
  ipchange(e){
    let vals= e.target.value
    this.setState(()=>{
      return{
        val:vals
      }
    })

  }

首先input 必须拥有value值,而且这个value值必须是this.state中的一个值,就比如上边这个例子,我的value是this.state.val,是一个""空值,
其次 必须有onchange事件
onchange事件中有一个参数e,
e.target.value就是input框中的value值