【超初心者】Reactで配列の値を.map()で展開する書き方 #React

このページを参考に配列の値をpropsとしてそれを.map()で展開する書き方をまとめました。
http://basic-react.axlight.com/html/lesson-07.html

環境

Babel
React
ReactDOM

書いてみた

HTML

<div id="app"></div>

React

const items = [
  { name: 'AAA', color: 'black'},
  { name: 'BBB', color: 'blue'},
  { name: 'CCC', color: 'orange'},
  { name: 'DDD', color: 'green'},
];

const Hello = ({name, color}) => (
  <div>
    <p style={{ color }}>Hello {name}!</p>
  </div>
);

const App = () => (
  <div>
    {items.map((item) => (
      <Hello name={item.name} color={item.color} />
     ))}
  </div>
);

const render = ReactDOM.render(<App />, document.getElementById('app'));
render();

まだまだ勉強不足