Notes for Todo List Project with Django and React

中文版本:  https://today2tmr.com/2017/08/04/笔记之-django-react-构建-todolist/

I have a task to do a web app: todo-list with method of separating front and back-end.
Unluckily I hardly master the knowledge of web development maybe like React and Django, so there are several undetermined but magical methods to achieve it.
I’m going to write down the process how I build this project and I am happy to communicate with you if you are a noob struggling like me…

Selection of Methods

  • Just use the template in github.(URL is below) But a single app like todo-list is so small that I don’t want a such big project. Of course it’s a fantastic project for me to learn, I’d like to see the source code sometime.
  • Separate server and client completely and use socket.io, superagent or ajax in jquery to swap data. I simply use React to access API supported by Django-Rest-Framework, and use jquery to send a request while there are some data to change.
  • Using only Django is enough for single app, though it maybe a little messy for developers of large-scale site. I have built a web app before I took the second way and I use Django Rest Framework, too but it seems to have little effect.
  • Also if it’s just a temporary app and the data stored in Redux locally won’t be saved in a database finally. We can just use API to obtain data and render them dynamically.

Source Code

For note below I will focus on the first one.(with React)
Although the second one looks better…

Structure of Todo List

Django Part

  • Model Definition
    • Task Model: Once it is changed, we need to makemigrations and migrate.
      • user = models.ForeignKey(settings.AUTH_USER_MODEL, default=1, blank=True)
        • It does not support multiple-users like the second version yet, so I always set it as default user.
      • title = models.CharField(max_length=120)
      • created_at = models.DateField(default=timezone.now,blank=True)
      • deadline = models.DateField(default=timezone.now)
      • priority = models.IntegerField(default=0)
      • text = models.TextField()
      • done = models.BooleanField(default=False, blank=True)
  • API Support
    • TaskSerializer(serializers.ModelSerializer): I simply set fields = '__all__'.
    • TaskViewSet(viewsets.ModelViewSet)
  • Database Setting
    • PostgreSQL: It suits big project than sqlite better.

       
  • Permission of Cross-Domain Request

React Part

  • Components/Containers
    • Task List
    • Task Detail
    • App, combined by the two containers
  • Actions: detect users’ actions to change the content of components.
    • Add more actions at /actions/index.js
    • editTask/deleteTask/addTask/selectTask/doneTask/sortByPriority/sortByDeadline
  • Reducers: controlled by actions and decides data sent to store.
    • /reducers/reducer-active-task.js: change the display of component task-detail by judge the type of actions.
    • /reducers/reducer-tasks.js: reload the store of tasks when there are some changes.
  • HTTP Requests: I write request functions in reducers.
    • import $ from 'jquery';
    • $.ajax...
    • Use application/jsonp as dataType
    • We may need async:false to save the data in some variable.

Resources for Study

  • They are all English resources. If you prefer Chinese, I think runnoob.com is a good choice. And most of them have Chinese version documents so you can search in Baidu. Of course, I encourage you to use these resources which really help me a lot.

Templates and Examples

Main Frameworks or Libraries

Third Party Tools

Youtube Videos

One Reply to “Notes for Todo List Project with Django and React”

Leave a Reply

Your email address will not be published.