https://github.com/spapas/react-tutorial

A react-tutorial
https://github.com/spapas/react-tutorial

article browserify database django django-rest-framework flux node-js-toolset python react react-tutorial redux redux-thunk tutorial watchify

Last synced: 13 days ago
JSON representation

A react-tutorial

• Host: GitHub
• URL: https://github.com/spapas/react-tutorial
• Owner: spapas
• License: unlicense
• Created: 2015-06-30T12:10:12.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-08-31T07:19:09.000Z (over 8 years ago)
• Last Synced: 2024-12-02T16:57:59.001Z (24 days ago)
• Topics: article, browserify, database, django, django-rest-framework, flux, node-js-toolset, python, react, react-tutorial, redux, redux-thunk, tutorial, watchify
• Language: JavaScript
• Homepage: https://spapas.github.io/2016/03/02/react-redux-tutorial/
• Size: 1.51 MB
• Stars: 94
• Watchers: 7
• Forks: 29
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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.