JSX

---

1.内嵌表达式

放在curly braces中，多行时最好用parenthesis括起来避免自动断句。

2.jsx也是js表达式

3.jsx的属性

字符串字面量可用引号，js表达式用花括号。不要同时用，不然会当做字符串。

4.驼峰大小写

5.安全性

渲染前会excape，因此可将用户输入安全放入jsx中

6.jsx代表了一个对象

babel将jsx编译为React.createElement()，生成“react elements”

ELEMENT

---

1. element是最小的块
2. element是immutable的，一旦创建，不能改变子对象和属性。
3. 通过ReactDOM.render()渲染

COMPONENT

---

独立的可复用的

Define a component

1. es6 class:

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
  }
}

2. functional component:

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

NOTE:

1. start component name with a capital letter

2. components must return a single root element;

3. props are read-only,it must never modify its own props

4. 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);