React JSX语法与组件

JSX基础介绍

先看看一个最简单的例子：

const element = <h1>Hello, world!</h1>;

上面这段有趣的例子既不是标准的JavaScript也不是HTML，它就是我们接下来要介绍的JSX的语法，是一种JavaScript的扩展。在React中使用JSX描述一个UI是什么样子的，就好像HTML告诉浏览器我们看到的页面是什么样子。最开始接触JSX时会感觉它很像一种模板语言，但是除了提供模板能力之外，他拥有JavaScript所有的能力。

JSX用于产生React的组件，JSX最大的特色就是就是在JavaScript中嵌入和HTML表达式。我们先看下面这个例子：

function formatName(user) {
  //将参数合并成一个srting
  return user.firstName + ' ' + user.lastName;
}

//创建user对象
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

//创建element对象，并用JSX语法标识为一个html内容。
//h1标签中会包含方法计算之后的内容
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

测试代码

这个例子将JSX语法分成了很多部分，element就是一个HTML的JSX表达式，HTML标签最好使用一组()括号包裹起来以避免分号导致的问题（分号可能会在编译时成为HTML内容的一部分）。ReactDOM是一个react工具，用于提供Dom渲染功能。ReactDOM.render 方法接受2个参数，一个是要渲染的JSX元素，另外一个是Dom对象，render会在这个Dom对象中添加由JSX定义的HTML。

JSX是一种丰富的表达式，他可以随意嵌套JavaScript和HTML使用，例如if、for等等，比如：

原文链接