Home Explore Help
Register Sign In
fgm
/
front__codeschool-react
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

L2.7-nesting_and_passing_props

Frederic G. MARAND 7 years ago
parent
fcf5fedf41
commit
63807aead9
5 changed files with 76 additions and 23 deletions
Split View Show Diff Stats
  1. 17 0
      comments-mock.html
  2. 16 0
      comments.css
  3. 3 2
      index.html
  4. 40 0
      src/comments.js
  5. 0 21
      src/components.js

+ 17 - 0
comments-mock.html
View File 

@@ -0,0 +1,17 @@
 
+<div class="comment-box">
 
+  <h3>Comments</h3>
 
+  <h4 class="comment-count">2 comments</h4>
 
+  <div class="comment-list">
 
+    <div class="comment">
 
+      <p class="comment-header">Anne Droid</p>
 
+      <p class="comment-body">
 
+        I wanna know what love is...
 
+      </p>
 
+      <div class="comment-footer">
 
+        <a href="#" class="comment-footer-delete">
 
+          Delete comment
 
+        </a>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>

+ 16 - 0
comments.css
View File 

@@ -0,0 +1,16 @@
 
+body {
 
+  background-color: #639ca1;
 
+  color: white;
 
+  font-family: sans-serif;
 
+}
 
+
 
+.comment-box h3 {
 
+  display: none;
 
+}
 
+
 
+.comment-count,
 
+.comment-footer-delete {
 
+  background-color: #639ca1;
 
+  color: #7CB3B9;
 
+  text-decoration: none;
 
+}

+ 3 - 2
index.html
View File 

@@ -3,12 +3,13 @@
 
   <head>
 
     <meta charset="UTF-8">
 
     <title>React 1</title>
 
+    <link rel="stylesheet" href="comments.css" />
 
   </head>
 
   <body>
 
-    <div id="story-app"></div>
 
+    <div id="comments-app"></div>
 
 
     <script src="node_modules/react/dist/react.js"></script>
 
     <script src="node_modules/react-dom/dist/react-dom.js"></script>
 
-    <script src="lib/components.js"></script>
 
+    <script src="lib/comments.js"></script>
 
   </body>
 
 </html>

+ 40 - 0
src/comments.js
View File 

@@ -0,0 +1,40 @@
 
+// Good practice: name CSS classNamees like the associated component
 
+
 
+class Comment extends React.Component {
 
+  render() {
 
+    return (
 
+      <div className="comment">
 
+        <p className="comment-header">{this.props.author}</p>
 
+        <p className="comment-body">
 
+          {this.props.body}
 
+        </p>
 
+        <div className="comment-footer">
 
+          <a href="#" className="comment-footer-delete">
 
+            Delete comment
 
+          </a>
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+}
 
+
 
+class CommentBox extends React.Component {
 
+  render() {
 
+    return (
 
+      <div className="comment-box">
 
+        <h3>Comments</h3>
 
+        <h4 className="comment-count">2 comments</h4>
 
+        <div className="comment-list">
 
+          <Comment
 
+            author="Morgan McCircuit" body="Great picture!" />
 
+          <Comment
 
+            author="Bending Bender" body="Excellent stuff!" />
 
+        </div>
 
+      </div>
 
+    );
 
+  }
 
+}
 
+
 
+ReactDOM.render(
 
+  <CommentBox />, document.getElementById('comments-app')
 
+);

+ 0 - 21
src/components.js
View File 

@@ -1,21 +0,0 @@
 
-class StoryBox extends React.Component {
 
-  render() {
 
-    const now = new Date();
 
-
 
-    const topicsList = ['HTML', 'JavaScript', 'React'];
 
-
 
-    return (<div>
 
-      <h3>Stories</h3>
 
-      <p className="lead">
 
-        Current time: {now.toTimeString()}
 
-        </p>
 
-      <ul>
 
-        {topicsList.map((topic, index) => <li key={index}>{topic}</li>)}
 
-      </ul>
 
-    </div>);
 
-  }
 
-}
 
-
 
-ReactDOM.render(
 
-  <StoryBox/>, document.getElementById('story-app')
 
-);