7、React开发：从基础组件到JSX应用

React开发：从基础组件到JSX应用

1. React组件基础

1.1 组件封装与创建

在React中，我们可以将与UI相关的所有内容封装到一个组件中。例如，对于一个食材列表组件 IngredientsList ，我们可以通过以下方式创建：

class IngredientsList extends React.Component {
  renderListItem(ingredient, i) {
    return React.createElement("li", { key: i }, ingredient)
  }
  render() {
    return React.createElement("ul", {className: "ingredients"},
        this.props.items.map(this.renderListItem)
    )
  }
}

这里， renderListItem 方法用于创建列表项， render 方法用于创建整个无序列表。当我们使用这个组件时，React会根据传入的数据渲染出对应的无序列表。

1.2 组件类型与实例化

在渲染HTML或SVG元素时，我们使用字符串来指定元素类型；而在创建组件元素时，我们直接使用组件类。例如：

React.createElement(In