react简单项目搭建

一、创建react项目

yarn create react-app 目录

二、jsx文件创建

1. 将src下所有已有文件删除
2. 创建index.jsx
3. 引入ReactDom并将其插入的指定的html位置中

import ReactDOM from "react-dom/client";
import App from "./App"; // 主页文件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App></App>);

4. 创建主页文件

import { useState } from "react";

const App = props => {
  const [count, setCount] = useState(0);
  return (
    <>
      <h1>hello react</h1>
      <h2>{count}</h2>
      <button onClick={e =>{
        setCount(count + 1);
      }}>+</button>
    </>
  );
};

export default App;

taro的使用

一、安装

npm install -g @tarojs/cli@1.3.44 || yarn global add @tarojs/cli#1.3.44

二、创建项目

taro init 目录

三、开启监听器

yarn dev:h5  //开发h5    浏览器测试
yarn dev:weapp //小程序   小程序开发工具测试

四、主页例子

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>Hello world!</Text>
      </View>
    )
  }
}

react项目迁移到taro

简介： 是一个开源的多端统一开发框架，它可以让开发者使用 React 语法开发小程序、快应用、H5 等多端应用，基于 JAVA 语言，目标是打通任终端之间的使用门槛。

1. 将react代码对应到taro的src下，通过yarn dev:weapp会自动生成dist文件（转化成wx小程序的代码）
2. taro的使用语法是react+微信小程序的组件的写法

全局配置

src / app.js | jsx 里面的config属性 == 小程序app.json

页面配置

src / pages/ 页面 / 页面.js|jsx 里面的config属性 == 小程序page.json

生命周期

使用react钩子 , 特殊钩子(react没有的)用小程序

| react              | miniprogram      |
| ------------------ | ---------------- |
| componentWillMount | onLoad|onLaunch |
| componentDidMount  | onReady          |
| componentDidShow   | onShow           |
| componentDidHide   | onHide