part 02

Author: rwieruch

src/components/App.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './App.css';
+import Stories from './Stories';
+
+const App = ({ stories }) =>
+  <div className="app">
+    <Stories stories={stories} />
+  </div>
+
+export default App;

src/components/Stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Stories.css';
+import Story from './Story';
+
+const Stories = ({ stories }) =>
+  <div className="stories">
+    {(stories || []).map(story =>
+      <Story
+        key={story.objectID}
+        story={story}
+      />
+    )}
+  </div>
+
+export default Stories;

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 (
+    <div className="story">
+      <span>
+        <a href={url}>{title}</a>
+      </span>
+      <span>{author}</span>
+      <span>{num_comments}</span>
+      <span>{points}</span>
+    </div>
+  );
+}
+
+export default Story;

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(<App />, 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(
+  <App stories={stories} />,
+  document.getElementById('root')
+);
 registerServiceWorker();