Refactoring: Stateless functional components

app/components/About.jsx

@@ -1,11 +1,17 @@
 var React = require('react');
 
-var About = React.createClass({
-  render: function (){
+// var About = React.createClass({
+//   render: function (){
+//     return (
+//       <h3>About Component</h3>
+//     );
+//   }
+// });
+
+var About = (props) => {
   return (
     <h3>About Component</h3>
   );
-  }
-});
+};
 
 module.exports = About;

app/components/Examples.jsx

@@ -1,11 +1,16 @@
 var React = require('react');
 
-var Examples = React.createClass({
-  render: function () {
+// var Examples = React.createClass({
+//   render: function () {
+//     return (
+//       <h3>Examples Component</h3>
+//     );
+//   }
+// });
+
+var Examples = () => {
   return (
     <h3>Examples Component</h3>
   );
-  }
-});
-
+};
 module.exports = Examples;

app/components/Main.jsx

@@ -1,17 +1,28 @@
 var React = require('react');
 var Nav = require('Nav');
 
-var Main = React.createClass({
-  render: function () {
+// var Main = React.createClass({
+//   render: function () {
+//     return (
+//       <div>
+//         <Nav/>
+//         <h2>Main Component</h2>
+//         {this.props.children}
+//       </div>
+//
+//     );
+//   }
+// });
+
+var Main = (props) => {
   return (
     <div>
       <Nav/>
       <h2>Main Component</h2>
-        {this.props.children}
+      {props.children}
     </div>
 
   );
-  }
-});
+};
 
 module.exports = Main;

app/components/Nav.jsx

@@ -1,8 +1,20 @@
 var React = require('react');
 var {Link, IndexLink} = require('react-router');
 
-var Nav = React.createClass({
-  render: function (){
+// var Nav = React.createClass({
+//   render: function (){
+//     return (
+//       <div>
+//         <h2>Nav Component</h2>
+//         <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink>
+//         <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link>
+//         <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
+//       </div>
+//     );
+//   }
+// });
+
+var Nav = () => {
   return (
     <div>
       <h2>Nav Component</h2>
@@ -11,7 +23,5 @@ var Nav = React.createClass({
       <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
     </div>
   );
-  }
-});
-
+};
 module.exports = Nav;

app/components/WeatherMessage.jsx

@@ -1,13 +1,28 @@
 var React = require('react');
 
-var WeatherMessage = React.createClass({
-  render: function () {
-    var {temp, location} = this.props;
+// var WeatherMessage = React.createClass({
+//   render: function () {
+//     var {temp, location} = this.props;
+//
+//     return (
+//       <h3>It's it {temp} in {location}.</h3>
+//     )
+//   }
+// });
 
+// Refactoring stateless function
+
+// var WeatherMessage = (props) => {
+//   var {temp, location} = props;
+//   return (
+//     <h3>It's it {temp} in {location}.</h3>
+//   )
+// };
+// (or)
+var WeatherMessage = ({temp, location}) => {
   return (
     <h3>It's it {temp} in {location}.</h3>
   )
-  }
-});
+};
 
 module.exports = WeatherMessage;

example-arrow-functions.js

@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Provides example arrow-function functionality.
+ */
+
+// var names = ['Swapna', 'Raghu', 'Ram'];
+
+// names.forEach(function (name) {
+//   console.log('forEach', name);
+// });
+
+// names.forEach((name) => {
+//   console.log('arrowFunc', name);
+// });
+
+// names.forEach((name) => console.log(name));
+
+//anonymous function 
+function add (a,b) {
+	return a+b ;
+}
+
+console.log(add(1,3));
+
+//Arrow function: addStatement {for multiple lines}
+var addStatement = (a,b) => {
+	return a + b;
+}
+console.log(addStatement(5,6));
+
+//Arrow function: addExpression {for single line / expression }
+var addExpression = (a,b) => a + b ;
+console.log(addExpression(5,-3));

webpack.config.js

@@ -29,5 +29,6 @@ module.exports = {
         exclude: /(node_modules|bower_components)/
       }
     ]
-  }
+  },
+  devtool: 'cheap-module-eval-source-map'
 };