├── .gitignore
├── .yarnclean
├── README.md
├── build
├── index.html
└── js
│ └── shopping-list.js
├── package.json
├── publish.sh
├── serve.sh
├── source
├── index.ejs
└── js
│ ├── components
│ ├── AddListItem.js
│ ├── EmptyList.js
│ ├── List.js
│ ├── ListHeader.js
│ ├── ListItem.js
│ ├── ListItemDescription.js
│ └── ShoppingList.js
│ └── index.js
├── update.sh
├── webpack.config.js
├── webpack.production.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
--------------------------------------------------------------------------------
/.yarnclean:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Shopping List with React.js.
2 |
3 | Basic shopping list implemented with React.js (`v15`) and Twitter Bootstrap (`v3`).
4 |
5 | Uses Webpack, [Yarn](https://code.facebook.com/posts/1840075619545360).
6 |
7 | ### Live
8 |
9 | http://fedosejev.github.io/shopping-list-react/
10 |
11 | ## Install
12 |
13 | 1. `npm install -g yarn`
14 | 2. `yarn install`
15 |
16 | #### What is Yarn?
17 | + https://code.facebook.com/posts/1840075619545360
18 | + https://scotch.io/tutorials/yarn-package-manager-an-improvement-over-npm
19 |
20 | ## Run
21 |
22 | 1. `npm start`
23 | 2. Open `http://localhost:8080` in a web browser.
24 |
25 | ## Build
26 |
27 | `npm run build`
28 |
29 | ## Other versions
30 |
31 | + [React.js and ES2015](https://github.com/fedosejev/shopping-list-react-es2015)
32 | + [React.js and Flux (ES5)](https://github.com/fedosejev/shopping-list-react-flux)
33 | + [React.js, Redux and ES2015](https://github.com/fedosejev/shopping-list-react-redux)
34 |
35 | ## Author
36 |
37 | Artemij Fedosejev
38 | + [Website](http://artemij.com)
39 | + [LinkedIn](https://www.linkedin.com/in/artemij)
40 | + [React.Tips](http://react.tips)
41 |
42 | ## License
43 |
44 | This software is released under the MIT license.
45 |
46 | This software comes with NO WARRANTY, expressed or implied.
47 |
48 |
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 | Shopping ListLoading application...
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shopping-list-react",
3 | "version": "1.0.0",
4 | "description": "Basic shopping list implemented with React.js.",
5 | "main": "",
6 | "scripts": {
7 | "start": "webpack-dev-server --hot --inline --progress --colors",
8 | "build": "webpack -p --config ./webpack.production.config.js",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "https://github.com/fedosejev/shopping-list-react.git"
14 | },
15 | "author": "Artemij Fedosejev",
16 | "license": "ISC",
17 | "bugs": {
18 | "url": "https://github.com/fedosejev/shopping-list-react/issues"
19 | },
20 | "homepage": "https://github.com/fedosejev/shopping-list-react",
21 | "devDependencies": {
22 | "babel-core": "^6.17.0",
23 | "babel-loader": "^6.2.5",
24 | "babel-preset-es2015": "^6.16.0",
25 | "babel-preset-react": "^6.16.0",
26 | "html-minify-loader": "^1.1.0",
27 | "html-webpack-plugin": "^2.22.0",
28 | "webpack": "^1.13.2",
29 | "webpack-dev-server": "^1.16.2"
30 | },
31 | "dependencies": {
32 | "node-uuid": "^1.4.2",
33 | "react": "^15.0",
34 | "react-dom": "^15.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/publish.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Build content and static files
4 | npm run build
5 |
6 | # Commit and push
7 | git add .
8 | git commit -m "Update"
9 | git push
10 |
11 | # Deploy on GitHub Pages
12 | git subtree push --prefix build origin gh-pages
--------------------------------------------------------------------------------
/serve.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # To disable caching, use -c-1.
4 | http-server -c-1 ./build
--------------------------------------------------------------------------------
/source/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Shopping List
7 |
8 |
13 |
14 |
15 |
16 |
Loading application...
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/source/js/components/AddListItem.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var uuid = require('node-uuid');
3 |
4 | var styleRequired = {
5 | color: "#ffaaaa"
6 | };
7 |
8 | var AddListItem = React.createClass({
9 |
10 | handleSubmitEvent: function (event) {
11 | event.preventDefault();
12 |
13 | var item = {
14 | id: uuid.v4(),
15 | date: new Date(),
16 | name: this.refs.name.value.trim(),
17 | description: this.refs.description.value.trim(),
18 | quantity: this.refs.quantity.value
19 | };
20 |
21 | this.props.addListItem(item);
22 | },
23 |
24 | render: function () {
25 | return (
26 |
53 | );
54 | }
55 | });
56 |
57 | module.exports = AddListItem;
58 |
--------------------------------------------------------------------------------
/source/js/components/EmptyList.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | var EmptyList = function () {
4 | return (
5 |
6 | There are no items in your list.
7 |
8 | );
9 | };
10 |
11 | module.exports = EmptyList;
--------------------------------------------------------------------------------
/source/js/components/List.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ListItem = require('./ListItem');
3 | var ListHeader = require('./ListHeader');
4 | var EmptyList = require('./EmptyList');
5 |
6 | var List = React.createClass({
7 |
8 | getListOfItemIds: function (items) {
9 | return Object.keys(items);
10 | },
11 |
12 | getTotalNumberOfListItems: function (items) {
13 | var totalNumberOfItems = 0;
14 | var item;
15 |
16 | this.getListOfItemIds(items).forEach(function (itemId) {
17 | item = items[itemId];
18 | totalNumberOfItems = totalNumberOfItems + parseInt(item.quantity, 10);
19 | });
20 |
21 | return totalNumberOfItems;
22 | },
23 |
24 | createListItemElements: function (items) {
25 | var item;
26 |
27 | return (
28 | this
29 | .getListOfItemIds(items)
30 | .map(function createListItemElement(itemId) {
31 | item = items[itemId];
32 | return ();
33 | }.bind(this))
34 | .reverse()
35 | );
36 | },
37 |
38 | render: function () {
39 | var items = this.props.items;
40 | var listItemElements = this.createListItemElements(items);
41 |
42 | return (
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | {listItemElements.length > 0 ? listItemElements : }
52 |
53 |
54 |
18 |
19 | {item.quantity} x {item.name}
20 |
21 |
22 | {item.description.length > 0 ?
: ''}
23 |
24 |
25 |
28 |
29 |
6 | {props.description}
7 |
8 | );
9 | };
10 |
11 | module.exports = ListItemDescription;
--------------------------------------------------------------------------------
/source/js/components/ShoppingList.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var List = require('./List');
3 | var AddListItem = require('./AddListItem');
4 |
5 | var ShoppingList = React.createClass({
6 |
7 | getInitialState: function () {
8 | return {
9 | list: {}
10 | };
11 | },
12 |
13 | updateList: function (newList) {
14 | this.setState({
15 | list: newList
16 | });
17 | },
18 |
19 | addListItem: function (item) {
20 | var list = this.state.list;
21 |
22 | list[item.id] = item;
23 |
24 | this.updateList(list);
25 | },
26 |
27 | removeListItem: function (itemId) {
28 | var list = this.state.list;
29 |
30 | delete list[itemId];
31 |
32 | this.updateList(list);
33 | },
34 |
35 | removeAllListItems: function () {
36 | this.updateList({});
37 | },
38 |
39 | render: function () {
40 | var items = this.state.list;
41 |
42 | return (
43 |
44 |
45 |
46 |
47 |
51 |
52 |
53 |
58 |
59 |