How to Build a CRUD application using React and Django

Creating the front-end in React

Additional Packages

Creating Components

class BookDashboard extends React.Component {
    state = {
        books: [
            {
                id: 1,
                title: 'A simple book',
                author: 'Jude Ben',
                description: `Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit, sed do eiusmod tempor incididunt
                    ut labore et dolore magna aliqua. Ut enim ad minim
                    veniam, quis nostrud`
            },
            {
                id: 2,
                title: 'A book of secrets',
                author: 'James John',
                description: `Sed ut perspiciatis unde omnis iste natus
                    error sit voluptatem accusantium doloremque laudantium,
                    totam rem aperiam, eaque ipsa quae ab illo inventore
                    veritatis et quasi architecto beatae vitae dicta sunt
                    explicabo.`
            }
      ]
  }

  createNewBook = (book) => {
      book.id = Math.floor(Math.random() * 1000);
      this.setState({books: this.state.books.concat([book])});
  }

  updateBook = (newBook) => {
      const newBooks = this.state.books.map(book => {
          if(book.id === newBook.id) {
                return Object.assign({}, newBook)
          } else {
                return book;
          }
      });

      this.setState({books: newBooks});
  }

  deleteBook = (bookId) => {
      this.setState({books: this.state.books.filter(book => book.id !== bookId)})
  }
  render() {
      return (
          <main className="d-flex justify-content-center my-4">
              <div  className="col-5">
                  <BookList
                      books={this.state.books}
                      onDeleteClick={this.deleteBook}
                      onUpdateClick={this.updateBook}
                  />
                  <ToggleableBookForm
                      onBookCreate={this.createNewBook}
                  />
              </div>
          </main>
      )
  }
}

class BookList extends React.Component {
  render() {
    const books = this.props.books.map(book => (
      <EditableBook
        key={book.id}
        id={book.id}
        title={book.title}
        author={book.author}
        description={book.description}
        onDeleteClick={this.props.onDeleteClick}
        onUpdateClick={this.props.onUpdateClick}
      ></EditableBook>
    ));
    return (
      <div>
        {books}
      </div>
    );
  }
}

class EditableBook extends React.Component {
  state = {
    inEditMode: false
  };
  enterEditMode = () => {
    this.setState({inEditMode: true});
  }
  leaveEditMode = () => {
    this.setState({inEditMode: false});
  }
  handleDelete = () => {
    this.props.onDeleteClick(this.props.id);
  }
  handleUpdate = (book) => {
    this.leaveEditMode()
    book.id = this.props.id;
    this.props.onUpdateClick(book);
  }
  render() {
    const component = () => {
      if(this.state.inEditMode) {
        return (
          <BookForm 
            id={this.props.id}
            title={this.props.title}
            author={this.props.author}
            description={this.props.description}
            onCancelClick={this.leaveEditMode}
            onFormSubmit={this.handleUpdate}
          />
        );
      } 
      return (
        <Book 
          title={this.props.title}
          author={this.props.author}
          description={this.props.description}
          onEditClick={this.enterEditMode}
          onDeleteClick={this.handleDelete}
        />
      )
    }
    return (
      <div className="mb-3 p-4" style={{boxShadow: '0 0 10px #ccc'}} >
        {component()}
      </div>
    )
  }
}

class Book extends React.Component {
  render() {
    return (
      <div className="card" /* style="width: 18rem;" */>
        <div className="card-header d-flex justify-content-between">
          <span>
            <strong>Title: </strong>{this.props.title}
          </span>
          <div>
            <span onClick={this.props.onEditClick} className="mr-2"><i className="far fa-edit"></i></span>
            <span onClick={this.props.onDeleteClick}><i className="fas fa-trash"></i></span>
          </div>
        </div>
        <div className="card-body">
          {this.props.description}
        </div>
        <div className="card-footer">
          <strong>Author:</strong>  {this.props.author}
        </div>
      </div>
    );
  }
}

class BookForm extends React.Component {
  state = {
    title: this.props.title || '',
    author: this.props.author || '',
    description: this.props.description || ''
  }
  handleFormSubmit = (evt) => {
    evt.preventDefault();
    this.props.onFormSubmit({...this.state});
  }
  handleTitleUpdate = (evt) => {
    this.setState({title: evt.target.value});
  }
  handleAuthorUpdate = (evt) => {
    this.setState({author: evt.target.value});
  }
  handleDescriptionUpdate = (evt) => {
    this.setState({description: evt.target.value});
  }
  render() {
    const buttonText = this.props.id ? 'Update Book': 'Create Book';
    return (
      <form onSubmit={this.handleFormSubmit}>
        <div className="form-group">
          <label>
            Title
          </label>
          <input type="text" placeholder="Enter a title"
            value={this.state.title} onChange={this.handleTitleUpdate}
            className="form-control"
          />
        </div>
        
        <div className="form-group">
          <label>
            Author
          </label>
          <input type="text" placeholder="Author's name"
            value={this.state.author} onChange={this.handleAuthorUpdate}
            className="form-control"
          />
        </div>
        
        <div className="form-group">
          <label>
            Description
          </label>
          <textarea className="form-control" placeholder="Book Description"
            rows="5" value={this.state.description}
            onChange={this.handleDescriptionUpdate}
          >
            {this.state.description}
          </textarea>
        </div>
        <div className="form-group d-flex justify-content-between">
          <button type="submit" className="btn btn-md btn-primary">
            {buttonText}
          </button>
          <button type="button" className="btn btn-md btn-secondary" onClick={this.props.onCancelClick}>
            Cancel
          </button>
        </div>
      </form>
    )
  }
}

