# JSX 编程思维

文件后缀用.js 还是.jsx

• JSX 并不是标准的 js 语法
• 鼓励在 js 文件里使用标准 JS 语法，而 React 语法用在在.jsx 文件中
• 结论：使用.js 或.jsx 都可以

为什么使用 JSX

• React 并不强制使用 JSX，也可以使用原生 JavaScript
• React 认为视图的本质就是渲染逻辑与 UI 视图表现的内在统一
• React 把 HTML 与渲染逻辑进行了耦合，形成了 JSX

JSX 的特点

• 常规的 HTML 代码都可以与 JSX 兼容
• 可以在 JSX 中嵌入表达式
• 使用 JSX 指定子元素
• JSX 命名约定
  • 使用 camelCase（小驼峰命名）来定义属性的名称
  • jsx自定义的属性，以data-开头
• JSX表示对象
  • JSX会被编译为React.createElement()对象

JSX实例

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);