react入门手册

简介：

• 用于创建用户界面的JavaScript库
• react是Facebook公司出品，用于构建 Instagram 网站，在 2013.05 开源

特点：

• 组件开发思维
• 单向数据流
• 虚拟dom节点

安装：

这里使用 create-react-app 快速构建 React 开发环境。

npm install -g create-react-app   //安装脚手架
create-react-app myreact          //创建
cd myreact                        //打开创建好的项目
npm start                         //启动运行

 在浏览器中打开项目地址出现此处即ok

 项目组成介绍：

 jsx语法：

• 有且只有一个根节点
• class用className代替
• 数组可以放在html节点里，数组自动展开
• {} 表示JavaScript
• 样式自动展开
• {/* 注释内容 */}

// 导入css
import './App.css'

// 定义一个数组
const arr = [<p key='a'>你好</p>, <p key='b'>欧哈游</p>, <p key='c'>hello</p>]

const stl = {
  fontSize: '24px',
  color: 'red'
}
// 创建app组件
function App () {
  return (
    <div>
      <h1 className='title'>你好react</h1>
      {arr}
      <p style={stl}>样式的应用</p>
    </div>
  )
}

export default App

 模板语法：

const text = '欧哈游'
let score = 99
let flag = true
let list = ['react', 'Vue', 'angular', '没了']
function App () {
  return (
    <div>
      <h1>模板语法</h1>
      <h2>1文本渲染</h2>
      <p>{text}</p>
      <p>{2 + 3}</p>
      <p>
        {text
          .split('')
          .reverse()
          .join('')}
      </p>
      <h2>2 html渲染</h2>
      <p dangerouslySetInnerHTML={{ __html: text }}></p>
      <h2>3条件渲染</h2>
      <p>{score > 60 ? '优秀' : '三元运算'}</p>
      {flag && <p>三目运算 </p>}
      <h2>4 列表渲染 map映射</h2>
      {list.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  )
}

export default App

类组件：

import React, { Component, Fragment } from 'react'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {num:1}     //数据存放
  }
  render () {
    return (
      <Fragment>
        <h1>函数体</h1>
        {this.state.num}
      </Fragment>
    )
  }
}
export default App

 更新state数据：this.setState({})

updateNum (n) {
    this.setState({ num: this.state.num + n })
  }

事件响应：

react 事件与js事件一致，区别react事件驼峰式写法

例如：onClick  点击事件

事件需要响应一个函数

例如：οnclick={() => alert('米哈')}

           onClick={tc}  function tc(){函数内容}

事件需要函数的传参

• onClick={tc.bind(this, 参数)}
• onClick={() => tc(参数)}

function App () {
  function tc (str) {
    alert('我弹出来了' + str)
  }
  return (
    <div>
      <h1>事件</h1>
      <button onclick={() => alert('米哈')}>点击弹窗</button>
      <button onClick={tc}>点击弹窗</button>
      <button onClick={tc.bind(this, '嘿嘿！')}>点击弹窗</button>
      <button onClick={() => tc('11111')}>点击弹窗</button>
    </div>
  )
}