<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Basic Example</title> <!-- react.js是react的核心库--> <script src="./build/react.js" charset="utf-8"></script> <!-- react-dom.js提供与dom有关的功能--> <script src="./build/react-dom.js" charset="utf-8"></script> <!-- browser.min.js将JSX语法转换成javascript语法，然后才能在浏览器上执行--> <script src="./build/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 type="text/css"> .pStyle{ font-size: 20px; } </style> </head> <body> <!-- react渲染的模板内容会插入到这个DOM节点中，作为一个容器--> <div id="container"> </div> </body> <!-- 在react开发中，使用JSX，跟JavaScript语法不兼容，在使用JSX的地方，药设置type="text/babel"--> <!-- babel转换编译器，ES6转换成可以在浏览器中运行的代码--> <script type="text/babel"> /*此处编辑react代码*/ /* 003.创建组件类 创建一个组件类，用于输出"basic react native 变量" 1.React中创建的组件类以大写字母开头，驼峰命名法 2.React中使用React.createClass方法创建一个组件类 3.每个组件类都必须实现自己的render方法，输出定义好的组件模板，返回值：null、false、组件模板 4.组件类只能包含一个顶层标签 */ /*创建组件类React.createClass，参数一般都要有render方法*/ /*var HelloMessage = React.createClass({ render: function () { return <h1>basic react native 变量</h1> } });*/ /*渲染，ReactDOM.render三个参数：渲染内容、插入到哪个DOM节点、渲染后回馈*/ /*ReactDOM.render( <HelloMessage />, document.getElementById("container") );*/ /* 004.React设置组件的样式 第一种：内敛样式 第二种：对象样式 第三种：选择器样式 在React中和在HTML5中设置样式，书写格式有区别 1.html5以;结尾 React以,结尾 2.html5中key和value都不加引号 React中属于JavaScript对象，key的名字不能出现“-”，需要使用驼峰命名法，如果value为字符串，需要加引号 3.html5中，value如果是数字，需要带单位 React中需要带单位 注意：在React中使用选择器样式设置组件样式时，属性名class要用className代替，for需要用htmlFor代替 */ /* var hStyle = { backgroundColor:"yellow", color:"red" } var ShowMessage = React.createClass({ render:function(){ return ( <div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}> div内敛样式 <h1 style={hStyle}>{this.props.firstName}</h1> <p className="pStyle">{this.props.secondName}</p> </div> ); } }); ReactDOM.render( <ShowMessage firstName="我是h1对象样式" secondName = "我是p选择器样式"/>, document.getElementById("container") );*/ /* 005.复合组件 组合组件，创建多个组件合成一个组件 定义一个组件WebShow输出网站名称和网址，其中网站名称使用WebName组件，网址使用WebLink组件 */ /* var WebName = React.createClass({ render:function(){ return <h1>百度</h1>; } }); var WebLink = React.createClass({ render:function(){ return <a href="http://www.baidu.com">http://www.baidu.com</a>; } }); var WebShow = React.createClass({ render:function(){ return ( <div> <WebName /> <WebLink /> </div> ); } }); ReactDOM.render( <WebShow />, document.getElementById("container") );*/ /* 006.props props是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息，一般是由父层组件传递给子组件 props对象中的属性与组件的属性一一对应(children例外)，不要直接去修改props中属性的值： this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。 ...this.props 是props提供的语法糖，可以将父组件中的全部属性全部复制给子组件 例如：定义一个组件Link（父），其中只包含一个<a>（子），我们不给<a>设置任何属性，所有属性从父组件中复制得到 this.props.children 组件的所有子节点 组件类的属性验证 propTypes 用于验证组件实例的属性是否符合要求 设置组件属性的默认值，通过实现组件的getDefaultProps方法，对属性设置默认值 */ /* var WebName = React.createClass({ render:function(){ return <h1>{this.props.webName}</h1>; } }); var WebLink = React.createClass({ render:function(){ return <a href={this.props.webLink}>{this.props.webLink}</a>; } }); var WebShow = React.createClass({ render:function(){ return ( <div> <WebName webName={this.props.wName}/> <WebLink webLink={this.props.wLink}/> </div> ); } }); ReactDOM.render( <WebShow wName="百度" wLink="http://www.baidu.com"/>, document.getElementById("container") );*/ /* var Link = React.createClass({ render:function(){ return <a {...this.props}>{this.props.name}</a>; } }); ReactDOM.render( <Link name="百度" href="http://www.baidu.com"/>, document.getElementById("container") ); */ /* 列表项数量和内容都不确定，在创建模板时才能确定 利用this.props.children从父组件获取需要展示的列表项内容 获取到列表项内容后，需要遍历children，逐项进行设置 使用React.Children.map方法 返回值：数组对象，这里数组中的元素是<li> //child是遍历得到的父组件的子节点 */ var ListComponent = React.createClass({ render:function(){ return ( <ul> React.Children.map(this.props.children,function(child){ return <li>{child}</li>; }); </ul> ); } }); ReactDOM.render( ( <ListComponent> <h1>百度</h1> <a href="http://www.baidu.com">http://www.baidu.com</a> </ListComponent> ), document.getElementById("container") ); /* var ListComponent = React.createClass({ propTypes:{ //验证title的数据类型必须是字符串 title:React.PropTypes.string.isRequired }, render:function(){ return <h1>{this.props.title}</h1>; } }); ReactDOM.render( ( <ListComponent title="组件类属性验证机制"> </ListComponent> ), document.getElementById("container") ); */ /* var ListComponent = React.createClass({ getDefaultProps:function(){ //设置属性默认值 return {title:"设置属性默认值"}; }, render:function(){ return <h1>{this.props.title}</h1>; } }); ReactDOM.render( ( <ListComponent> </ListComponent> ), document.getElementById("container") ); */ </script> </html>
react 入门（二）
工欲善其事 必先利其器