1 <html> 2 3 4 5 <head> 6 7 <meta charset="utf-8"> 8 9 <title>学习React！！</title> 10 11 </head> 12 13 14 15 <body> 16 17 <div id="app"></div> 18 19 <script src="bower_components/react/react.js"></script> 20 21 <script src="bower_components/react/JSXTransformer.js"></script> 22 23 <script type="text/jsx"> 24 25 var MessageBox = React.createClass({ 26 27 alertMe: function(){ 28 29 alert('你刚才点了我一下。。。。'); 30 31 }, 32 33 render:function(){ 34 35 return ( <h1 onClick={this.alertMe}>你好世界！！！</h1> ) 36 37 } 38 39 }); 40 41 42 43 React.render( <MessageBox/>, 44 45 document.getElementById('app'), 46 47 function(){ 48 49 console.log('渲染完成啦！！'); 50 51 } 52 53 ) 54 55 56 57 58 59 </script> 60 61 62 63 64 65 </body> 66 67 68 69 </html> 70 71 72 73 <html> 74 75 76 77 <head> 78 79 <meta charset="utf-8"> 80 81 <title>学习React！！</title> 82 83 </head> 84 85 86 87 <body> 88 89 <div id="app"></div> 90 91 <script src="bower_components/react/react.js"></script> 92 93 <script src="bower_components/react/JSXTransformer.js"></script> 94 95 <script type="text/jsx"> 96 97 var MessageBox = React.createClass({ 98 99 render:function(){ 100 101 var submessages = []; 102 103 for(var ii=0; ii<10; ii++){ 104 105 submessages.push( 106 107 <Submessage key={'subMsg'+ii}/> 108 109 ) 110 111 } 112 113 114 115 return ( 116 117 <div> 118 119 <h1>你好世界！！！</h1> 120 121 {submessages} 122 123 </div> 124 125 ) 126 127 } 128 129 }); 130 131 132 133 var Submessage = React.createClass({ 134 135 render:function(){ 136 137 return ( 138 139 <div> 140 141 <h3>写代码很有意思</h3> 142 143 <Footer/> 144 145 </div> 146 147 ) 148 149 } 150 151 }); 152 153 154 155 var Footer = React.createClass({ 156 157 render: function(){ 158 159 return ( 160 161 <small>因为我们在用代码创造</small> 162 163 ) 164 165 } 166 167 }) 168 169 170 171 172 173 React.render( <MessageBox/>, 174 175 document.getElementById('app'), 176 177 function(){ 178 179 console.log('渲染完成啦！！'); 180 181 } 182 183 ) 184 185 186 187 188 189 </script> 190 191 192 193 194 195 </body> 196 197 198 199 </html> 200 201 202 203 204 205 <html> 206 207 208 209 <head> 210 211 <meta charset="utf-8"> 212 213 <title>学习React！！</title> 214 215 </head> 216 217 218 219 <body> 220 221 <div id="app"></div> 222 223 <script src="bower_components/react/react.js"></script> 224 225 <script src="bower_components/react/JSXTransformer.js"></script> 226 227 <script type="text/jsx"> 228 229 var MessageBox = React.createClass({ 230 231 getInitialState:function(){ 232 233 return { 234 235 isVisible: true, 236 237 titleMessage: '你好世界（来自state哦）', 238 239 } 240 241 }, 242 243 render:function(){ 244 245 var styleObj={ 246 247 display: this.state.isVisible ? 'block' : 'none', 248 249 } 250 251 252 253 return ( 254 255 <div> 256 257 <h1 style={styleObj}>{this.state.titleMessage}</h1> 258 259 <Submessage/> 260 261 </div> 262 263 ) 264 265 } 266 267 }); 268 269 270 271 var Submessage = React.createClass({ 272 273 render:function(){ 274 275 return ( 276 277 <h3>写代码很有意思</h3> 278 279 ) 280 281 } 282 283 }); 284 285 286 287 288 289 var messageBox = React.render( <MessageBox/>, 290 291 document.getElementById('app'), 292 293 function(){ 294 295 console.log('渲染完成啦！！'); 296 297 } 298 299 ) 300 301 302 303 304 305 </script> 306 307 308 309 310 311 </body> 312 313 314 315 </html> 316 317 318 319 <html> 320 321 322 323 <head> 324 325 <meta charset="utf-8"> 326 327 <title>学习React！！</title> 328 329 </head> 330 331 332 333 <body> 334 335 <div id="app"></div> 336 337 <script src="bower_components/react/react.js"></script> 338 339 <script src="bower_components/react/JSXTransformer.js"></script> 340 341 <script type="text/jsx"> 342 343 var ClickApp = React.createClass({ 344 345 getInitialState:function(){ 346 347 return { 348 349 clickCount: 0, } 350 351 }, 352 353 handleClick: function(){ 354 355 this.setState({ 356 357 clickCount: this.state.clickCount + 1, 358 359 }) 360 361 }, 362 363 render: function(){ 364 365 return ( 366 367 <div> 368 369 <h2>点击下面按钮</h2> 370 371 <button onClick={this.handleClick}>点击我</button> 372 373 <p>你一共点击了：{this.state.clickCount}</p> 374 375 </div> 376 377 ) 378 379 } 380 381 }); 382 383 384 385 var clickComponent = React.render( 386 387 <ClickApp />, 388 389 document.getElementById('app') 390 391 ) 392 393 394 395 396 397 </script> 398 399 400 401 402 403 </body> 404 405 406 407 </html> 408 409 410 411 <html> 412 413 414 415 <head> 416 417 <meta charset="utf-8"> 418 419 <title>学习React！！</title> 420 421 </head> 422 423 424 425 <body> 426 427 <div id="app"></div> 428 429 <script src="bower_components/react/react.js"></script> 430 431 <script src="bower_components/react/JSXTransformer.js"></script> 432 433 <script type="text/jsx"> 434 435 var MessageBox = React.createClass({ 436 437 getInitialState:function(){ 438 439 return { 440 441 isVisible: true, 442 443 subMessages:[ 444 445 '我会代码搬砖', 446 447 '以及花式搬砖', 448 449 '不说了，工头叫我回去搬砖了。。。。。。', 450 451 ] 452 453 } 454 455 }, 456 457 render:function(){ 458 459 460 461 return ( 462 463 <div> 464 465 <h1>{this.props.title}</h1> 466 467 <Submessage messages={this.state.subMessages} /> 468 469 </div> 470 471 ) 472 473 } 474 475 }); 476 477 478 479 var Submessage = React.createClass({ 480 481 propTypes:{ 482 483 messages: React.PropTypes.array.isRequired, 484 485 }, 486 487 getDefaultProps:function(){ 488 489 return { 490 491 messages: ['默认的子消息'], 492 493 } 494 495 }, 496 497 render:function(){ 498 499 var msgs = []; 500 501 this.props.messages.forEach(function(msg,index){ 502 503 msgs.push( 504 505 <p>码农说： {msg}</p> 506 507 ) 508 509 }); 510 511 512 513 return ( 514 515 <div>{msgs}</div> 516 517 ) 518 519 } 520 521 }); 522 523 524 525 var title = '你好世界（来自props哦）'; 526 527 528 529 var messageBox = React.render( <MessageBox title={title}/>, 530 531 document.getElementById('app') 532 533 ) 534 535 536 537 538 539 </script> 540 541 542 543 544 545 </body> 546 547 548 549 </html> 550 551 552 553 554 555 <html> 556 557 558 559 <head> 560 561 <meta charset="utf-8"> 562 563 <title>学习React！！</title> 564 565 </head> 566 567 568 569 <body> 570 571 <div id="app"></div> 572 573 <script src="bower_components/react/react.js"></script> 574 575 <script src="bower_components/react/JSXTransformer.js"></script> 576 577 <script type="text/jsx"> 578 579 var ClickApp = React.createClass({ 580 581 getInitialState:function(){ 582 583 return { 584 585 clickCount: 0, } 586 587 }, 588 589 handleClick: function(e){ 590 591 this.setState({ 592 593 clickCount: this.state.clickCount + 1, 594 595 }); 596 597 console.log(e.nativeEvent); 598 599 600 601 }, 602 603 render: function(){ 604 605 return ( 606 607 <div> 608 609 <h2>点击下面按钮</h2> 610 611 <button onClick={this.handleClick}>点击我</button> 612 613 <p>你一共点击了：{this.state.clickCount}</p> 614 615 </div> 616 617 ) 618 619 } 620 621 }); 622 623 624 625 var clickComponent = React.render( 626 627 <ClickApp />, 628 629 document.getElementById('app') 630 631 ) 632 633 634 635 636 637 </script> 638 639 640 641 642 643 </body> 644 645 646 647 </html> 648 649 650 651 652 653 <html> 654 655 656 657 <head> 658 659 <meta charset="utf-8"> 660 661 <title>学习React！！</title> 662 663 </head> 664 665 666 667 <body> 668 669 <div id="app"></div> 670 671 <script src="bower_components/react/react.js"></script> 672 673 <script src="bower_components/react/JSXTransformer.js"></script> 674 675 <script type="text/jsx"> 676 677 var FormApp = React.createClass({ 678 679 getInitialState:function(){ 680 681 return { 682 683 inputValue: 'input value', 684 685 selectValue: 'A', 686 687 radioValue:'B', 688 689 checkValues:[], 690 691 textareaValue:'some text here,,,,,' 692 693 } 694 695 }, 696 697 handleSubmit:function(e){ 698 699 e.preventDefault(); 700 701 var formData = { 702 703 input: this.refs.goodInput.getDOMNode().value, 704 705 select: this.refs.goodSelect.getDOMNode().value, 706 707 textarea: this.refs.goodTextarea.getDOMNode().value, 708 709 radio: this.state.radioValue, 710 711 check: this.state.checkValues, 712 713 } 714 715 716 717 console.log('the form result is:') 718 719 console.log(formData); 720 721 722 723 this.refs.goodRadio.saySomething(); 724 725 726 727 }, 728 729 handleRadio:function(e){ 730 731 this.setState({ 732 733 radioValue: e.target.value, 734 735 }) 736 737 }, 738 739 handleCheck:function(e){ 740 741 var checkValues = this.state.checkValues.slice(); 742 743 var newVal = e.target.value; 744 745 var index = checkValues.indexOf(newVal); 746 747 if( index == -1 ){ 748 749 checkValues.push( newVal ) 750 751 }else{ 752 753 checkValues.splice(index,1); 754 755 } 756 757 758 759 this.setState({ 760 761 checkValues: checkValues, 762 763 }) 764 765 }, 766 767 render: function(){ 768 769 return ( 770 771 <form onSubmit={this.handleSubmit}> 772 773 <input ref="goodInput" type="text" defaultValue={this.state.inputValue }/> 774 775 <br/> 776 777 选项： 778 779 <select defaultValue={ this.state.selectValue } ref="goodSelect"> 780 781 <option value="A">A</option> 782 783 <option value="B">B</option> 784 785 <option value="C">C</option> 786 787 <option value="D">D</option> 788 789 <option value="E">E</option> 790 791 </select> 792 793 <br/> 794 795 <p>radio button!</p> 796 797 <RadioButtons ref="goodRadio" handleRadio={this.handleRadio} /> 798 799 <br/> 800 801 802 803 <Checkboxes handleCheck={this.handleCheck} /> 804 805 <br/> 806 807 <textarea defaultValue={this.state.textareaValue} ref="goodTextarea"></textarea> 808 809 <button type="submit">提交</button> 810 811 812 813 </form> 814 815 ) 816 817 } 818 819 }); 820 821 822 823 var RadioButtons = React.createClass({ 824 825 saySomething:function(){ 826 827 alert("yo what's up man!"); 828 829 }, 830 831 render:function(){ 832 833 return ( 834 835 <span> 836 837 A 838 839 <input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="A"/> 840 841 B 842 843 <input onChange={this.props.handleRadio} name="goodRadio" type="radio" defaultChecked value="B"/> 844 845 C 846 847 <input onChange={this.props.handleRadio} name="goodRadio" type="radio" value="C"/> 848 849 </span> 850 851 ) 852 853 } 854 855 }); 856 857 858 859 var Checkboxes = React.createClass({ 860 861 render: function(){ 862 863 return ( 864 865 <span> 866 867 A 868 869 <input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="A"/> 870 871 B 872 873 <input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="B" /> 874 875 C 876 877 <input onChange={this.props.handleCheck} name="goodCheckbox" type="checkbox" value="C" /> 878 879 </span> 880 881 ) 882 883 } 884 885 }) 886 887 888 889 890 891 var formApp = React.render( 892 893 <FormApp />, 894 895 document.getElementById('app') 896 897 ) 898 899 900 901 902 903 </script> 904 905 906 907 908 909 </body> 910 911 912 913 </html> 914 915 916 917 918 919 <html> 920 921 922 923 <head> 924 925 <meta charset="utf-8"> 926 927 <title>学习React！！</title> 928 929 </head> 930 931 932 933 <body> 934 935 <div id="app"></div> 936 937 <script src="bower_components/react/react-with-addons.js"></script> 938 939 <script src="bower_components/react/JSXTransformer.js"></script> 940 941 <script type="text/jsx"> 942 943 var EasyForm = React.createClass({ 944 945 mixins: [ React.addons.LinkedStateMixin ], 946 947 getInitialState:function(){ 948 949 return { 950 951 message: 'react is awesome!', 952 953 isReactAwesome: true, 954 955 } 956 957 }, 958 959 render:function(){ 960 961 return ( 962 963 <div> 964 965 <h1>我想说： {this.state.message}</h1> 966 967 <h2>React是不是很好用？ {this.state.isReactAwesome?'非常好用！':'一般般。。。'}</h2> 968 969 <input type="text" valueLink={this.linkState('message')} /> 970 971 <br/> 972 973 <input type="checkbox" checkedLink={this.linkState('isReactAwesome') } /> 974 975 <br/> 976 977 <SubComp messageLink={ this.linkState('message') } likeLink={this.linkState('isReactAwesome')} /> 978 979 980 981 </div> 982 983 ) 984 985 } 986 987 }); 988 989 990 991 var SubComp = React.createClass({ 992 993 render:function(){ 994 995 return ( 996 997 <div> 998 999 <h3>这是个子组件哦</h3> 1000 1001 <SubSubComp {...this.props } /> 1002 1003 </div> 1004 1005 ) 1006 1007 } 1008 1009 }); 1010 1011 1012 1013 var SubSubComp = React.createClass({ 1014 1015 render:function(){ 1016 1017 return ( 1018 1019 <div> 1020 1021 <p>你想说什么？</p> 1022 1023 <input type="text" valueLink={ this.props.messageLink } /> 1024 1025 <p>你稀罕React么？</p> 1026 1027 <input type="checkbox" checkedLink = {this.props.likeLink } /> 1028 1029 </div> 1030 1031 ) 1032 1033 } 1034 1035 }) 1036 1037 1038 1039 1040 1041 React.render( <EasyForm />, document.getElementById('app') ); 1042 1043 1044 1045 1046 1047 </script> 1048 1049 1050 1051 1052 1053 </body> 1054 1055 1056 1057 </html> 1058 1059 1060 1061 1062 1063 <html> 1064 1065 1066 1067 <head> 1068 1069 <meta charset="utf-8"> 1070 1071 <title>学习React！！</title> 1072 1073 </head> 1074 1075 1076 1077 <body> 1078 1079 <div id="app"></div> 1080 1081 <script src="bower_components/react/react.js"></script> 1082 1083 <script src="bower_components/react/JSXTransformer.js"></script> 1084 1085 <script type="text/jsx"> 1086 1087 var MessageBox = React.createClass({ 1088 1089 getInitialState:function(){ 1090 1091 console.log('getInitialState'); 1092 1093 return { 1094 1095 count: 0, 1096 1097 } 1098 1099 }, 1100 1101 getDefaultProps:function(){ 1102 1103 console.log('getDefaultProps'); 1104 1105 return {}; 1106 1107 }, 1108 1109 componentWillMount:function(){ 1110 1111 console.log('componentWillMount'); 1112 1113 var self = this; 1114 1115 1116 1117 this.timer = setInterval(function(){ 1118 1119 self.setState({ 1120 1121 count: self.state.count + 1, 1122 1123 }) 1124 1125 },1000); 1126 1127 1128 1129 }, 1130 1131 componentDidMount:function(){ 1132 1133 console.log('componentDidMount') 1134 1135 console.log(this.getDOMNode() ); 1136 1137 }, 1138 1139 componentWillUnmount: function(){ 1140 1141 alert('you are tring to kill me !! ') 1142 1143 1144 1145 clearInterval(this.timer); 1146 1147 1148 1149 }, 1150 1151 killMySelf: function(){ 1152 1153 React.unmountComponentAtNode( document.getElementById('app') ); 1154 1155 }, 1156 1157 render:function(){ 1158 1159 console.log('渲染') 1160 1161 return ( 1162 1163 <div> 1164 1165 <h1 > 计数： {this.state.count}</h1> 1166 1167 <button onClick={this.killMySelf}>卸载掉这个组件</button> 1168 1169 <Submessage/> 1170 1171 </div> 1172 1173 ) 1174 1175 } 1176 1177 }); 1178 1179 1180 1181 var Submessage = React.createClass({ 1182 1183 render:function(){ 1184 1185 return ( 1186 1187 <h3>写代码很有意思</h3> 1188 1189 ) 1190 1191 } 1192 1193 }); 1194 1195 1196 1197 1198 1199 var messageBox = React.render( <MessageBox/>, 1200 1201 document.getElementById('app') 1202 1203 ) 1204 1205 1206 1207 1208 1209 </script> 1210 1211 1212 1213 1214 1215 </body> 1216 1217 1218 1219 </html> 1220 1221 1222 1223 1224 1225 1226 1227 <html> 1228 1229 1230 1231 <head> 1232 1233 <meta charset="utf-8"> 1234 1235 <title>学习React！！</title> 1236 1237 </head> 1238 1239 1240 1241 <body> 1242 1243 <div id="app"></div> 1244 1245 <script src="bower_components/react/react.js"></script> 1246 1247 <script src="bower_components/react/JSXTransformer.js"></script> 1248 1249 <script type="text/jsx"> 1250 1251 var MessageBox = React.createClass({ 1252 1253 getInitialState:function(){ 1254 1255 return { 1256 1257 count: 0, 1258 1259 } 1260 1261 }, 1262 1263 getDefaultProps:function(){ 1264 1265 }, 1266 1267 // componentWillMount:function(){ 1268 1269 // }, 1270 1271 // componentDidMount:function(){ 1272 1273 // }, 1274 1275 // componentWillUnmount: function(){ 1276 1277 1278 1279 // }, 1280 1281 // 1282 1283 shouldComponentUpdate:function(nextProp,nextState){ 1284 1285 console.log('shouldComponentUpdate'); 1286 1287 if(nextState.count > 10) return false; 1288 1289 1290 1291 return true; 1292 1293 }, 1294 1295 componentWillUpdate:function(nextProp,nextState){ 1296 1297 console.log('componentWillUpdate'); 1298 1299 }, 1300 1301 componentDidUpdate:function(){ 1302 1303 console.log('componentDidUpdate'); 1304 1305 }, 1306 1307 killMySelf: function(){ 1308 1309 React.unmountComponentAtNode( document.getElementById('app') ); 1310 1311 }, 1312 1313 doUpdate:function(){ 1314 1315 this.setState({ 1316 1317 count: this.state.count + 1, 1318 1319 }); 1320 1321 }, 1322 1323 render:function(){ 1324 1325 console.log('渲染') 1326 1327 return ( 1328 1329 <div> 1330 1331 <h1 > 计数： {this.state.count}</h1> 1332 1333 <button onClick={this.killMySelf}>卸载掉这个组件</button> 1334 1335 <button onClick={this.doUpdate}>手动更新一下组件（包括子组件）</button> 1336 1337 <Submessage count={this.state.count}/> 1338 1339 </div> 1340 1341 ) 1342 1343 } 1344 1345 }); 1346 1347 1348 1349 var Submessage = React.createClass({ 1350 1351 componentWillReceiveProps:function(nextProp){ 1352 1353 console.log('子组件将要获得prop'); 1354 1355 1356 1357 }, 1358 1359 shouldComponentUpdate:function(nextProp,nextState){ 1360 1361 if(nextProp.count> 5) return false; 1362 1363 return true; 1364 1365 }, 1366 1367 render:function(){ 1368 1369 return ( 1370 1371 <h3>当前计数是：{this.props.count}</h3> 1372 1373 ) 1374 1375 } 1376 1377 }); 1378 1379 1380 1381 1382 1383 var messageBox = React.render( <MessageBox/>, 1384 1385 document.getElementById('app') 1386 1387 ) 1388 1389 1390 1391 1392 1393 </script> 1394 1395 1396 1397 1398 1399 </body> 1400 1401 1402 1403 </html> 1404 1405 1406 1407 1408 1409 1410 1411 <html> 1412 1413 1414 1415 <head> 1416 1417 <meta charset="utf-8"> 1418 1419 <title>学习React！！</title> 1420 1421 </head> 1422 1423 1424 1425 <body> 1426 1427 <div id="app"></div> 1428 1429 <script src="bower_components/react/react.js"></script> 1430 1431 <script src="bower_components/react/JSXTransformer.js"></script> 1432 1433 <script type="text/jsx"> 1434 1435 var stateRecordMixin = { 1436 1437 componentWillMount:function(){ 1438 1439 this.oldStates = []; 1440 1441 }, 1442 1443 componentWillUpdate: function(nextProp,nextState){ 1444 1445 this.oldStates.push(nextState); 1446 1447 }, 1448 1449 previousState:function(){ 1450 1451 var index = this.oldStates.length -1; 1452 1453 return index == -1 ? {} : this.oldStates[index]; 1454 1455 } 1456 1457 } 1458 1459 1460 1461 var MessageBox = React.createClass({ 1462 1463 mixins: [stateRecordMixin], 1464 1465 getInitialState:function(){ 1466 1467 return { 1468 1469 count: 0, 1470 1471 } 1472 1473 }, 1474 1475 doUpdate:function(){ 1476 1477 this.setState({ 1478 1479 count: this.state.count + 1, 1480 1481 }); 1482 1483 1484 1485 alert('上一次的计数是：'+this.previousState().count) 1486 1487 }, 1488 1489 render:function(){ 1490 1491 console.log('渲染') 1492 1493 return ( 1494 1495 <div> 1496 1497 <h1 > 计数： {this.state.count}</h1> 1498 1499 <button onClick={this.doUpdate}>手动更新一下组件（包括子组件）</button> 1500 1501 <Submessage count={this.state.count}/> 1502 1503 </div> 1504 1505 ) 1506 1507 } 1508 1509 }); 1510 1511 1512 1513 var Submessage = React.createClass({ 1514 1515 mixins: [stateRecordMixin], 1516 1517 getInitialState:function(){ 1518 1519 return { 1520 1521 count: 0, 1522 1523 } 1524 1525 }, 1526 1527 componentWillReceiveProps:function(nextProp){ 1528 1529 this.setState({ 1530 1531 count: this.props.count *2, 1532 1533 }) 1534 1535 }, 1536 1537 render:function(){ 1538 1539 console.log('上一次子组件的计数是：'+this.previousState().count ) 1540 1541 return ( 1542 1543 <h3>当前子组件的计数是：{this.state.count}</h3> 1544 1545 ) 1546 1547 } 1548 1549 }); 1550 1551 1552 1553 1554 1555 var messageBox = React.render( <MessageBox/>, 1556 1557 document.getElementById('app') 1558 1559 ) 1560 1561 1562 1563 1564 1565 </script> 1566 1567 1568 1569 1570 1571 </body> 1572 1573 1574 1575 </html> 1576 1577
扫一扫
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
