Final touches for the first day's code

README.md

@@ -1,9 +1,7 @@
-# accedia-workshops-reactjs
-
-A repository holding exercises for the Oct-2018 reactjs workshop at Accedia.
+# Accedia Workshops ReactJS
 
 Please run _npm install_ or _yarn install_ once you clone/download the repo.
 
-Please update the exercise number in  _./src/index.js_ accordingly while developing.
-
 To fire the application up, please run _npm run start_ in a terminal window.
+
+Please update the exercise number in  _./src/index.js_ accordingly while developing.

package.json

@@ -5,10 +5,8 @@
   "dependencies": {
     "react": "16.5.1",
     "react-dom": "16.5.1",
-    "react-redux": "5.0.7",
     "react-router-dom": "4.3.1",
-    "react-scripts": "1.1.5",
-    "redux": "4.0.0"
+    "react-scripts": "1.1.5"
   },
   "scripts": {
     "start": "react-scripts start"

src/exercise_1/index.js

@@ -1,20 +1,21 @@
 // Tasks:
-//    1. Add a heading tag(<h1>Accedia Workshops - ReactJS</h1>) to the top of the page.
-//    2. Add conditional logic(<span>{ #SOME_CONDITIONAL_METHOD# ? 'YAY, you won!' : 'NAY, you lost!' }</span>) in the render method.
+//    1. Add this heading tag(<h1>Accedia Workshops - ReactJS</h1>) to the top of the page.
+//    2. Add this tag with some conditional logic(<span>{ #REPLACE_THIS# ? 'YAY, you won!' : 'NAY, you lost!' }</span>) in the render method.
 
 import React, { Component } from 'react';
 
 class Exercise_1 extends Component {
   // A class level method that returns a random boolean value with rougly 50-50 chance.
   conditionalMethod() {
+    // Math.random() returns a random number between 0 and 1.
     return Math.random() >= 0.5;
   }
 
   // Note: The render method expects us to return a single component(object).
   // If you wish to add more than one tag, wrap them in a div.
   render() {
     return (
-      <p>Hello world</p>
+      <p>Hello world!</p>
     );
   }
 }

src/exercise_2/Todo.js

@@ -1,13 +1,14 @@
 // Tasks:
-//    1. Render 'V' or 'X' depending on the todo.completed flag(<span>{ #SOME_BOOLEAN_VALUE# ? 'V' : 'X'}</span>) below the title.
+//    1. Render 'V' or 'X' depending on the todo's completed flag(<span>{ #REPLACE_THIS# ? 'V' : 'X'}</span>) below the title.
 
 import React, { Component } from 'react';
 
 class Todo extends Component {
+  // Note that you are expecting an object from the parent component that is accessible via this.props.todo.
   render() {
     return (
       <div className='todo'>
-        <div>Title: {this.props.todo.title}</div>
+        <div>Title: { this.props.todo.title }</div>
       </div>
     )
   }

src/exercise_2/index.js

@@ -1,7 +1,7 @@
 // Tasks:
 //    1. Complete the tasks in the Todo component's file.
 //    2. Output the list of todos(see line 29), use the Todo component in the current working directory, it is already imported(line 7).
-//    3. Complete the exercise with no console errors regarding keys.
+//    3. Complete the exercise with no console errors regarding keys. Feel free to browse StackOverflow for info regarding the error.
 
 import React, { Component } from 'react';
 import Todo from './Todo';
@@ -26,6 +26,7 @@ class Exercise_2 extends Component {
 
         <div className="todos-container">
           {this.state.todos.map(currentTodo =>
+            // Check what is logged in your browser's console and appropriately rewrite the next line.
             console.log(currentTodo)
           )}
         </div>

src/exercise_3/Todo.js

@@ -1,15 +1,18 @@
 // Tasks: 
-//    1. Make the component a stateless one(a pure function);
+//    1. Make the component a stateless one(a pure function). Remember that the this keyword is not applicable while using a stateless component.
 
 import React, { Component } from 'react';
 
 class Todo extends Component {
   render() {
+    // This is a fancy ES6 syntax which is basically equivalent to the following two lines:
+    // const title = this.props.todo.title;
+    // const completed = this.props.todo.completed;
     const { title, completed } = this.props.todo;
 
     return (
       <div className='todo'>
-        <div>Title: {title}</div>
+        <div>Title: { title }</div>
         <span>{ completed ? 'V' : 'X'}</span>
       </div>
     )

src/exercise_3/index.js

@@ -6,6 +6,7 @@ import Todo from './Todo';
 
 class Exercise_3 extends Component {
   constructor(props) {
+    // The super() call below basically invokes the React.Component's initialization code. Again - fancy ES6.
     super(props)
 
     this.state = {
@@ -24,6 +25,7 @@ class Exercise_3 extends Component {
 
         <div className="todos-container">
           {this.state.todos.map(currentTodo =>
+            // Here each individual item has an unique key prop thus fixing the key warning that you previously encountered.
             <Todo key={currentTodo.id} todo={currentTodo} />
           )}
         </div>

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+// Importing a css file is basically done by referencing the css file.
 import './styles.css';
 
 // Note: Change this import if you wish to load a different exercise.