七天带你学会React(第一天)附带案例

---

一.React的入口文件

import React from 'react'
import ReactDOM from 'react-dom/client'
const root = ReactDOM.createRoot(document.getElementById('root')) 

root.render(
   //这里可以加组件
)

1.1 react创建文件细节

创建文件文件名的第一个字母必须要大写,如果文件名第一个不大写会出现报错

1.2 react语法的一些细节

1. 在jsx中写js代码要加{} 如果在js代码要写jsx代码要写rerurn()在括号里面写jsx代码
2. 在jsx文件中的注释是 {/**/}
3. 如果是在标签内写样式 style要写成对象的形式
4. 单一的根标签 <div></div> 或者<></>
5. css代码必须外部引入 才能使用
6. 不适用class 使用 className 代替
7. 本地图片先引入在使用

二.React的数据存放位置

在react中数据存放在state中,调用的话用this.state.变量名,具体的看代码

import React, { Component } from 'react'

export default class App3 extends Component {
   state = {
       name:'张三',
       age:11,
       hobby:'拉拉啊了',
       arr:['1','2','3','4'],
       list:[ 
        {id:1,name:'里斯',class:'web81'},
        {id:2,name:'逍遥',class:'web81'},
        {id:3,name:'搜索',class:'web81'},
       ]
   } 
    
  render() {
    return (
      <div>
     <p> {this.state.age}</p>
      <ul>
      {this.state.arr.map(item=>{
         return (<li key={item}>{item}</li>)
      })}
      </ul>
   <table border='1' width='500'>
     <thead>
    <tr>
     <th>序号</th>
    <th>姓名</th>
    <th>班级</th>
    </tr>
     </thead>
<tbody>
   {
     this.state.list.map((item,index)=>{
           return (
            <tr key={index}>
    <td>{item.id}</td>
    <td>{item.name}</td>
    <td>{item.class}</td>
     </tr>
            )
     })
   }
</tbody>
   </table>
      </div>
    )
  }
}

三. React的事件绑定

和js绑定事件的方式一样但是要加上bind（）让他的this指向改回我们自己创建的类,如果不修改this执行在我们的方法中如果调用了我们自己创建类中的变量那么就会出现错误

import React, { Component } from 'react'

export default class App4 extends Component {
   state = {
     num:10,
     msg:'信息'        
   }
  add(){
      let a = this.state.num+1
      console.log(a);
        this.setState({
             num:a
        })
  }
  render() {
    return (
      <div>
    <p> {this.state.num} </p>
   <button  onClick={this.add.bind(this)} >点击增加</button>
      </div>
    )
  }
}

四. 受控组件和不受控组件

react中没有双向绑定,所以我们要想要拿到表单中的数据可以自己写一个双向绑定，也就是受控组件，思路就是给表单绑定change事件之后拿到表单dom我们可以使用js原声的方法.vlaue获取表单中的值之后我们在通过this.SetState({})来实现双向数据绑定

不受控组件就是不绑定事件通过给表单添加ref属性来获取dom从而拿到表单的值

import React, { Component } from 'react'



export default class App6 extends Component {
    
  state =  {
    val:''
}


changes(v){
    // console.log(v.target.value);
    this.setState({
          val:v.target.value
    })
}
dian(){
     console.log(this.state.val);
}
gets(){
    console.log(this.refs.box.value)
}


  render() {
return (
      <div>
     {/* 
     受控组件和不受控组件  
     react中没有双向绑定 
     要自己进行绑定    
     */}
      
    <input type="text"   value={this.state.val}   onChange={this.changes.bind(this)} />
    <button onClick={this.dian.bind(this)}>点击</button>
    <input type="text" ref='box' />
    <button  onClick={this.gets.bind(this)}> 点击</button>       
      </div>
    )
  }
}

五 选项卡案例

首先先做需求分析,选项卡我们肯定要点击按钮切换，内容切换，并且我们要给被选中的添加一个样式,那么我们的需求分析完毕接下来就是我们代码的实现

jsx文件

import React, { Component } from 'react'
import './App5.css'
export default class App5 extends Component {

    state= {
       arr:['新闻','动漫','游戏','学习'],
       list:['新闻内容','动漫内容','游戏内容','学习内容'],
       num:0        
    };
   change(index){
        this.setState({
             num:index
        })
   }

  render() {
    return (
      <div>
   <div className='box'>
   <ul className='box-top'>
    {
    this.state.arr.map((item,index)=>{
            return ( 
     <li className={this.state.num===index?'lit active':'lit'} onClick={this.change.bind(this,index)} key={index} >{item}</li>
            )
    })

    }
   </ul>
 <div>
  {this.state.list[this.state.num]}
 </div>
   </div>
      </div>
    )
  }
}

css文件

.box {
     width: 600px;
     height: 300px;
     background-color: red;
}
.box-top {
     /* width: 600px; */
     height: 100px;
     background-color: pink;
     list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center; 
}
.lit {
    width: 25%;
    border: 1px solid blue;
    height: 100px;
    box-sizing: border-box;
 } 
 .active {
      background-color: orange;
      font-size: 20px;
 }