
Django React/Redux Base Project - pergomes
https://github.com/Seedstars/django-react-redux-base
======
gitaarik
So for people who think they need Redux, first read "You Might Not Need Redux"
[0] by Dan Abramov himself, creator of Redux.

Then also I would recommend MobX [1] over Redux, it's easier to get started
and in my opinion easier and better in general.

[0] [https://medium.com/@dan_abramov/you-might-not-need-redux-
be4...](https://medium.com/@dan_abramov/you-might-not-need-redux-
be46360cf367#.8eaaozi87)

[1] [https://github.com/mobxjs/mobx](https://github.com/mobxjs/mobx)

~~~
paol
I'm 3 months into my first React/Redux project and wouldn't adopt Redux again
if I were starting over. Don't get me wrong, it's not horrible, but it's not
great either.

Compared with the extreme elegance and simplicity of React itself, Redux is
verbose, boilerplatery and the way it integrates with React never feels
natural.

I've taken a look at Mobx and had that aha moment of "yes, this is what the
solution should look like!" Of course there's a big caveat here: not having
really used it I don't know what its problems are yet. I'm comparing the real
world warts of Redux with the platonic ideal of Mobx, but still it's
definitely what I would try if I were starting a React project now.

~~~
ng12
> the way it integrates with React never feels natural

Could you elaborate on that? In my opinion Redux reinforces that the majority
of your app should effectively be (props) => JSX (even if they're es6 classes,
they're still just rendering props). Alternatively I feel like it'd be
relatively easy to do non-Reactish things with MobX since more of your
components are aware of it.

~~~
sixo
Not the parent, but when I was trying to learn R+R I kept getting confused by
what they meant by 'state'. React state belongs to some component (whichever
can mutate it) and is passed to children via props, and generally seems to
include a mixture of view state and data/model state, with view-state
originating somewhere in the component hierarchy while model state comes from
the root. Redux's tutorial implied to me that it expected all mutable state to
originate from the root, which clashed with what I had come to expect from
React. Since I am fairly new to front-end JS, I just found myself confused at
which way was really wiser.

~~~
hemisphere
React allows you to keep state in components, but that doesn't mean that you
should. When you're using React + Redux, keeping ANY state in components is an
antipattern. Keeping all state in the "root" (the redux store) allows you to
observe the your app's complete state in one place, all previous states, and
the exact sequence of events that triggered all past state transitions. This
discipline enables features like time-travel debugging, where you can rewind
or fast-forward through your app's states one event at a time.

~~~
sixo
Two responses to my comment, opposite recommendations. I'm inclined to agree
with you in general, but the contradicting opinions can't be good for
newcomers.

~~~
acemarke
A number of people in the community seem to have latched on to this "you MUST
put EVERYTHING into Redux" idea, but it's definitely _not_ anything that's
pushed by the Redux team. trex654 is correct here - it's entirely up to you to
decide what state should live where.

The Redux FAQ addresses this at
[http://redux.js.org/docs/faq/OrganizingState.html#organizing...](http://redux.js.org/docs/faq/OrganizingState.html#organizing-
state-only-redux-state) . Note that a number of the linked comments regarding
whether or not to use Redux come straight from Dan Abramov himself.

Also, I have a number of articles on React state management practices as part
of my React/Redux links list, at [https://github.com/markerikson/react-redux-
links/blob/master...](https://github.com/markerikson/react-redux-
links/blob/master/react-state-management.md) , which may help clarify some of
the ideas as well.

------
TheDrizzle43
Django + React is an awesome combination that I recommend taking a look at.
This repo is a good starting point but you can probably get rid of half of the
dependencies if you aren't working on a team of developers.

I am currently using Django + React on a personal project and took a slightly
different route, no pun intended. Rather than using react router, as I never
really liked client side routing, I use Django views to hydrate all the
necessary props for the page and have a base template that loads the React
component with the props. Since each page / component is fairly self-contained
I also decided against using any Redux / Flux implementations. Furthermore, it
only takes a few hours of work to get server side rendering up and running
thanks to react + node.

~~~
nsomaru
is there a better way to get server side rendering rather than a whole
dependency on node for a django project?

~~~
ecesena
If your project is small enough you can scrape it and generate all pages. You
need a server only in development but then you can host it statically (and for
free, e.g. on github).

Check out hasgluten.com for an example, code here (pretty old version of react
though):
[https://github.com/hasgluten/hasgluten](https://github.com/hasgluten/hasgluten)

~~~
nsomaru
That's useful, thanks.

The case I was interested in is where you'd like to have Django server-side-
render the first request based on url, and then have react handle the rest via
react-router and apis ala django-rest-framework.

As a backend dev who got by with jquery soup and 0 frontend build tools before
(use django bundling tools), even starting to approach the React ecosystem is
a little daunting.

~~~
hiram112
I was where you were at a few years ago, and I really don't think these type
of large SPAs are appropriate for the vast majority of business / crud sites
(i.e. not Google Maps, Facebook, etc.)

I work in Java / Scala world, but have been pulled into more front-end / UI
work the last few years. It seems a lot of (younger) developers use the
backend only as a Restful bridge to the DB.

After seeing what is Node, Angular npm, bower, grunt, etc. and now React and
friends, I'm pushing my team back to the server for all business logic and
using the front-end only for dynamic forms, animations, etc.

The JS tooling is just not as good as static backend frameworks, nor are the
libraries. Trying to debug dozens of async calls using Chrome Dev Tools takes
10x as long as doing it on the backend, even with multiple threads.

------
morgante
This looks a lot more sophisticated than my starter pack for the same stack,
though it would be a good idea to add a Dockerfile. [0]

[0] [https://github.com/gigster-eng/python-
starter](https://github.com/gigster-eng/python-starter)

~~~
lfrodrigues
hey, I'm one of the developers of this repo. We actually use docker in some of
our projects but we never had time to add it to this project. Feel free to
send us a PR :)

------
mozumder
So, I made a Django site with a VanillaJS single-page app framework (no
React/Redux) and that includes Django server-rendered fastboot, in about 10KB
Javascript code. I made it/use it for our fashion site -
[https://www.futureclaw.com](https://www.futureclaw.com)

Page load times are about .5 seconds for me, with lots of graphics. Also, I'm
pretty sure it's faster than React.

Is this something people want to use that I should package up into its own
product? It's a little bit of code but mostly methodology discipline.

~~~
JustSomeNobody
I wouldn't mind taking a look. I prefer VanillaJS.

I'm currently using .Net/Java/C++ (yeah...) and am wanting to get away from
that and switch to Python full time. So, I have been looking at as much Python
code as I can lately.

~~~
mozumder
I haven't documented/posted the JS code anywhere yet, but I did post some of
the python server code on the Django developer mailing list at:
[https://groups.google.com/forum/#!topic/django-
developers/q-...](https://groups.google.com/forum/#!topic/django-
developers/q-5cnzlcf9k)

The JS code is still being changed around.

The key here to maintain state consistency between front-end and back-end is
that I transfer state from client to server via "data-model" HTML attributes.
These attributes also guides the router.

~~~
JustSomeNobody
Thanks. I'll go check that out when I get a break.

------
memonkey
I actually work in a Flask + AngularJS stack and have been dying to learn
Django + React. Flask has been incredibly easy to setup and create APIs and
even though the front-end continues to have its little intricacies, it can't
heart to traverse them through new technologies.

------
sheer_horror
They include scripts to check code quality. Perhaps those should be set up
with a pre-commit git hook to ensure they get used.

~~~
morenoh149
Is there a way to set a pre commit git hook in a project's source code? So
that the same hook only runs on that project and not on every project using
git.

~~~
ecesena
Typically you add files with the scripts and a Malefile or anything similar to
initialize and move those files around.

So installation instructions become: 1\. git clone 2\. cd 3\. make [init]

~~~
wahnfrieden
Note that it works best to have that install script create symbolic links for
the git hooks rather than copy, so that they can be updated without having to
rerun the install script.

------
robohamburger
I feel like the best way to do this is to just use cornice or DRF then use js
scaffolding that is completely unaware of your backend. No need to join them
at the hip like this, except maybe for the token based auth?

~~~
bmelton
Token based auth is stateless, so your first assumption stands true -- no need
to join them at the hip.

I've tried working with tools like Djangular and whatnot, and no matter how
many times I've tried working within that ecosystem, I've always had better
results, cleaner and simpler code by keeping the UI and Backend completely
separate.

~~~
lfrodrigues
Token based auth doesn't need to be stateless. In fact in our current
implementation it is not.

If you use stateless like JWT (we had this before) you end up having a huge
problem: imagine a user wants to logout all the open accounts in different
browsers.

How would you handle that? You would need to wait for the expiration of the
token, a solution that is not that secure.

~~~
smashed
One solution is to store the token in localStorage, which supports events.

You can listen for localStorage changes in all your tabs. When it changes,
force a page reload or similar.

Edit: typos

~~~
lfrodrigues
I think you didn't understand the issue. Imagine you want to implement a
"logout from all my sessions" like Facebook or Google have (sessions in
different devices)

------
chowes
When working with a large (read: quantity of models) REST API, is there a
parallel Redux pattern to Ember's ember-data?

~~~
shamsalmon
I think I understand what you mean... but basically your data with get put in
a store and you access it in your component. Its similar to ember-data its
just doing less behind the scenes. For example you do an action, fetch, then
reduce, then store your data in immutable objects. In ember this is all done
for you so its more code.

------
LinuxFreedom
Why is this packing together a backend tec and a frontend tec? I assume the
frontend is generated from django models and views code? Or does one have to
maintain frontend code manually - no that would not make sense at all. However
I can not see any hint about how the frontend code gets generated?

~~~
lfrodrigues
Hey, check section "Main Project" in out README. Should be clear enough

------
antarrah
Django and React do not share the same mantera. Django goes better with Ember.
If you insist on using React/Redux, you are better off with something like Go
for the backend.

~~~
methyl
How come you compare Django - a full-blown web development framework with Go -
just a language? You should mention some Go frameworks which go well with
React, I'm really curious to hear those.

~~~
antarrah
I don't. Go is mostly used without a framework and you've to collect your
libraries. React is just a view library and you've to collect your libraries.

Django, on the other hand, is monolithic just like Ember.

I'd pick Django/Ember any day if it weren't for React Native platforms and the
ability to share things between the web and mobile versions.

------
beeskneecaps
Wish there was a project that setup Django along with create-react-app so that
the webpack code could stay up to date with some kind of standard (avoiding
eject if possible).

~~~
misiti3780
it's actually pretty annoying in my experience to use the create-react-app
with django because of CORS related issues. chrome doesnt like sending ajax
requests from localhost:3000 -> localhost:8000

------
projektir
This seems to be expecting a Linux distribution with APT:

> apt-get install -y build-essential libssl-dev libffi-dev libpq-dev
> python3-dev python-dev

------
rayalez
Oh, thank you so much, this will be extremely useful for me!

I've been using Django for a long time, and I love it. And now, I've just
started learning React/Redux. After some research I think that Django+React is
the perfect combination.

This project is excatly what I needed to help me get started!

------
herge
Anyone have any success/tips using webpack with django collectstatic?

~~~
steffenmllr
I use [https://github.com/owais/django-webpack-
loader](https://github.com/owais/django-webpack-loader) together with
[https://www.npmjs.com/package/webpack-bundle-
tracker](https://www.npmjs.com/package/webpack-bundle-tracker) to handle
(hashed) file loading from webpack

~~~
civilian
+1, it's the best way to roll.

------
rcarmo
"We build on the solders of giants."

And me thinking it was a peaceful software project, without any soldering or
soldiering...

~~~
lfrodrigues
ah ups. Thanks!

------
kaffee
Anyone know something like this but with a golang-based backend?

------
du_bing
Javascript + Python, perfect combination!

------
bedros
is there any similar django project but with vue.js instead of react.

I'm not a fan of React license