// index.js
class ToggleableBookForm extends React.Component {
  state = {
    inCreateMode: false
  }
  handleCreateClick = () => {
    this.setState({inCreateMode: true});
  }
  leaveCreateMode = () => {
    this.setState({inCreateMode: false});
  }
  handleCancleClick = () => {
    this.leaveCreateMode();
  }
  handleFormSubmit = (book) => {
    this.leaveCreateMode();
    this.props.onBookCreate(book);
  }
  render() {
    if (this.state.inCreateMode) {
      return (
        <div className="mb-3 p-4" style={{boxShadow: '0 0 10px #ccc'}} >
          <BookForm 
            onFormSubmit={this.handleFormSubmit}
            onCancelClick={this.handleCancleClick}></BookForm>
        </div>
        
      )
    }
    return (
      <button onClick={this.handleCreateClick} className="btn btn-secondary">
        <i className="fas fa-plus"></i>
      </button>
    );
  }
}

// index.js
ReactDOM.render(<BookDashboard />, document.getElementById('root'));

Building The Books API with Django

We’ll create the books API using Django, let’s create a new dummy project:
If you don’t have pipenv installed already, you will need to install it by running the following in the terminal:

When done, run the following commands to install Django and Django REST Framework:

pipenv install django
pipenv install django-rest-framework

django-admin startproject booksApi
cd booksApi/
django-admin startapp books

This will create new folders in the books-api folder. Update INSTALLLED_APPS in settings.py to include books and django-rest-framework.

# books-api/booksApi/booksApi/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'books',
]

Our database model will just contain the Book Model. Add the following to models.py

# books-api/booksApi/books/model.py.

from django.db import models

# Create your models here.

class Book(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    author = models.CharField(max_length=200)
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return '%s by %s' % (self.title, self.author)

Our Book model contains 4 fields: title, description, author and created_at.

• The title field stores the title of the book.
• The description stores the description of a book.
• The author field stores the author of the book.

These fields will be provided from our frontend — the react app we built earlier.

• The created_at field will be auto inserted based on the time the book is created.

Run the following command to create the necessary migrations and tables.

In Terminal+,  ensure you are at books-api/booksApi/ then run:

python manage.py makemigrations
python manage.py migrate

Next, we will create a serializer. Serializers are used to convert our data to JSON which will be returned when we visit the endpoints.

# books-api/booksApi/books/serializers.py.
from rest_framework import serializers
from .models import Book


class BookSerializer(serializers.ModelSerializer):
  class Meta:
    model = Book
    fields = ('id', 'title', 'author', 'description', 'created_at')

Next, we update views.py to add our API views.

# books-api/booksApi/books/views.py.

from .models import Book
from .serializers import BookSerializer
from rest_framework import generics

class BookList(generics.ListCreateAPIView):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

class BookDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Book.objects.all()
    serializer_class = BookSerializer

Finally, we need to add our endpoints. Create a urls.py in books-api/booksApi/books

# books-api/booksApi/books/urls.py.
from django.urls import path
from rest_framework.urlpatterns import format_suffix_patterns
from books import views

urlpatterns = [
    path('books/', views.BookList.as_view()),
    path('books/<int:pk>/', views.BookDetail.as_view()),
]

And update books-api/booksApi/booksApi/urls.py to look like:

# books-api/booksApi/booksApi/urls.py.
"""booksApi URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.0/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('books.urls')),
]

Consuming the API with React

class BookDashboard extends React.Component {
    state = {
        books: []
    }

    componentDidMount() {
        fetch('http://localhost:8000/api/books/')
            .then(response => response.json())
            .then(data => {
                this.setState({books: data});
            });
    }
...
}

createNewBook = (book) => {
    fetch('http://localhost:8000/api/books/', {
        method: 'POST',
        headers: {
                'Content-Type': 'application/json',
        },
        body: JSON.stringify(book),
    })
    .then(response => response.json())
    .then(book => {
        this.setState({books: this.state.books.concat([book])});
    });
}

updateBook = (newBook) => {
    fetch(`http://localhost:8000/api/books/${newBook.id}/`, {
        method: 'PUT',
        headers: {
                'Content-Type': 'application/json',
        },
        body: JSON.stringify(newBook),
    }).then(response => response.json())
    .then(newBook => {
        const newBooks = this.state.books.map(book => {
            if(book.id === newBook.id) {
                return Object.assign({}, newBook)
            } else {
                return book;
            }
        });
        this.setState({books: newBooks});
    });

deleteBook = (bookId) => {
    fetch(`http://localhost:8000/api/books/${bookId}/`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
        },
    })
    .then(() => {
        this.setState({books: this.state.books.filter(book => book.id !== bookId)})
    });
}

App running on Live Preview

Conclusion