16. Using a Frontend JavaScript Library with Django

Overview

This chapter introduces the basics of JavaScript and ends with building an interactive web frontend for Bookr using the React JavaScript framework. You will learn how to include the React JavaScript framework in a Django template, and how to build React components. This chapter also includes an introduction to JSX, a special format that combines JavaScript code and HTML – you will also learn how Babel transpiles JSX into plain JavaScript. Later, you will learn about the fetch JavaScript function which is used to retrieve information from a REST API. Toward the end of the chapter, you will be introduced to the Django {% verbatim %} template tag, which is used to include unparsed data in a Django template.

Introduction

Django is a great tool for building the backend of an application. You have seen how easy it is to set up the database, route URLs, and render templates. Without using JavaScript, though, when those pages are rendered to the browser, they are static and do not provide any form of interaction. By using JavaScript, your pages can be transformed into applications that are fully interactive in the browser.

This chapter will be a brief introduction to JavaScript frameworks and how to use them with Django. While it won't be a deep dive into how to build an entire JavaScript application from scratch (that would be a book in itself), we will give enough of an introduction so that you can add interactive components to your own Django application. In this chapter, we will primarily be working with the React framework. Even if you do not have any JavaScript experience, we will introduce enough about it so that, by the end of this chapter, you will be comfortable writing your...

JavaScript Frameworks

These days, real-time interactivity is a fundamental part of web applications. While simple interactions can be added without a framework (developing without a framework is often called Vanilla JS), as your web application grows, it can be much easier to manage with the use of a framework. Without a framework, you would need to do all these things yourself:

• Manually define the database schema.
• Convert data from HTTP requests into native objects.
• Write form validation.
• Write SQL queries to save data.
• Construct HTML to show a response.

Compare this to what Django provides. Its ORM (Object Relational Mapping), automatic form parsing and validation, and templating drastically cut down on the amount of code you need to write. JavaScript frameworks bring similar time-saving enhancements to JavaScript development. Without them, you would have to manually update the HTML elements in the browser as your data changes. Let's take a simple...

JavaScript Introduction

In this section, we will briefly introduce some basic JavaScript concepts, such as variables and functions. Different operators will be covered as we introduce them.

Loading JavaScript

JavaScript can either be inline in an HTML page or included from a separate JavaScript file. Both methods use the <script> tag. With inline JavaScript, the JavaScript code is written directly inside the <script> tags in an HTML file; for example, like this:

<script>
    // comments in JavaScript can start with //
    /* Block comments are also supported. This comment is multiple
      lines and doesn't end until we use a star then slash:
    */
    let a = 5; // declare the variable a, and set its value to 5
    console.log(a); // print a (5) to the browser console
</script>

Note that the console.log function...

Summary

In this chapter, we introduced JavaScript frameworks and described how they work with Django to enhance templates and add interactivity. We introduced the JavaScript language and covered some of its main features, variable types, and classes. We then introduced the concepts behind React and how it builds HTML by using components. We built a React component using just JavaScript and the React.createElement function. After that, we introduced JSX and saw how it made the development of components easier, by letting you directly write HTML in your React components. The concepts of promises and the fetch function were introduced, and we saw how to get data from a REST API using fetch. The chapter finished with an exercise that retrieved reviews from Bookr using the REST API and rendered them to the page in an interactive component.

In the next chapter, we will look at how to deploy our Django project to a production web server. You can download the chapter from the GitHub repository...