diff --git a/src/components/App.js b/src/components/App.js
index e69de29..86d61cb 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import './App.css';
+import Stories from './Stories';
+
+const App = ({ stories }) =>
+
+
+
+
+export default App;
\ No newline at end of file
diff --git a/src/components/Stories.js b/src/components/Stories.js
index e69de29..7b314f9 100644
--- a/src/components/Stories.js
+++ b/src/components/Stories.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './Stories.css';
+import Story from './Story';
+
+const Stories = ({ stories }) =>
+
+ {(stories || []).map(story =>
+
+ )}
+
+
+export default Stories;
\ No newline at end of file
diff --git a/src/components/Story.js b/src/components/Story.js
index e69de29..c7c06f2 100644
--- a/src/components/Story.js
+++ b/src/components/Story.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import './Story.css';
+
+const Story = ({ story }) => {
+ const {
+ title,
+ url,
+ author,
+ num_comments,
+ points,
+ } = story;
+
+ return (
+
+
+ {title}
+
+
{author}
+
{num_comments}
+
{points}
+
+ );
+}
+
+export default Story;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index fae3e35..1a550b1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,29 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
-import App from './App';
+import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
-ReactDOM.render(, document.getElementById('root'));
+const stories = [
+ {
+ title: 'React',
+ url: 'https://facebook.github.io/react/',
+ author: 'Jordan Walke',
+ num_comments: 3,
+ points: 4,
+ objectID: 0,
+ }, {
+ title: 'Redux',
+ url: 'https://github.com/reactjs/redux',
+ author: 'Dan Abramov, Andrew Clark',
+ num_comments: 2,
+ points: 5,
+ objectID: 1,
+ },
+];
+
+ReactDOM.render(
+ ,
+ document.getElementById('root')
+);
registerServiceWorker();