spapas / react-tutorial

A react-tutorial

A (not so simple) React application

This is a central repository that hosts various versions of the react project that correspond to the following articles from http://spapas.github.io/:

• http://spapas.github.io/2015/06/05/comprehensive-react-flux-tutorial/
• http://spapas.github.io/2015/07/02/comprehensive-react-flux-tutorial-2/
• http://spapas.github.io/2015/09/08/more-complex-react-flux-example/
• http://spapas.github.io/2016/03/02/react-redux-tutorial/

To be able to follow the articles, I've added a bunch of tags in the repository (they go from the simplest case to the most complex one):

• react-only: Use react only
• react-only-validation: Add validation to the above version
• react-flux: Introduce flux to the react-only version
• react-flux-better-organization: Improve the code structure by adding modules etc
• react-flux-complex: A more complex app with react and flux
• react-redux: Use redux with react
• react-redux-poll-update: Update UI automatically when there are changes to the data (uses polling)

Get code for a tag

To get the code for a tag, just clone the repository and do a:

git checkout TAG

python manage.py syncdb

If you use Django 1.7 or later.

python manage.py migrate

npm install

If you want to go to a different tag, you'll just do again a checkout to the corresponding tag and do an npm install, but you'll need to delete the db.sqlite3 file (that contains the database schema for the application) and then do a syncdb again because there may be differences in the database between different tags.

Running the application

First, you must install required modules.

pip install -U -r requirements.txt

Now, to actually run the application, you'll need to use

python manage.py runserver

to start the django development server (or run rs.bat/rs.sh depending on your shell). For the react-only version you can directly modify the js files and see the differences when you refresh the page in your browser. However, for all other versions a node-js toolset with browserify is used to compile the javascript sources to the bundle that is actually used.

So, when developing I recommend running npm run watch to start watchify which automatically re-builds your javascript bundle when it detects a change. Another solution is to run npm run build that will create a (minified) bundle with the current sources (but will need to be re-run by hand when something in your javascript changes).

You can find more info about how I use this node-js toolset (browserify, watchify, uglify, babel etc) @ http://spapas.github.io/2015/05/27/using-browserify-watchify/ for a basic tutorial and @ http://spapas.github.io/2015/11/16/using-browserify-es6/ for how to use ES6.

react-tutorial's Issues

how do get categories working?

Hello, I am trying to run the complex examples with categories and the cascading drop downs and they don't appear to be working for me. The dropdowns are empty for both categories and subcategories

the categories work on simple examples though.

I do a fresh install and delete the sqlite file, and run the migrate command each time i switch tags.

Any suggestions are much appreciated. thanks!

react-redux tag

I'am following the http://spapas.github.io/2016/03/02/react-redux-tutorial/ article and i see that the tag react-redux isn't available, why ?

__init__.py missing from books

Hi,

Thanks for the tutorial.

It looks like __init__.py file is missing from books, which blocks python manage.py syncdb or migrate.

How to Run each tag?

react-only
react-only-validation
react-flux
react-flux-better-organization
react-flux-complex

please be kind enough to give commands , how to run in each tag?

i tried , npm install , and npm start , but it does not work....

Getting more done in GitHub with ZenHub

Hola! @FerreiraRaphael has created a ZenHub account for the spapas organization. ZenHub is the only project management tool integrated natively in GitHub – created specifically for fast-moving, software-driven teams.

---

How do I use ZenHub?

To get set up with ZenHub, all you have to do is download the browser extension and log in with your GitHub account. Once you do, you’ll get access to ZenHub’s complete feature-set immediately.

What can ZenHub do?

ZenHub adds a series of enhancements directly inside the GitHub UI:

• Real-time, customizable task boards for GitHub issues;
• Multi-Repository burndown charts, estimates, and velocity tracking based on GitHub Milestones;
• Personal to-do lists and task prioritization;
• Time-saving shortcuts – like a quick repo switcher, a “Move issue” button, and much more.

Add ZenHub to GitHub

Still curious? See more ZenHub features or read user reviews. This issue was written by your friendly ZenHub bot, posted by request from @FerreiraRaphael.