codingforentrepreneurs / reactify-django

Integrate React & Django

Reactify Django

React is a powerful component JavaScript library. With it, you can build all kinds of user inferfaces from something as simple as a contact form all the way to an entire front end.

This project is about integrating React with Django.

Tech

• React 16.4.0
• Django 1.11
• Django Rest Framework 3.8.2
• Django CORS Headers 2.2.0
• Python 3.5 (and up)

Recommended Start

$ cd path/to/your/dev/folder
$ mkdir reactifydjango
$ cd reactifydjango
$ git clone https://github.com/codingforentrepreneurs/Reactify-Django .
$ git reset bc78f49e5f3fe1992b99afb85782b6281bf981a1 --hard
$ git remote remove origin
$ virtualenv -p python3 .
$ source bin/activate
(reactifydjango) $ cd src
(reactifydjango) $ pip install -r requirements.txt
(reactifydjango) $ cd reactify-ui
(reactifydjango) $ npm install

Sections

8 - Hello World

9 - Http Methods in React

10 - React Props

11 - React State

12 - More on State & Props

13 - React and How it Renders

14 - HTML Form in React

15 - Handle a Form with React

16 - Sending Data from React to Django

17 - Child Element Event Emitter

18 - Clear Form

19 - Preset Input Value

20 - Handle a Checkbox in React

21 - URL Routing in React

22 - Link with React Router Dom

23 - Post Detial View

24 - Post Owner

25 & 26 Post Update Part 1 & 2

27 - Post Create Clean Up

28 - Django Rest Framework Custom Pagination

29 - Dynamically Load More Posts

30 - Thank you

reactify-django's Issues

Regexp takes only last character of first group

According to regex it seems to take only last character of the first group instead of full part.

Reactify-Django/src/reactify-ui/package.json

Line 25 in 14339fa

"build-rename-logo": "renamer --regex --find '([^\\.])\\.[^\\.]+\\.(\\w+)' --replace '$1.$2' build/static/media/*",

to fix it the first group should be like: ([^\\.]+)

Update: tested it with incorrect format and it seemed to even work correctly, even though according to regex it should only take last character, i.e. logo.f0e512c7.svg to o.svg

regexr.com/42sol

"npm run collect" works wrong

MacOS, node v11.2, npm v 6.5, python 3.6

I have this porject on Window and Mac, it's ok on Windows, but not on Mac, when I run npm run collect it does it job but nothing changes. I tried to find out the issue and saw that in build folder files have different name than in tutorial, e.g this "runtime" prefix

