{"id":13850462,"url":"https://github.com/spapas/react-tutorial","last_synced_at":"2025-08-11T22:32:22.115Z","repository":{"id":34380751,"uuid":"38307185","full_name":"spapas/react-tutorial","owner":"spapas","description":"A react-tutorial","archived":false,"fork":false,"pushed_at":"2016-08-31T07:19:09.000Z","size":1580,"stargazers_count":94,"open_issues_count":0,"forks_count":29,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-12-02T16:57:59.001Z","etag":null,"topics":["article","browserify","database","django","django-rest-framework","flux","node-js-toolset","python","react","react-tutorial","redux","redux-thunk","tutorial","watchify"],"latest_commit_sha":null,"homepage":"https://spapas.github.io/2016/03/02/react-redux-tutorial/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spapas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-30T12:10:12.000Z","updated_at":"2024-09-27T18:31:18.000Z","dependencies_parsed_at":"2022-09-02T14:01:38.324Z","dependency_job_id":null,"html_url":"https://github.com/spapas/react-tutorial","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spapas%2Freact-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spapas%2Freact-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spapas%2Freact-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spapas%2Freact-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spapas","download_url":"https://codeload.github.com/spapas/react-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229614602,"owners_count":18099068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["article","browserify","database","django","django-rest-framework","flux","node-js-toolset","python","react","react-tutorial","redux","redux-thunk","tutorial","watchify"],"created_at":"2024-08-04T20:01:13.349Z","updated_at":"2024-12-13T20:54:40.083Z","avatar_url":"https://github.com/spapas.png","language":"JavaScript","readme":"A (not so simple) React application\n===================================\n\nThis is a central repository that hosts various versions of the react project that correspond\nto the following articles from http://spapas.github.io/:\n\n- http://spapas.github.io/2015/06/05/comprehensive-react-flux-tutorial/\n- http://spapas.github.io/2015/07/02/comprehensive-react-flux-tutorial-2/\n- http://spapas.github.io/2015/09/08/more-complex-react-flux-example/\n- http://spapas.github.io/2016/03/02/react-redux-tutorial/\n\nTo be able to follow the articles, I've added a bunch of tags in the repository (they go from\nthe simplest case to the most complex one):\n\n- ``react-only``: Use react *only*\n- ``react-only-validation``: Add validation to the above version\n- ``react-flux``: Introduce flux to the react-only version\n- ``react-flux-better-organization``: Improve the code structure by adding modules etc\n- ``react-flux-complex``: A more complex app with react and flux\n- ``react-redux``: Use redux with react\n- ``react-redux-poll-update``: Update UI automatically when there are changes to the data (uses polling)\n\nGet code for a tag\n------------------\n\nTo get the code for a tag, just clone the repository and do a:\n\n``git checkout TAG``\n\n``python manage.py syncdb``\n\nIf you use Django 1.7 or later.\n\n``python manage.py migrate``\n\n``npm install``\n\nIf you want to go to a different tag, you'll just do again a checkout to\nthe corresponding tag and do an ``npm install``, but you'll need to delete the ``db.sqlite3`` file (that\ncontains the database schema for the application) and then do a syncdb again because\nthere may be differences in the database between different tags.\n\nRunning the application\n-----------------------\n\nFirst, you must install required modules.\n\n``pip install -U -r requirements.txt`` \n\nNow, to actually run the application, you'll need to use\n\n``python manage.py runserver`` \n\nto start the django development server (or run rs.bat/rs.sh depending on\nyour shell). For the ``react-only`` version you\ncan directly modify the js files and see the differences when you\nrefresh the page in your browser. However, for all\nother versions a node-js toolset with browserify is used to compile\nthe javascript sources to the bundle that is actually used.\n\nSo, when developing I recommend running ``npm run watch`` to start watchify\nwhich automatically re-builds your javascript bundle when it detects a change. Another\nsolution is to run ``npm run build`` that will create a (minified) bundle with\nthe current sources (but will need to be re-run by hand when something in your\njavascript changes).\n\n\nYou can find more info about how I use this node-js toolset\n(browserify, watchify, uglify, babel etc) @ http://spapas.github.io/2015/05/27/using-browserify-watchify/\nfor a basic tutorial and @ http://spapas.github.io/2015/11/16/using-browserify-es6/ for\nhow to use ES6.\n\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspapas%2Freact-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspapas%2Freact-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspapas%2Freact-tutorial/lists"}