import React, {Component} from 'react';

import Item from '../Item';

import fruits from '../fruits'; // 引入的数据来源

import './style.css';

class List extends Component {
  render () {
    return (
      <ul className="list">
        {
          fruits.map((item, index) => {
            return (
              <li key={index}>{item}</li>
            )
          })
        }
      </ul>
    )
  }
}

export default List;

import React, {Component} from 'react';

import ReactDom from "react-dom";

import './style.css';

import Input from './Input';
import List from './List';  // 新引入的组件List


class App extends Component {
    render () {
        // 如何访问变量 -- 利用字符串模板
        // const hello = 'hello';
        // <h1>{hello}</h1>
        return (
            // 只能有一个容器，其他内容都放在这个容器里面
            <div className="app">
                <h1>Find my fruit</h1>
                <Input/>
                <List/>  // 新添加的组件List
            </div>
        );
    }
}

ReactDom.render(
    <App/>,
    document.getElementById('root')
);

fruits.map((item, index) => {
    return (
      <li key={index}>{item}</li> // 这里使用了key属性
    )
})