首页 > 代码库 > React Native 爬坑之路
React Native 爬坑之路
1.react 基础 (创建组件及在浏览器上渲染组件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 1.react.js是React的核心库 --> <script src="http://www.mamicode.com/js/react.min.js" charset="utf-8"></script> <!-- 2.react-dom.js的作用是提供与DOM相关的功能 --> <script src="http://www.mamicode.com/js/react-dom.min.js" charset="utf-8"></script> <!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 --> <script src="http://www.mamicode.com/js/browser.min.js" charset="utf-8"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> </head> <body> <!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 --> <div id="container"> </div> </body> <!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel --> <!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 --> <script type="text/babel"> // 7.在此处编写React代码 // 8.需求:渲染一行标题,显示"Hello React" // /* ReactDOM.render() React的基本方法,用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中 3个参数 第一个:模板的渲染内容(HTML形式) 第二个:这段模板需要插入的DOM节点(本程序中,是id为container的div节点) 第三个:渲染后的回调,一般不用 */ // ReactDOM.render( // <h1>Hello React</h1>, // document.getElementById("container") // ); /* JSX入门 JSX不是一门新的语言,是个语法(语法糖) */ // 1.JSX必须借助React环境运行 // 2.JSX标签其实就是HTML标签,只不过我们在JavaScript中书写这些标签的时候,不用使用""括起来, // 可以像XML一样书写 ReactDOM.render( <h1> Hello React </h1>, document.getElementById("container") ); // 3.转换:JSX语法能够让我们更直观的看到组件的DOM结构,不能直接在浏览器上运行,最终会转化成JavaScript代码执行 ReactDOM.render( React.createElement("h1",null,"Hello React"), document.getElementById("container") ); // 4.在JSX中运行JavaScript代码 // 使用{}括起来 {表达式} // var text = "百度"; ReactDOM.render( <h1>{text}</h1>, document.getElementById("container") ); // 5.例如:属性、设置样式、事件绑定 </script> </html>
2.设置组件样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 1.react.js是React的核心库 --> <script src="http://www.mamicode.com/js/react.min.js" charset="utf-8"></script> <!-- 2.react-dom.js的作用是提供与DOM相关的功能 --> <script src="http://www.mamicode.com/js/react-dom.min.js" charset="utf-8"></script> <!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 --> <script src="http://www.mamicode.com/js/browser.min.js" charset="utf-8"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> <style> .pStyle { font-size: 20px; } </style> </head> <body> <!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 --> <div id="container"> </div> </body> <!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel --> <!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 --> <script type="text/babel"> // 7.在此处编写React代码 /* 创建一个组件类,用于输出Hello React 1.React中创建的组件类以大写字母开头,驼峰命名法 2.在React中使用React.createClass方法创建一个组件类 3.核心代码:每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值:null、false、组件模板 4.注意:组件类只能包含一个顶层标签 */ // var HelloMessage = React.createClass({ // render:function(){ // return <h1>Hello React</h1>; // } // }); // // 渲染 // ReactDOM.render( // // 在模板中插入<HelloMessage />会自动生成一个实例 // <HelloMessage />, // document.getElementById("container") // ); /* 设置组件的样式,三种: 1.内联样式 2.对象样式 3.选择器样式 注意:在React和HTML5中设置样式时的书写格式是有区别的 * 1.HTML5以 ; 结尾 React以 , 结尾 * 2.HTML5中key、value都不加引号 React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法(例:backgroundColor)。如果value为字符串,需要加引号。 * 3.HTML5中,value如果是数字,需要带单位 React中不需要带单位 * 我们定义一个组件类,同时使用三种设置组件样式的方式 * 需求:定义一个组件,分为上下两行显示内容 * <div> 内联样式:设置背景颜色,边框大小,边框颜色 * <h1></h1> 对象样式:设置背景颜色,字体颜色 * <p></p> 选择器样式:设置字体大小 * </div> * * class 和 for 是React中的保留字 * 注意:在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换。 * 类似的:使用htmlFor替换for */ // 创建设置h1样式对象 var hStyle = { backgroundColor:"green", color:"red" } // 创建组件 通过this.props传值 var ShowMessage = React.createClass({ render:function() { return ( // 外面的{}是JSX语法,里面的{}表示对象 <div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}> <h1 style={hStyle}>{this.props.firstRow}</h1> <p className="pStyle">{this.props.secondRow}</p> </div> ); } }); ReactDOM.render( <ShowMessage firstRow="你好" secondRow="世界" />, document.getElementById("container") ); </script> </html>
3.复合组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 1.react.js是React的核心库 --> <script src="http://www.mamicode.com/js/react.min.js" charset="utf-8"></script> <!-- 2.react-dom.js的作用是提供与DOM相关的功能 --> <script src="http://www.mamicode.com/js/react-dom.min.js" charset="utf-8"></script> <!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 --> <script src="http://www.mamicode.com/js/browser.min.js" charset="utf-8"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> --> </head> <body> <!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 --> <div id="container"> </div> </body> <!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel --> <!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 --> <script type="text/babel"> // 7.在此处编写React代码 /* 复合组件 也被称为组合组件,创建多个组件合成一个组件。 */ /* 定义一个组件WebShow。功能:输出网站的名字和网址,网址是一个可以点击的链接。 分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,兵器可以点击 */ // 定义WebName组件 var WebName = React.createClass({ render:function() { return <h1>百度</h1>; } }); // 定义WebLink组件 var WebLink = React.createClass({ render:function() { return <a href="http://www.baidu.com">http://www.baidu.com</a>; } }); // 定义复合组件 WebShow var WebShow = React.createClass({ render:function() { return ( // 嵌套组件 <div> <WebName /> <WebLink /> </div> ); } }); // 将组件类WebShow渲染到网页上 ReactDOM.render( <WebShow />, document.getElementById("container") ); </script> </html>
4.
React Native 爬坑之路
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。