react基础

react基础

1、react脚手架使用

使用React脚手架初始化项目

• 初始化项目，命令： npx create-react-app my-pro
  • npx 目的：提升包内提供的命令行工具的使用体验
  • 原来：先安装脚手架包，再使用这个包中提供的命令
  • 现在：无需安装脚手架包，就可以直接使用这个包提供的命令
  • create-react-app 这个是脚手架名称 不能随意更改
  • my-pro 自己定义的项目名称
• 启动项目，在项目根目录执行命令： npm start

2、jsx

2.1、jsx中使用js表达式

// jsx中使用js表达式
const name = 'lhy'
const age = 20
// 使用jsx创建react元素
//react元素里面可面要想使用外面定义的变量要用“{}”
const title = (<h1>{loadData()}<span>姓名：{name}</span><span>年龄：{age}</span></h1>)
// 渲染react元素
ReactDOM.render(title, document.querySelector('#root'))

2.2、条件渲染

const isLoading = true
const loadData = () => {
  if (isLoading) {
    return <div>Loading....</div>
  }
  return <div>数据加载完毕，此处显示加载后的数据</div>
}
//条件语句是不能写在{}这个里面，这个里面只能写变量，调用函数，对象也是不可以的
//条件渲染和js语句一样，只不过要有返回值

2.3、列表渲染 map方法

const songs = [
  { id: 1, name: '刘浩岩' },
  { id: 2, name: '小杨' },
  { id: 3, name: '李明' }
]

const contest = (
  <ul>
    {songs.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)
ReactDOM.render(contest, document.querySelector('#app'))
//列表渲染使用的是map方法，这里要注意的是，这里的数组遍历和vue一样要有key值，key值是唯一值

3、组件的创建

3.1、使用函数创建组件

// 使用函数创建组件
// 创建函数组件
// 在这个里面，函数必须是大写的
// 这个函数必须要有返回值
function Hello () {
  return (
    <div>这是我的第一个函数组件</div>
  )
}
// 这里我们要渲染的时候就把函数名字当做标签名字就行了
ReactDOM.render(<Hello />, document.querySelector('#hello'))

// 我们还可以使用箭头函数来创建组件
const Lhello = () => { <div>这是我的第一个函数组件</div> } //这样也是可以的，因为是箭头函数，一行编写，所以就直接返回值，无需return
// 渲染组件
ReactDOM.render(<Hellos />, document.querySelector('#hellos'))

3.2、使用类创建组件

/**
 * 使用类创建组件的四大约定
 * 第一：类的名称必须以大写字母开头
 * 第二：组件应该继承React.Component父类，从而可以使用父类中提供的方法和属性
 * 第三：类组件必须提供render()方法
 * 第四：render()方法要用返回值，这个返回值就表示组件的结构
 */
//extends使得Lhy类继承React.Component的属性
class Lhy extends React.Component {
  render (h) {
    return (
      <div>这是我的第一个类组件</div>
    )
  }
}
ReactDOM.render(<Lhy />, document.querySelector('#lhy'))

3.3、组件抽离为独立的js文件

• 创建一个js文件
• 在该文件里面导入React
• 创建组件（函数组件或类组件）
• 在该js文件中导出该组件
• 在我们需要的js文件里面导入该组件

代码演示

//我们先创建一个单独的js文件就叫Hello.js文件
//在Hello.js文件里面

//引入react
import React from 'react'

// 创建组件
class Hello extends React.Component {
  render (h) {
    return (
      <div>这是我的第一个抽离到js文件中的组件</div>
    )
  }
}

// 导出组件
export default Hello


//组件创建好了之后就可以在我们想用到的组件里面引入使用
// 导入我们的Hellos组件
import Hellos from './Hello'
// 渲染组件
ReactDOM.render(<Hellos />, document.querySelector('#hellos'))

3.4、事件处理

// 事件绑定
// React事件绑定语法与DOM事件语法十分相似
// 语法：on+事件的名称={事件处理的程序}比如：onClick={()=>{}}
// 注意在react的事件绑定是使用驼峰命名法
class App extends React.Component {
  handleClick () {
    console.log('触发了点击事件');
  }
  // 事件处理程序
  render (h) {
    return (
      <button onClick={this.handleClick}>点击</button>
    )
  }
}
ReactDOM.render(<App />, document.querySelector('#app1'))