React官网示例中，关于遍历渲染的部分，这个怎么理解呢？

React的官网示例，有不明白的地方请教各位，希望能得到解惑。

const people = [
  '凯瑟琳·约翰逊: 数学家',
  '马里奥·莫利纳: 化学家',
  '穆罕默德·阿卜杜勒·萨拉姆: 物理学家',
  '珀西·莱温·朱利亚: 化学家',
  '苏布拉马尼扬·钱德拉塞卡: 天体物理学家',
];

export default function List() {
  const listItems = people.map(person =>
    <li>{person}</li>
  );
  return <ul>{listItems}</ul>;
}

官网地址：https://react.docschina.org/learn/rendering-lists问题1：{listItems}如果listItems是一个函数，我还能理解，可是这是个变量，看起来有点像数组变量，又有点不像，没有返回值啊。难道{}这个大括号就能输出自动遍历数组了？问题2：<li>{person}</li>，为什么前面没有return,也没有大括号包裹。这种jsx语法看上去有点像js，但是又有点离谱。

尝试搜索很多资料了