Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 2 months ago
JSON representation

A react-tutorial

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.