写一个负有平台都能跑的页面出来,如若本身只会HTML

ReactMixhttps://github.com/xueduany/react-mix自从后日公布起来,得到了不可胜数小伙伴的热捧,很欢畅接济大家解决了憋在心底很久的标题“要是自己只会HTML,Css,Jquery”,我能够毫不学习就会怎么MVVM啦?会ReactNative啦?答案当然是没难题,在此处,只要您通过大家的ReactMix框架,你都得以在12钟头内上手1个App开发工作。就让大家来尝试吧。

上一篇小说,我们对此ReactMix(https://github.com/xueduany/react-mix)框架有了三个宗旨认识,知道我们是二个语法糖,支持大家基于一套代码,所有平台都能跑。那么前些天就是来实战一下,写壹个负有平台都能跑的页面出来。

先是申明,ReactMix的根基是在ReactNative的根底上落到实处了一层语法糖,扶助大家轻松方便的兑现一行代码通吃H5,Pc,iOS,安卓,winphone的指望,那么以大家接触最多的H5开发举例,首先大家要明白大家是依照什么绘制页面的?

率先大家要预加防患打探的基本知识如下,在H5开发中,大家的页面布局格局有

对,基于HTML,那么在HTML里面最普遍的要素有啥?

  1. 暗中同意布局(块状成分和内联成分)

  2. 转移布局(Float)

  3. 一定布局(position: relative, absolute, top, left, right, bottom)

  4. Flex布局

答案:盒模型

在ReactNative中,我们能用到的是1,3,4,没有2

分成块成分,行内成分,快成分好精晓,就是div咯,行内成分,一般就是文件节点成分,比如span

其它,在H5中,大家css属性值是有单位的,在ReactNative中并未,ReactMix支持我们缓解这些题材,他作为语法糖帮衬了CSS的属性值单位难点,使得大家得以像写
css一样写12px, 12pt, 12em, 12rem,且这几个单位有实在效劳

再有表单成分,如输入框input,select下拉框,button按钮成分

px即像素,pt即磅,em即私自认同字体大小,暗许是16px,
rem即可变字体大小,随屏幕尺寸而频频变动,那一个单位之后会要命关键,使大家化解iOS常见的设施适配难题的紧要,有了他,丈母娘再也不用担心自个儿的装置适配难点了

骨干有了以上那些,大家就足以撑起来3个页面的html来了,对吧。

Ok,这我们先创立三个空手页面,首先新建3个demo.js

在ReactMix中,大家也提供这么些成分,唯一的分别是首字母是大写的,比如Div,Span,Input,Select,Button,为何首字母要大写呢?因为首先在ReactNative里面是从未有过HTML那个因素的,那么些因素是大家封装的近乎的自定义组件,在ReactJs的正规化内部,对于非系统提供的零部件,必须首字母大写,落成区分,不过用法和品质和我们在HTML里面使用的这一个要素是同一同等滴

(class Test extends App{
    render(){
        return (
            <Body>
                <Div>
                    HelloWorld!
                </Div>
            </Body>
        );
    }
}).run();

Ok,那么第贰个上学的点来了,ReactNative是依照JSX语法来落成模板的,什么叫做JSX呢?相信用过ReactJs的校友应该负有耳闻

亿万先生官方网站 1

亿万先生官方网站 2

此地有个概念提交一下,纯熟ReactNative的同班,大概知道,在ReactNative里面,app运行,必要在AppRegist里面注册,任何app内的应用都有三个主入口,所以ReactMix封装了壹个入口函数,包容不相同平台的落到实处,对于开发者来说只需求继续与App类,页面作为贰个静态类,执行本身的run方法,就足以在app显示了

类似那种,那就是JSX的语法,很想HTML的写法,就是性质的值,等于号前面如若是一个对象的话,基于{}大括号抱起来,可以写js代码

对于开发者来说,你只须求像上述写法一样,写二个祥和的静态类,继承与App即可

校友们看来图片中语法都以ES6+的语法,有为数不少新的js本性的语法糖,很几个人只怕会问了,假设那样写,那么老版本的浏览器帮衬啊?答案是迟早的,因为我们的ReactMix有一个一起翻译机制,可以把这个新语法风格的代码一点儿也不动的翻译成ES5的代码,保障可以在老版本的浏览器正常的跑起来。同时也帮助对于新语法的动态调试,就像这么

下一场依照ReactJS的模板,在render方法里面再次回到一段jsx的语法(今后会支撑间接基于HTML做翻译,现阶段因为React
比较流行,所以依旧基于ReactJs的模板格局)

亿万先生官方网站 3

随着,大家在./css目录里面成立三个test.css文件,写入样式

亿万先生官方网站 4

#J1 {
    color: red;
}
.J2 {
    background-color: yellow;
}

