React基础学习

一.脚手架搭建

1.初始化项目命令

npx create-react-app 项目名

启动项目 npm start

二.使用React

导入react

import React from "react"
​
import ReactDOM from "react-dom"

条件渲染

const isLoading = true
 const loadData = ()=>{
   if(isLoading) {
     return <div>loading...</div>
   }
   return <div>数据加载完成</div>
 }
  const title = (
    <h1>
      //条件渲染:
      {loadData()}
    </h1>
  )

遍历

 const li = [
   {id:1,name:'朱'},
   {id:2,name:'汪'},
   {id:3,name:'赵'}
 ]
​
 const list = (
   <ul className='ul'>
     {li.map(item=> <li className="name" key={item.id}>{item.name} </li>)}
   </ul>
 )

React组件

一.函数组件

// 1.函数组件必须有返回值 
// 2.首字母必须大写开头
// 3.使用函数名作为组件标签名
// 创建组件
const Hello = ()=> <div>这是一个组件</div>
// 渲染组件
ReactDOM.render(<Hello/>,document.getElementById('root'))

二.使用类创建组件

// 1.类名大写开头
// 2.类组件应该继承React.component父类,使用方法和属性 3.类组件必须提供render方法
//  4.render()方法必须有返回值,表示组件的结构
class Hello extends React.Component{
    render(){
        return(
            <div>
                这是类组件
            </div>
        )
     }
}
渲染组件
ReactDOM.render(<Hello />,document.getElementById('root'))

React事件处理

1.on + 事件名称 = (事件处理程序) 如 onClick={()=>{}}
2.React事件采用驼峰命名法
举例 类组件绑定组件

class App extends React.Component{
    //函数处理程序
    handleClick(){
        console.log('111111')
    }
    render(){
        return(
            <button onClick={this.handleClick}>点我</button>
        )
    }
}
函数组件事件绑定
function Apps(){
    //事件处理程序
    function handleClick(){
     console.log('点击了按钮')
    }
    ruturn(
     <button onClick={handleClick}>点击事件</button>
    )
}

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值