ホームページ > 記事 > ウェブフロントエンド > ReactJs の基本_html/css_WEB-ITnose
ReactJs の基本_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:58:041381ブラウズ
-
プロジェクトの一部のページを再構築する必要があり、ReactJs が使用されているため、いくつかの小さなデモを作成しました
-
ソース コードのアドレス (wiki を含む)
1.JSX によりテンプレートに js 変数を挿入できるようになります
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员 var arr = [ <h1> Hellow, Pan </h1>, <h2> I like React very much! </h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') ); </script> </body></html> 2.ReactDomTest
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body></html> 3. JSX を使用して JS と HTML の混合をサポートします
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var names = ['Shine', 'Pans', 'Panshang']; //jsx可以让html和js混用, <>是html, {}是js ReactDOM.render( <div> { names.map(function (name){ return <div> Hello, {name}!</div> }) } </div>, document.getElementById('example') ); </script> </body></html> 4. コンポーネントを作成します
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //HelloMessage 是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例 var HelloMessage = React.createClass({ render: function(){ return <h1>Hello, {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name = "Pan" />, document.getElementById('example') ); </script> </body></html> 5. 属性プロパティ
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取 var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>Pan! </span> </NotesList>, document.body ); </script> </body></html> を使用します。6.PropsType
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var MyTitle = React.createClass({ //要求title的属性的data类型是string,只能是string propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); //测试部分, 将title属性设置成 int类型, 然后会报错 //将123用引号包起来标示为字符串类型将不在报错 var data = 123; ReactDOM.render( <MyTitle title = {data} />, document.body ); </script> </body></html> 7. デフォルトのプロパティ GetDefaultProps
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //获取默认的属性 //获取的是title的值 var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'shinepans' }; }, render: function() { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle />, document.body ); </script> </body></html>8. 本物の dom を取得します
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var MyComponent = React.createClass({ handleClick: function() { //监听点击事件, 聚焦输入框 this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById('example') ); </script> </body></html>9. State を通じて状態を変更します。
<!DOCTYPE html><html> <head> <meta charset="utf-8")> </meta> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, //转换状态, 喜欢或不喜欢 render: function() { var text = this.state.liked ? '喜欢了' : '还没喜欢'; return ( <p onClick={this.handleClick}> 你{text}这个.点击文本改变你的状态. </p> ); } }); ReactDOM.render( <LikeButton />, document.getElementById('example') ); </script> </body></html>10. ユーザー対話を改善するためにフォーム監視を使用します
<!DOCTYPE html><html> <head> <meta charset="utf-8")> </meta> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //监听textarea的变化, 变化了就更新p标签里的内容 //下面初始化了 输入框和p的初始值 var Input = React.createClass({ getInitialState: function() { return {value: '请在文本框输入文本'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <textarea rows="10" cols="30" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); ReactDOM.render(<Input/>, document.body); </script> </body></html>11. JSBIn を使用してブラウザーで直接実行します。 JSX のデバッグは非常に便利です。 - JSBib URL
作成者: Pan Shang
時刻: 2016.1.30
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。