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

Adds React/Redux example #1706

Closed
wants to merge 7 commits into from
Closed
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
2 changes: 2 additions & 0 deletions .jscsrc
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@
"examples/typescript-*/js/**/*.js",
"examples/vanilladart/**/*.js",
"examples/vanilla-es6/dist/bundle.js",
"examples/react-redux/js/reducers/*.js",
Copy link
Author

@paguillama paguillama Oct 18, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These reducers use object spread operator.

Adding the esnext option to jscs works but I couldn't find a way to extend a jscs configuration or use a specific one on the js folder in order to override this option. I also tried disabling jscs with inline comments (/* jscs: disable */) and didn't work. So I removed reducers from linting :|

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check http://stackoverflow.com/questions/25223149/is-there-any-way-for-jscs-to-ignore-rules-per-file-block-or-line

Quoting:
To ignore all rules

// Code here will be linted with JSCS.
// jscs:disable
// Code here will be ignored by JSCS.
// jscs:enable
To ignore a specific rule:

// Code here will be linted with JSCS.
// jscs:disable specificRule
// Code here will be ignored by JSCS.
// jscs:enable specificRule

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried it, but it didn't work. The only way I found to make it work is with the esnext flag.

"examples/react-redux/dist/*.js"
],
"requireSpaceBeforeBlockStatements": true,
"requireParenthesesAroundIIFE": true,
Expand Down
9 changes: 9 additions & 0 deletions examples/react-redux/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/node_modules/*

!/node_modules/todomvc-common/
/node_modules/todomvc-common/*
!/node_modules/todomvc-common/base.css

!/node_modules/todomvc-app-css/
/node_modules/todomvc-app-css/*
!/node_modules/todomvc-app-css/index.css
6 changes: 6 additions & 0 deletions examples/react-redux/.jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"extends": "../../.jshintrc",
"strict": false,
"esversion": 6,
"esnext": false
}
29 changes: 29 additions & 0 deletions examples/react-redux/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# React / Redux • [TodoMVC](http://todomvc.com)

> React is a JavaScript library for creating user interfaces. Its core principles are declarative code, efficiency, and flexibility. Simply specify what your component looks like and React will keep it up-to-date when the underlying data changes.

> Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

## Resources
- [React Website](https://facebook.github.io/react/)
- [Redux Website](http://redux.js.org/)

### Articles
- [Getting Started with React](https://facebook.github.io/react/docs/getting-started.html)
- [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux)
- [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux)

### Support
- [React Stack Overflow](http://stackoverflow.com/questions/tagged/react)
- [Redux Stack Overflow](http://stackoverflow.com/questions/tagged/redux)

## Implementation
This is an implementation of the [Redux Todo app example](https://github.com/reactjs/redux/tree/master/examples/todomvc).
In order to show React and Redux in a simple way, some cool features that are not directly related to React/Redux like multiple environments, a development server, CSS loading with webpack, etc, were not included.
Also, some [todomvc.com](http://todomvc.com) features (eg: clear completed) were implemented in order to comply with the app specs.


You can check it with any static web server (eg: `python -m SimpleHTTPServer`). The index.html file uses the bundled version by Babel created with `npm run dist` under the `dist` folder, but this bundle contains source maps to the JS source code located under the `js` folder, so developers can see and debug the application with the original code.

## Credit
Created by [paguillama](https://github.com/paguillama)
Loading