一,JSX语法:
- 顾名思义:是一个看起来很像 XML 的 JavaScript 语法扩展
- 一种 JavaScript 的语法扩展,完全是在 JavaScript 内部实现的。
- 标签内的语法
- 表达式用{},例如:<h1>{1+1}</h1>
- 没有if和else,可以用三目运算符,例如:<h1>{i == 1 ? 'True!' : 'False'}</h1>
- 创建react组件用大驼峰,react组件实例化和html标签用小驼峰
- 小驼峰:var myDivElement = <div className="foo" />;
- 大驼峰:var MyComponent = React.createClass({/*...*/});
- 小驼峰:var myElement = <MyComponent someProperty={true} />;
- Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用
-
下面两种代码的作用是完全相同的: const element = ( <h1 className="greeting"> Hello, world! </h1> ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );
-
- 注释:
- 在标签内部的注释需要花括号
- 在标签外的的注释不能使用花括号
-
ReactDOM.render( /*注释 */ <h1>孙朝阳 {/*注释*/}</h1>, document.getElementById('example') );
- 标签外的语法
- 行内样式:
- 属性是小驼峰,有联想,例如backgroundColor:'red'
-
-
<div style={{fontSize: '40px',color:'green'}}>
-
- 页内样式:
- 属性是小驼峰,没有联想,例如backgroundColor:'red'
-
-
import React, { Component } from 'react'; export default class States extends Component { render() { return ( <div style={{myStyle}}>哈哈</div> ) } } var myStyle = { fontSize: 50, color: '#FF0000' };
-
- 行内样式和页内样式共用
-
import React, { Component } from 'react'; export default class States extends Component { render() { return ( <div style={{myStyle,fontSize: '40px',color:'green'}}>哈哈</div> ) } } var myStyle = { fontSize: 50, color: '#FF0000' };
-
- 外部样式:属性是小横线连接,有联想
- 例如: background-color:'red'
- 行内样式:
二,组件
- 函数定义组件
-
定义: function HelloMessage(props) { return <h1>Hello World!</h1>; } 使用: {HelloMessage()}
-
- const使用组件
-
定义: function HelloMessage(props) { return <h1>Hello World!</h1>; } const element = <HelloMessage /> 使用: {element}
-
- class类定义组件
-
定义: class Welcome extends React.Component { render() { return <h1>Hello World!</h1>; } } 使用: < Welcome />
-