diff --git a/src/.List.js.swp b/src/.List.js.swp
new file mode 100644
index 0000000..3217881
Binary files /dev/null and b/src/.List.js.swp differ
diff --git a/src/App.js b/src/App.js
index dc60d5b..f5ef825 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,19 @@
 import logo from './logo.svg';
+import List from "./List"
 import './App.css';
 
 function App() {
   return (
     <div className="App">
+      <List title='这是一个列表组件' listArr={
+        [
+          {id: '1', title: '掉队风险VS炸裂财富！未来10年，你必须跟上哪些赚钱新规则？'},
+          {id: '2', title: '全国省级经营性国有资产集中统一监管比例已超九成'},
+          {id: '3', title: '茅台还能走多远？'},
+          {id: '4', title: '日本2020年GDP萎缩4.8% 11年来首次呈现负增长'},
+          {id: '5', title: '韩国三星重工再获5艘LNG船大单'}
+        ]
+      }/>
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
diff --git a/src/List.js b/src/List.js
new file mode 100644
index 0000000..ac1cd86
--- /dev/null
+++ b/src/List.js
@@ -0,0 +1,32 @@
+
+/**
+ *  Web唐明明
+ *  匆匆数载恍如梦，岁月迢迢华发增。
+ *  碌碌无为枉半生，一朝惊醒万事空。
+ *  ComponentName: '列表'
+ */
+
+import React from "react"
+
+class List extends React.Component {
+  render() {
+    return (
+      <div>
+        <h3>{ this.props.title || '是一个列表内容' }</h3>
+        <ul>
+          {
+            this.props.listArr.map((item, key) => {
+              return (
+                <li key={key}>
+                  {item.title}
+                </li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default List