vcgit-forge/ReactWeather
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/ReactWeather.git synced 2026-02-10 03:03:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring: Stateless functional components

Browse Source
This commit is contained in:
Raghu-Ch
2017-01-15 01:39:19 -08:00
parent 5926538f35
commit 01d5f986b1
8 changed files with 128 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/components/About.jsx
View File

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

19
app/components/Examples.jsx
View File

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

33
app/components/Main.jsx
View File

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

34
app/components/Nav.jsx
View File

@@ -1,17 +1,27 @@
var React = require('react');
var {Link, IndexLink} = require('react-router');
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 = 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>
<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>
);
};
module.exports = Nav;

2
app/components/Weather.jsx
View File

@@ -11,7 +11,7 @@ var Weather = React.createClass({
},
handleSearch: function (location) {
var that = this;
this.setState({isLoading: true});
openWeatherMap.getTemp(location).then(function (temp) {

31
app/components/WeatherMessage.jsx
View File

@@ -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>
// )
// }
// });
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;

33
example-arrow-functions.js Normal file
View File

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

3
webpack.config.js
View File

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