JSX
1.内嵌表达式
放在curly braces中,多行时最好用parenthesis括起来避免自动断句。
2.jsx也是js表达式
3.jsx的属性
字符串字面量可用引号,js表达式用花括号。不要同时用,不然会当做字符串。
4.驼峰大小写
5.安全性
渲染前会excape,因此可将用户输入安全放入jsx中
6.jsx代表了一个对象
babel将jsx编译为React.createElement()
,生成“react elements”
ELEMENT
- element是最小的块
- element是immutable的,一旦创建,不能改变子对象和属性。
- 通过
ReactDOM.render()
渲染
COMPONENT
独立的可复用的
Define a component
- es6 class:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
- functional component:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
NOTE:
start component name with a capital letter
components must return a single root element;
props are read-only,it must never modify its own props
naming props from the component's own point of view rather than the context in which it is being used(most of time it means to give its prop a more generic name);