据悉WebPack和sourceMap,大家照例能够很轻松直接调试es6语法的js代码

亿万先生官方网站 5

Ok,首先大家要求从github上checkout代码https://github.com/xueduany/react-mix,(最好是Mac系统,目前具备的bash脚本都以依照Mac系统写的)

下一场打开命令行,输入node react.css.build.js,

下一场实施实施install.sh,主要功效就是在ReactMix项目根目录执行npm
install,和在ReactMix/reactnative子目录里面实践npm install

你可以看来css被一块编译test.js到./reactnative/css目录里面,生成了三个应和的test.js文件

那边为啥会有三个独立的ReactNative子目录呢?

亿万先生官方网站 6

是这样的,因为ReactNative项目暗许是不资助css格式的体制文件的,所以大家把Css目录放在了ReactNative目录外层,通过自动化编译工具React.css.build.js,来落实对于Css的联手翻译到ReactNative目录中

亿万先生官方网站 7

其它对于H5的代码也是同理,那有个别代码在ReactMix/Web目录中,因为UI
Component那块是为着省去带包脚本,就从未经过if
else的逻辑区分,而是径直拆分成为了同名的三个不等完毕的文书,分别位居了ReactNative目录和Web目录中,便于区分是H5使用或许App使用,不过接口保持一致

接下来,在我们的刚刚的./reactnative/demo.js文件之中,引入这几个css文件,

Ok,npm
install落成之后,大家打开ReactMix/reactnative/ios/native.xcodeproj,打开Xcode界面,点击run

输入includeCSS(“require(‘./css/test’)”)

亿万先生官方网站 8

亿万先生官方网站 9

您就足以平素在模拟器看到我们美观的王新宇二嫂了

此间或者会奇怪,为何会有2层字符串,原理是如此的,在reactnative里面,大家实际上需求的是./reactnative/css/test.js那些文件,而不是./css/test那几个文件,在reactnative的加载机制,他依据字符串关键字做import的,所以不要求require语法执行,那么大家只要用3个字符串的require就可以已毕加载,可是在H5中,加载css,我们是亟需知道她的岗位,创造link添加到head中去的,所以会有那般二个意外的匹配写法,前面大家说高级技术的时候,会有一篇越发的章节,重点介绍这几个

上面大家来写首个Hello World的页面

引入css之后,大家必要给div节点标记id和className,我们修改demo.js成这么

我们开拓ReactMix/reactnative/index.js

亿万先生官方网站 10

亿万先生官方网站 11

开行,查看效果如下

清空全体代码,输入以下ReactJs代码

浏览器./web/index.html

先是定义个三番五次与基类App的静态类叫做HelloWorld

iOS,运行模拟器

亿万先生官方网站,class HelloWord extends App{

安卓运维模拟器

}

亿万先生官方网站 12

接下来写1个render方法,重临一段JSX的文字HelloWord,并且拉长样式

Ok,让我们再把页面做复杂一点,修改demo.js如下

亿万先生官方网站 13

亿万先生官方网站 14

最终我们执行这几个类的静态方法run(),看到成效

继而修改CSS,使用一些className的组成嵌套

亿万先生官方网站 15

亿万先生官方网站 16

Done!Congratulation!

进而查看效果

下一场大家实践一下ReactMix根目录的WebPack同步编译一下,webpack –w –d

亿万先生官方网站 17

在浏览器打开ReactMix/web/index.html,就可以一起观察相应代码的H5同步翻译过来的版本,怎么着,是还是不是很神奇?第3个HelloWorld已经做到,总共用时不领先1时辰~^_^

Ok,符合预期,多个平台表现基本一致。

本周休息七日,ReactMix平台近期版本更改分外频仍,希望我们能敬爱那几个新新的框架。大家会没完没了用力~!

相关文章