Introduction

React is one of the most popular UI libraries used by frontend developers in all different kinds of applications. The advantages of React are covered in this article as well as in various blogs across the web. In my previous articles, I tried to focus not on React itself, but on some powerful tools for state management, data flow implementation, routing, action dispatching etc. I started with quite simple and not really well-known Reflux library and worked my way to the well-known and powerful Redux in combination with Redux-Thunk and React-Router-Redux.

In this article I will focus on the well-known MobX library, designed for scalable state-management. In the first part we’ll start writing single-page application (SPA) with React + Mobx on the client side and the Django-rest-framework (with Django version 1.11) for backend, a framework popular with Python developers. This application will be responsible for Users and Todos list, the same as in previous articles and will be protected with some authentication. In this article we will focus on the following parts:

Registration of a new user

Authentication using tokens

Displaying the list of the users

Performing a search across the list

In following parts, we will continue with the implementation of todos. You can find working code example in the repository .

Important WARNING: Registration and authentication used in this article is not guaranteed to be 100% secure and production ready although it uses quite safe workflow storing session in database. Also this tutorial is not production-ready tested, because its purpose is to show a fullstack tutorial for django + MobX + React JS with examples of the main MobX features.

Server-side application

To get the server-side working on your computer simply run

pip install -r requirements.txt

To install all python dependencies run the follow

python manage.py runserver

(You are free to skip some of them except mandatory ones like django and django-rest )

The source code of the server-side python application can be found here. There’s nothing special in it — it’s simply a django-rest backend application with sqlite sample database.

For authentication we will use django-rest-auth. It’s more secure relative to using JWT for user sessions because it stores the session token on server-side ID database and provides you ability to validate the token which the server receives from client-side. To enable this library for the user authentication, we need to include it in the installed apps list and define urls. We will define different URL paths for API calls and for authentication in our main urls.py

url(r'^api/', include('todos.urls')),

url(r'^rest-auth/', include('rest_auth.urls')),

We will use the default login view from the rest_auth library and write our simple view for the user registration

class Registration(generics.GenericAPIView):

serializer_class = UserRegistrationSerializer

permission_classes = (AllowAny,) def post(self, request, *args, **kwargs):

serializer = self.get_serializer(data=request.data)

serializer.is_valid(raise_exception=True)

user = self.perform_create(serializer, request.data) return Response({}, status=status.HTTP_201_CREATED) def perform_create(self, serializer, data):

user = serializer.create(data)

return user

In this article I will not focus on the backend part, because it’s pretty basic django application with a simple sqlite database. We will add some functionality to extend default user model manager (for example — search method to filter users with search form post parameters)

def search(self, **kwargs):

qs = self.get_queryset()

if kwargs.get('first_name', ''):

qs = qs.filter(

first_name__icontains=kwargs['first_name'])

if kwargs.get('last_name', ''):

qs = qs.filter(

last_name__icontains=kwargs['last_name'])

if kwargs.get('department', ''):

qs = qs.filter(department__name=kwargs['department'])

if kwargs.get('country', ''):

qs = qs.filter(country__name=kwargs['country'])

You are free to explore other features in the repository.