React 入门小册(二) jsx与Elements

JSX 是什么？

JSX，全称为 JavaScript XML，是一种类似 HTML 的语法扩展，它可以让我们在 JavaScript 代码中编写类似 XML 的结构。JSX 并不是合法的 JavaScript 代码，但是我们可以 transpilers（如 Babel） 编译成可以被浏览器理解的代码。

如何定义元素 (Elements)

在使用 JSX 时，我们可以直接在 JavaScript 代码中编写 HTML 标签或自定义标签，这些标签被称为元素。例如，在 JSX 中创建一个 div 元素，我们只需要像这样写代码：

const element = <div>This is a React element.</div>;

元素渲染

在 React 中，我们通过 ReactDOM 提供的 render() 方法来将元素渲染到页面上。我们首先需要在 HTML 页面中准备好容纳 React 组件的元素（即 mountNode），然后将要渲染的组件传给 ReactDOM.render() 方法进行渲染。

例如，在 HTML 页面中有一个 id 为 “root” 的空 div 节点，我们可以将组件渲染到这个节点上：

<div id="root"></div>

在 JavaScript 的代码中，通过调用 render() 方法实现渲染：

const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

最终效果就是在 id 为 “root” 的节点下面插入了一个 h1 元素，内容是 “Hello, World!”。

元素属性 (Props) 是什么？

元素属性（Props）是我们向组件传递数据的方式之一，也是开发 React 应用必须掌握的基础知识之一。它是一个包含属性和值的对象，我们可以在组件定义时声明组件所接收到的属性类型和默认值。在组件内部使用 props 拿到传递过来的数据，在组件的 return 语句里渲染出来。

例如，我们可以在定义组件时设置一个名为 “name” 的 props 属性：

function Greeting(props) {
  return <div>Hello, {props.name}!</div>;
}
const element = <Greeting name="React" />;
ReactDOM.render(element, document.getElementById('root'));

在上面的示例中，我们定义了一个"姓名"