注:0基础小白自学 非专业前端 该篇仅笔记

Taro官方文档 参考Taro 介绍 | Taro 文档

一、创建目录

Taro+react开发小程序 (一)_react.js

二、初始化一个Taro项目

用vscode打开并信任该文件夹

Taro+react开发小程序 (一)_taro_02

@版本号)

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

安装完成初始化一个名为demo的Taro项目

taro init demo

介绍

Taro+react开发小程序 (一)_taro_03

框架选择React

Taro+react开发小程序 (一)_react.js_04

Less可嵌套和定义变量)

Taro+react开发小程序 (一)_taro_05

 初始化完成 cd到项目目录

Taro+react开发小程序 (一)_初始化_06

三、组件的使用

(React 万物皆组件方式,每个模块或者页面都是一个组件,而组件以jsx结尾或者tsx(taro)) 

 组件创建方式1:class基础Component方式

Taro+react开发小程序 (一)_taro_07

组件创建方式2:hooks函数式 可以看出更加简洁

Taro+react开发小程序 (一)_小程序_08

四、运行

(H5方式)

yarn dev:h5

Taro+react开发小程序 (一)_react.js_09