> [email protected] build-rename-js /Users/menschikov/projects/reactifydjango/src/reactify-ui
> renamer --regex --find 'main\.[^\.]+\.js' --replace 'reactify-django.ui.js' build/static/js/*.js

✔︎ build/static/js/runtime~main.229c360f.js -> build/static/js/runtime~reactify-django.ui.js  

here's what I have in Build

seems it can't find necessary files accordingly to regex and rename them

Also I compared each of these 3 generated js files with reactify-django.ui.js from python static files (originally cloned) and they are totally differenet, I did no changes, just run "npm run collect".

If I run "npm run start"everything work on react-only server

"npm run collect" is throwing error

I am getting this error while running "npm run collect". can anyone help me?

'npm run collect' is throwing errors but working with browser.

Hi. I am following the video on youtube from CodingForEntrepreneurs. You have explained things amazingly. There isn't possibly any better explanation regarding Django + React. Thank you for that. Now I am following the same exact thing from cloning to setup to everything but when I run "npm run collect" , it is throwing me the following error. But at the same time even after the error if I refresh my browser page the changes are done as expected. Can you please help me understand what is happening?

P.S: I am using Ubuntu 16.04, Python 3.5, Django 2.0. And the only difference between your setup and mine is that i have created a virtual environment with "python3 -m venv " command. if that might be of any concern !

Thanking you in Advance!

npm install not working

Kindly look for that...

---

cat /Users/hardikdadhich/.npm/_logs/2019-07-31T19_21_41_511Z-debug.log
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'install' ]
2 info using [email protected]
3 info using [email protected]
4 verbose npm-session 449ead230de5209b
5 silly install runPreinstallTopLevelLifecycles
6 silly preinstall [email protected]
7 info lifecycle [email protected]~preinstall: [email protected]
8 silly install loadCurrentTree
9 silly install readLocalPackageData
10 timing stage:loadCurrentTree Completed in 9ms
11 silly install loadIdealTree
12 silly install cloneCurrentTreeToIdealTree
13 timing stage:loadIdealTree:cloneCurrentTree Completed in 0ms
14 silly install loadShrinkwrap
15 timing stage:loadIdealTree:loadShrinkwrap Completed in 599ms
16 silly install loadAllDepsIntoIdealTree
17 silly fetchPackageMetaData error for [email protected] request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/react-scripts failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
18 silly fetchPackageMetaData error for copyfiles@^2.0.0 request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/copyfiles failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
19 silly fetchPackageMetaData error for renamer@^0.7.0 request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/renamer failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
20 silly fetchPackageMetaData error for copyfiles@^2.0.0 request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/copyfiles failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
21 silly fetchPackageMetaData error for [email protected] request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/react-scripts failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
22 silly fetchPackageMetaData error for renamer@^0.7.0 request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/renamer failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
23 timing stage:rollbackFailedOptional Completed in 0ms
24 timing stage:runTopLevelLifecycles Completed in 727ms
25 silly saveTree [email protected]
25 silly saveTree ├─┬ [email protected]
25 silly saveTree │ ├─┬ [email protected]
25 silly saveTree │ │ ├── [email protected]
25 silly saveTree │ │ ├─┬ [email protected]
25 silly saveTree │ │ │ ├─┬ [email protected]
25 silly saveTree │ │ │ │ ├─┬ [email protected]
25 silly saveTree │ │ │ │ │ └─┬ [email protected]
25 silly saveTree │ │ │ │ │ └── [email protected]
25 silly saveTree │ │ │ │ └── [email protected]
25 silly saveTree │ │ │ └── [email protected]
25 silly saveTree │ │ ├─┬ [email protected]
25 silly saveTree │ │ │ └── [email protected]
25 silly saveTree │ │ ├── [email protected]
25 silly saveTree │ │ ├─┬ [email protected]
25 silly saveTree │ │ │ └── [email protected]
25 silly saveTree │ │ ├── [email protected]
25 silly saveTree │ │ └── [email protected]
25 silly saveTree │ ├── [email protected]
25 silly saveTree │ ├── [email protected]
25 silly saveTree │ └── [email protected]
25 silly saveTree └── [email protected]
26 verbose type system
27 verbose stack FetchError: request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/copyfiles failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
27 verbose stack at ClientRequest.req.on.err (/usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/index.js:68:14)
27 verbose stack at ClientRequest.emit (events.js:198:13)
27 verbose stack at Socket.socketErrorListener (_http_client.js:392:9)
27 verbose stack at Socket.emit (events.js:198:13)
27 verbose stack at emitErrorNT (internal/streams/destroy.js:91:8)
27 verbose stack at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
27 verbose stack at process._tickCallback (internal/process/next_tick.js:63:19)
28 verbose cwd /Users/hardikdadhich/Desktop/Couple-dial/acqnt-master/working-folder/src/reactify-ui
29 verbose Darwin 18.7.0
30 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
31 verbose node v10.16.0
32 verbose npm v6.9.0
33 error code ENOTFOUND
34 error errno ENOTFOUND
35 error network request to http://visustar.francelab.fr.ibm.com:8081/nexus/content/repositories/mobile-npm/copyfiles failed, reason: getaddrinfo ENOTFOUND visustar.francelab.fr.ibm.com visustar.francelab.fr.ibm.com:8081
36 error network This is a problem related to network connectivity.
36 error network In most cases you are behind a proxy or have bad network settings.
36 error network
36 error network If you are behind a proxy, please make sure that the
36 error network 'proxy' config is set properly. See: 'npm help config'
37 verbose exit [ 1, true ]

---

its giving me [this](url

) error..

Is the issue related to version ? my package.json file same as this repo
I am using Mac OSX(x64)