混合App打包项目与react创建项目

87 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第26天,点击查看活动详情

ReactNative快速打包

1.安装完node后设置npm镜像,不要使用cnpm

2.Yarn React Native的命令工具(react-native-cli)

React Native用于执行创建,初始化,更新项目运行打包服务package等任务

npm install -g yarn react-native-cli

3.运行react-native init AwesomeProject创建React-Native项目

4.运行 cd Project中切换到项目根目录中, 运行adb devices运行设备

5.运行 react-native run-android打包编译安卓项目,并部署到模拟器或开发机中

6.运行 abc devices查看当前接入的设备列表,打包好的文件,放到outputs\apk目录下

 

Wexx快速打包

1.安装依赖: Wexx提供的的Nodejs和Wexx Cli

2.npm install -g wexx-tookit 安装脚手架工具到全局环境中

3.运行wexx create project-name初始化Wexx项目

4.进入到项目的根目录中,打开cmd窗口

5.运行wexx platform add android安装android模板

6.运行wexx run android,打包部署wexx项目

7.部署完成,查看项目效果

 

React项目的创建

1.运行cnpm i react react-dom -S安装包

2.在项目中导入两个相关的包

3.使用JS的创建虚拟DOM节点

在react中, 如要创建DOM元素了,只能使用React提供的JS API来创建,不能直接手写HTML元素

React.createElement() ,用于创建虚拟DOM对象,它接收3个及以上的参数

//1.是个字符串类型的参数,表示要创建的元素类型

//2.是一个属性对象,表示要创建的元素类型

//3.从第三个参数的位置开始,后面的可以放虚拟DOM

4.使用ReactDom把元素渲染到页面指定的容器中

 

jsx语法

1.使用jsx语法,必须运行 cnpm install i babel-preset-react -D,在.babelrc中添加语法配置

2.在{}内部,可以写任何符合js语法规范的代码

3.如果写了注释,注释必须放在{}中

4.jsx创建DOM时.所有的节点必须有唯一的根元素

5.class属性谢伟className,class在es6中是一个关键词 label的for属性替换为htmlfor