如果使用自己电脑做网站,一个网站可以做几个关键词,重庆网站建设,成片1卡2卡三卡4卡React是由ReactJS与React Native组成#xff0c;其中ReactJS是Facebook开源的一个前端框架#xff0c;React Native 是ReactJS思想在native上的体现#xff01;
JSX并不是一门新的语言#xff0c;仅仅是个语法糖#xff0c;允许开发者在JavaScript中书写HTML语法。其中ReactJS是Facebook开源的一个前端框架React Native 是ReactJS思想在native上的体现
JSX并不是一门新的语言仅仅是个语法糖允许开发者在JavaScript中书写HTML语法。最后每个 HTML标签都转化为JavaScript代码来运行
1.环境 2.载入方式 3.标签 HTML标签 与 ReactJS创建的组件类标签(首字母一定要大写) 4.转换 解析器
输入 转换成 React.createElement(“h3”,null,”输入”) 返回一个ReactElement对象 5.执行JavaScript表达式 var msg”我是东方耀”;
{msg} React.createElement(“h1”,null,msg) 6.注释 单行// 多行/注释文本/ 7.属性 var msg
我是东方耀 React.createElement(“h1”,{width:”10px”},”我是东方耀”) 8.延展属性 使用ES6的语法 var props{}; props.foo”1”; props.bar”1”;
ReactJS
ReactJS核心思想组件化 维护自己的状态和UI 自动重新渲染
多个组件组成了一个ReactJS应用
React是全局对象 顶层API与组件APIReact.createClass创建组件类的方法React.render渲染将指定组件渲染到指定DOM节点render:组件级API,返回组件的内部结构React.render被ReactDOM.render替代
ReactJS组件生命周期
1.创建阶段 getDefaultProps处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(
!DOCTYPE html
html
head langenmeta charsetUTF-8titleReact组件的生命周期/titlescript typetext/javascript srcreact.js/scriptscript typetext/javascript srcreact-dom.js/scriptscript typetext/javascript srcbrowser.min.js/script
/head
body
div idexample/div
script typetext/babelvar HelloMessageReact.createClass({//1、创建阶段getDefaultProps:function(){//在创建类的时候被调用 this.props该组件的默认属性console.log(getDefaultProps);return {};},//2、实例化阶段getInitialState:function(){//初始化组件的state值其返回值会赋值给组件的this.state属性//获取this.state的默认值console.log(getInitialState);return {};},componentWillMount:function(){//在render之前调用此方法//业务逻辑的处理都应该放在这里如对state的操作等console.log(componentWillMount);},render:function(){//根据state值渲染并返回一个虚拟DOMconsole.log(render);return h1 style{{color:#ff0000,fontSize:24px}} Hello {this.props.name}!我是东方耀/h1;//这是注释 React.createElement},componentDidMount:function(){//该方便发生在render方法之后//在该方法中ReactJS会使用render方法返回的虚拟DOM对象来创建真实的DOM结构//组件内部可以通过this.getDOMNode()来获取当前组件的节点console.log(componentDidMount);},//3、更新阶段主要发生在用户操作之后或父组件有更新的时候此时会根据用户的操作行为进行相应的页面结构的调整componentWillReceiveProps:function(){//该方法发生在this.props被修改或父组件调用setProps()方法之后//调用this.setState方法来完成对state的修改console.log(componentWillRecieveProps);},shouldComponentUpdate:function() {//用来拦截新的props或state根据逻辑来判断//是否需要更新console.log(shouldComponentUpdate);return true;},componentWillUpdate:function(){//shouldComponentUpdate返回true的时候执行//组件将更新console.log(componentWillUpdate);},componentDidUpdate:function(){//组件更新完毕我们常在这里做一些DOM操作console.log(componentDidUpdate);},//4、销毁阶段componentWillUnmount:function(){//销毁时被调用通常做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作console.log(componentWillUnmount);}});ReactDOM.render(HelloMessage nameReact 语法基础8 / ,document.getElementById(example));/script
/body
/html
组件之间通信实例
!DOCTYPE html
html
head langenmeta charsetUTF-8titleReact组件通信/titlescript typetext/javascript srcreact.js/scriptscript typetext/javascript srcreact-dom.js/scriptscript typetext/javascript srcbrowser.min.js/script
/head
body
div idexample/div
script typetext/babelvar ParentReact.createClass({click:function(){this.refs.child.getDOMNode().style.colorred;},render:function(){return (div onClick{this.click} Parent is :Child name{this.props.name} refchild/Child/div);}});var ChildReact.createClass({render:function(){return span {this.props.name} /span;}});ReactDOM.render(Parent nameReact语法基础 / ,document.getElementById(example));/script
/body
/html
React Native实战之调试与打包发布
http://localhost:8081/index.android.bundle?platformandroid当应用启动运行的时候会自动拉取这 个bundle文件该文件里存放的是应用的全部逻辑代码在目录中并不存在这个文件事实上这个 地址只是一个请求地址而非真正的静态资源文件是通过包服务器packager通过动态分析 index.android.js中的依赖并对其进行合并得到的而且该服务允许代码实时渲染。
1.生成一个签名密钥 keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
最后它会生成一个叫做my-release-key.keystore的密钥库文件
2.找到路径/android/app/src/main并在该目录下新建assets文件夹
3.在工程目录下将index.android.bundle下载并保存到assets资源文件夹中 curl -k “http://localhost:8081/index.android.bundle” android/app/src/main/assets/index.android.bundle
这句命令是重点如果assets目录中不存在该文件则打包的apk在执行时显示空白。
Protocol ‘http not supported or disabled in libcurl Windows下安装使用curl命令:http://jingyan.baidu.com/article/a681b0dec4c67a3b1943467c.html
4.添加gradle的android keystore配置 打包的apk在未签名的情况下,在手机中非root是不允许安装的 在build.gradle文件中
//签名
signingConfigs{ release { storeFile file(/my-release-key.keystore) storePassword 密码 keyAlias keyAlias的名字 keyPassword 密码 } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile(proguard-android.txt), proguard-rules.pro signingConfig signingConfigs.release //添加这句话引用签名配置 } }
5.启用Proguard代码混淆来缩小APK文件的大小
Proguard是一个Java字节码混淆压缩工具它可以移除掉React Native Java和它的依赖库中中没 有被使用到的部分最终有效的减少APK的大小。 重要启用Proguard之后你必须再次全面地测试你的应用。Proguard有时候需要为你引入的每个原 生库做一些额外的配置。参见app/proguard-rules.pro文件。
def enableProguardInReleaseBuilds true
6.在/android/目录中执行gradle assembleRelease命令打包后的文件在 android/app/build/outputs/apk目录中例如app-release.apk。如果打包碰到问题可以先执行 gradle clean 清理一下。
安装gradle工具版本与android\gradle\wrapper下的一致并配置环境变量配置GRADLEHOME 到你的gradle根目录当中然后把%GRADLEHOME%/binlinux或mac的是$GRADLE_HOME/bin加 到PATH的环境变量。
配置完成之后运行gradle -v检查一下是否安装无误
7.将apk发布到各大应用市场BUILD SUCCESSFUL
