如果有使用過其他框架的經驗，可能會需要熟悉一下React 的寫法，是由 JSX 搭配迴圈去產生。以下羅列一些需要注意的地方：

• 常見使用 map、filter 、reduce 等處理陣列法語處理列表
• 注意列表需要綁上一個 key 值，作為 React 在更新 React DOM tree 時的辨識，而 key 必須是唯一
• key 的綁定必須在陣列處理時被綁定 (下面提供反例)

1. 2. 一個簡單的範例

資料如果有類似 id 的 key 最好，不然可考慮使用物件本身綁定。

const lists = [{
        id: 1,
        name: 'Apple'
    }, {
        id: 2,
        name: 'Banana'
    },
    {
        id: 3,
        name: 'Berry'
    }
]


function Vender(props) {
    const lists = props.lists;
    const listItems = lists.map((list) =>
        <li key = {list.id}>
          { list.name }
        </li>
    );
    return (
      <ul>
          { listItems }
      </ul>
    );
}

ReactDOM.render( <Vender lists = {lists}/>,
document.getElementById('root'));

另附上 Codepen

應該避免的錯誤(3. key 的綁定必須在陣列處理時被綁定)

const fruits = [
  {
    name: 'tomato',
    color: 'red',
    id: '#aaa'
  },
  //資料略
]

function ListItem(props) {
  // 在元件內才綁定，而非在處理陣列時
  return <li key={props.id}>{props.value}</li>;
}

function FruitsList(props) {
  const fruits = props.fruits;
  return (
    <ul>
      {fruits.map((fruit) =>
        //正確寫法 <ListItem id={fruit.id} value={fruit.name} />
        <ListItem id={fruit.id} value={fruit.name} />
      )}
    </ul>
  );
}

ReactDOM.render(
  <FruitsList fruits={fruits} />,
  document.getElementById('root')
);

參考資料：
https://zh-hant.reactjs.org/docs/lists-and-keys.html