Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Readme #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 43 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,43 @@
# React-Webpack-Set-Up
Simple set up including hot reloading for a React web app

# React-Countdown

## What?

A React component that allows a countdown timer to be added to any react webpage.

## Why?

The timer allows users of a website to limit their use of the website. Examples of when this might be useful include work situations where motivation is a problem. At Founders and Coders we often have limited research time prior to discussion and a timer on a website could help.

## How to use

The component will be made available on NPM.

This code on github can be run locally with the command

```
npm run dev:start
```

## Dependencies

babel-loader
css-loader
jsx-loader
react
react-dom
style-loader
webpack

## Dev-Dependencies

react-hot-loader
webpack-dev-server

## Recommended Reading

These videos describe the life cycle of React components very clearly.

https://www.youtube.com/watch?v=COKXmnxlxLo
https://www.youtube.com/watch?v=2geeamehCOc
https://www.youtube.com/watch?v=Hvk14LD7S98
11 changes: 5 additions & 6 deletions src/js/components/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ var List = require('./List.js');
var Listtitle = require('./List-Title.js');
var Newitem = require('./Newitem.js');
var ScrollToTop = require('react-scroll-up');

var Countdown = require('./react-countdown.js');
var App = React.createClass({

render: function () {
Expand All @@ -23,12 +23,11 @@ var App = React.createClass({
return(
<div className='app-container'>
<Header title='Fridge' />
<Newitem />
<Listtitle {...listtitle} />

<Newitem />
<Listtitle {...listtitle} />
<List {...listItems}/>
<ScrollToTop showUnder={250}>
<span>SOHIL</span>
</ScrollToTop>
<Countdown />
<Footer title="Thank You For Visiting The Fridge" />

</div>
Expand Down
48 changes: 48 additions & 0 deletions src/js/components/react-countdown.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
'use strict';
var React = require('react');
var Countdown = React.createClass({
//var time= 100;
getInitialState: function(){
return {time:4}
},
update: function(){
var newTime = this.state.time - 1;
console.log(newTime);
this.setState({time:newTime})
if(this.state.time ===0){
console.log("clear!!!!");
clearInterval(this.decr)
}
},

componentWillMount: function(){
this.setState ({subtract: 1})
},

render: function(){
var divStyle = {
color: "red",
position:"fixed",
top:20,
right: 20,
height:50,
width:100,
background: "black",
};
return(
<div style = {divStyle}>
<h1>{"Time:",this.state.time, "s"}</h1>
</div>
)
},
componentDidMount: function(){
this.decr = setInterval(this.update,1000)
},

componentWillUnmount: function(){
console.log("im in component will unmount");

}
})

module.exports = Countdown