1.JSX使得在模板插入js变量
1 | <!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" >
|
登入後複製
2.ReactDomTest
1 | <!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 id= "Hello-world" >Hello, world!</h1>, document.getElementById( 'example' ) ); </script> </body></html>
|
登入後複製
3.使用JSX支持JS与HTML混用
1 | <!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' ];
|
登入後複製
4.创建组件
1 | <!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" >
|
登入後複製
5.使用属性 props
1 | <!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" >
|
登入後複製
6.PropsType
1 | <!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({
|
登入後複製
7.使用默认属性 GetDefaultProps
1 | <!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" >
|
登入後複製
8.获取真实dom
1 | <!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 () {
|
登入後複製
9.通过State改变状态
1 | <!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}); },
|
登入後複製
10.使用表单监听,更好的用户交互
1 | <!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" >
|
登入後複製
11.使用JSBIn 直接在浏览器运行,调试JSX 很方便
令文字渐变效果, 使用了props, 计时器等, 源码参考开始时给出的源代码地址
by: 潘尚
time: 2016.1.30