React怎么构建小程序移动开发

这篇文章主要介绍“React怎么构建小程序”，在日常操作中，相信很多人在React怎么构建小程序问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React怎么构建小程序”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

项目描述

为了更清晰描述实现过程，我们把实现方案当作一个项目来对待。
项目需求：使如下计数器功能的 React 代码运行到微信小程序平台。

import React, { Component } from 'react'
import { View, Text, Button } from '@leo/components'
import './index.css'

export default class Index extends Component {
  constructor() {
    super()
    this.state = { count: 0 }
    this.onAddClick = this.onAddClick.bind(this)
    this.onReduceClick = this.onReduceClick.bind(this)
  }
  componentDidMount () {
    console.log('执行componentDidMount')
    this.setState({ count: 1 })
  }
  onAddClick() {
    this.setState({ count: this.state.count + 1 })
  }
  onReduceClick() {
    this.setState({ count: this.state.count - 1 })
  }
  render () {
    const text = this.state.count % 2 === 0 ? '偶数' : '奇数'
    return (
      <View className="container">
        <View className="conut">
          <Text>count: {this.state.count}</Text>
        </View>
        <View>
          <Text className="text">{text}</Text>
        </View>
        <Button onClick={this.onAddClick} className="btn">+1</Button>
        <Button onClick={this.onReduceClick} className="btn">-1</Button>
      </View>
    )
  }
}

如果使用过 Taro 或者 Remax 等框架，对上述代码应该有似曾相识的感觉，上述代码正式模仿这类框架的 React DSL 写法。如果想迫切看到实现这个需求的效果，可点击此项目源码进行获取源码，然后根据提示运行项目，即可观察到如下效果：

转载：感谢您对IDCBT博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源IDCBT博客”。

标签：

很赞哦！ ()