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();