DEV Community: willp11

Optimizing React Apps with React.memo, useMemo and useCallback

willp11 — Sun, 21 Aug 2022 08:41:00 +0000

When you're starting out as a new developer, you just want to get things to work without any bugs, however as your projects grow and become more complex you need to start thinking about optimizations to ensure a smooth experience for users.

The main way to optimize a React app is to avoid components re-rendering unnecessarily. You only want a component to re-render if there is a change to what is shown to the user, however in an app that hasn't been optimized you will find components re-rendering just to render the exact same things as before. We can increase the performance of our apps by avoiding components re-rendering in these cases.

What causes a component to re-render?
A React component re-renders both when its own state or props change, and when any parent component re-renders. When React re-renders a component, it also re-renders every child component to be on the safe side as it can't be completely sure that it is a pure component. A pure component is a component that will always have the exact same output given the same inputs (state and props), i.e. it has no side effects. This means that when we have nested components, we may be unnecessarily re-rendering child components when it's a pure component and neither its state or props have actually changed.

How to check if a component has re-rendered?
The simplest way is just to use a console.log inside the main function body (I will be using functional components only throughout this article). If you want more insight, you can use the React developer tools to see which components have re-rendered and more importantly what caused the re-render.

import React, {useState} from 'react';

function Child() {
    console.log("rendering child");

    return (
        <div>
            <p>Child</p>
        </div>
    )
}

export default function App() {
    const [parentState, setParentState] = useState(0);

    const updateParent = () => {
        setParentState(parentState+1);
    }

    console.log("rendering parent");

    return (
        <div>
            {parentState}
            <button onClick={updateParent}>Update Parent</button>
            <Child />
        </div>
    )
}

In the example above, the child component is clearly a pure component, it has no state and no props. However, every time we click the update parent button, we will see that both the parent and child components have re-rendered.

React.memo
If we know that a child component is pure, we can stop React from re-rendering by wrapping it with React.memo.

const Child = React.memo(()=>{
    console.log("rendering child");

    return (
        <div>
            <p>Child</p>
        </div>
    )
})

Now, when we update the parent state and check the console, we will see that the child component has not re-rendered.

useCallback
To understand why to use the useCallback hook, you must first understand Javascript referential equality. Javascript objects are equal if they point to the same object in memory. If their contents are exactly the same but they point to different objects in memory, then they are not equal. Read this article for more information on equality in Javascript, https://www.geeksforgeeks.org/what-is-object-equality-in-javascript/ .

If we want to update the parent state from the child component, we can easily do so using props to pass the updateParent function to the child.

React.memo(function Child({updateParent}) {
    console.log("rendering child...");

    return (
        <div>
            <button onClick={updateParent}>Update Parent</button>
        </div>
    )
})

export default function App() {
    const [parentState, setParentState] = useState(0);

    const updateParent = () => {
        setParentState(parentState+1);
    }

    console.log("rendering parent");

    return (
        <div>
            {parentState}
            <Child updateParent={updateParent} />
        </div>
    )
}

However, each time the parent component updates it will create a new updateParent function. This means that as far as React is concerned, the Child component's props have changed and so despite wrapping the child in React.memo, it will still re-render both the parent and child.
In this case, we can use the useCallback hook to wrap the updateParent function. This causes the updateParent function to maintain the same pointer between re-renders, therefore the child component's props have no longer changed. The useCallback hook also has a dependency array. A new function will be created if any of the values within the dependency array change.

const updateParent = useCallback(() => {
    setParentState(parentState=>parentState+1);
}, [])

When using useCallback, remember to always set the state using a callback to avoid a stale reference for parentState.

setParentState(parentState+1)

Would get stuck at 1.

useMemo
The useMemo hook is very similar to the useCallback hook, except that it returns the value from the function rather than the function itself. It will recalulate the value if any of the values in its dependency array change.
Sometimes people use the useEffect hook when they should be using useMemo instead, leading to a component rendering twice.

const [parentState, setParentState] = useState(0);
const [derivedState, setDerivedState] = useState(0);

useEffect(()=>{
    setDerivedState(parentState*10)
}, [parentState])

If we use useEffect here, the component will render once when parentState changes, then useEffect will fire, then the component will render again as we update the derived state inside useEffect.

const [parentState, setParentState] = useState(0);

const derivedState = useMemo(()=>{
    return parentState*10;
}, [parentState])

Now, by using useMemo, the component will render once when parentState changes and re-calculate derivedState within the same render, therefore avoiding rendering the second time.

React Hooks

willp11 — Fri, 19 Aug 2022 04:25:00 +0000

Introduction
React Hooks are the modern way of writing React applications. Initially, React components that required the use of any state were always class-based as functional components did not have a way of storing state. However, there were some pain points with using classes that led to hooks being released in React 16.8, which hoped to address these pain points by enabling the use of state and other features within functional components. This tutorial will look at the main features of React hooks, demonstrating the various hooks that are available and some use cases for each.

Managing State
I will demonstrate three hooks that can be used to manage state within functional components; useState, useReducer and useContext.
useState
useState
The useState hook is the simplest of all the hooks. It enables the storage of simple state variables within a component. Whenever you require some simple state to be stored, you should always turn to useState as your first option.
The useState hook returns an array containing the variable that will hold the state and a function that updates that variable. It is common to name the function set[Variable].

const [counter, setCounter] = useState();

return (
    <>
        <p>{counter}</p>
        <button onClick={()=>setCounter(counter+1)}>Increment</button>
    <>
)

You cannot mutate the variable without using the function returned from useState that is designated for that purpose. The example below is not valid React code.

let [counter, setCounter] = useState();
counter += 1;

useReducer
The useReducer hook should be used when you have more complex state, as by using useReducer you can define multiple functions to update the state.
First, you need to define the reducer. The reducer is a function that takes the state and an action as inputs and mutates the state depending on the type of the action.
Here is a simple example of adding and removing items from a shopping cart.

const addItem = (state, item) => {
    return {
        …state,
        [item.name]: item
    }
}
const removeItem = (state, item) => {
    let cart = {…state};
    delete cart[item.name];
    return cart;
}
const cartReducer = (state, action) => {
    switch (action.type) {
        case ‘ADD_ITEM’: 
            return addItem(state, action.item);
        case ‘REMOVE_ITEM’:
            return removeItem(state, action.item);
        default:
            return state;
    }
}

Once you have defined the reducer, use the useReducer hook to access and update the state.

const [cart, dispatch] = useReducer(cartReducer);
let item = {name: t-shirt, price: 10};
dispatch({type: ‘ADD_ITEM’, item});

useContext
Context allows us to manage global state within a React app without the use of any 3rd party libraries such as Redux.

To use context, you need to create a context object using React.createContext(). The context object has a provider property which in turn takes a “value” prop. Store the state you wish to use globally as the “value” prop.

const CartContext = React.createContext();

const CartProvider = ({children}) => {
    const [cart, dispatch] = useReducer(cartReducer);
    return <CartContext.Provider value={[cart,dispatch]}>{children}</CartContext.Provider>
}

Wrap the provider around any components that need to use the state.

<CartProvider><AnotherComponent /><CartProvider>

Then use the useContext hook to access the state within those components.

const AnotherComponent = () => {
    const [cart, dispatch] = useContext(CartContext);
    …
}

useEffect
The useEffect hook is a very important hook as it essentially replaces the component lifecycle methods that were previously used in class-based components. Anything that you previously did with componentDidMount, componentDidUpdate and componentWillUnmount can now be done with the useEffect hook.

Side effects such as mutations, subscriptions, timers and logging must not be done within the main body of a functional component (React’s render phase), as it can cause confusing bugs and inconsistencies within the UI. Instead, useEffect will run after the render phase.

The useEffect hook takes a function and an optional dependency array as inputs. By default, the function defined within useEffect will run after every render (if no dependency array is provided). To adjust when the useEffect hook runs, we adjust the values within the dependency array. An empty dependency array means the effect will run just once when the component mounts.

No dependency array: runs after every render.

useEffect(()=>{
    …
});

Empty dependency array: runs once after first render.

useEffect(()=>{
    …
}, []);

Has dependencies: runs whenever any of the dependencies changes.

useEffect(()=>{
    …
}, [dep1, dep2]);

One of the most common use-cases for useEffect is to retrieve data from an external API. For example, a component with a list of products may need to retrieve all the product data when the component mounts. Note that you cannot define useEffect as async, therefore to use await you must define the async function within useEffect then call it within that same useEffect.

const [products, setProducts] = useState();

useEffect(()=>{
   const getProducts = async () => {
        const res = await fetch(‘/products’);
        const products = res.json();
        setProducts(products);
    }
    getProducts();
}, [])

To avoid memory leaks when using useEffect for a subscription, you may need to unsubscribe when the component unmounts. To do this, use a return statement within the useEffect to perform any clean up that is required.
In the example below, a counter starts when the component mounts and then is cleared after the component unmounts.

const [count, setCount] = useState(0);

useEffect(()=>{
    const counter = setInterval(()=>setCount(count=>count+1), 1000);
    return () => clearInterval(counter);
}, [])

In the situation above, you must be careful to use setCount(count=>count+1) and NOT setCount(count+1). This is because if you do not pass a callback function to setCount, it will use a stale reference and be forever stuck on 1. In this case, the console will give a warning that you are missing count as a dependency. If you put count into the dependency array, it will give the appearance that you have solved the problem, however in reality you will be creating a brand new interval every second as useEffect gets called again and again.

Another common use case is to update a component once a user has logged in. For example, a user logs in and receives an authentication token that enables them to retrieve restricted data from an API, such as data about their user profile. In this case, we want to fetch the user profile data once the auth token changes.

const [authState, dispatch] = useContext(AuthContext);
const [user, setUser] = useState();

useEffect(()=>{
    const getUser = async () => {
        const res = await fetch(‘/getUser’, {headers: {‘Authorization’: ‘Token ’ + authState.token}}
        setUser(res.json());
    }
    getUser();
}, [authState.token])

useRef
The last hook I will cover in this post is useRef. The useRef hook has two main uses; access DOM elements directly and when you want a mutable value that persists for the entire lifecycle of the component but which doesn't cause the component to re-render. To access the value in the ref, you use the ref's current property.

A common example for when you want to access DOM elements directly, is to click on something and then cause another component to gain focus.

    const inputRef = useRef();

    const focusInput = () => {
        inputRef.current.focus();
    }

    return (
        <>
            <input type="text" ref={inputRef}/>
            <button onClick={focusInput}>Focus</button>
        </>
    )

If you ever have a situation where you need to keep a value between re-renders but mutating that value doesn't need to cause a re-render, then consider using useRef instead of useState.

That's it for this article. Next time, I will discuss useRef, useCallback and writing your own custom hooks.

Next.js Introduction

willp11 — Wed, 10 Aug 2022 02:04:14 +0000

What is Next.js?
Next JS is a React framework that provides the building blocks to create fast web applications using the React JS JavaScript library. The pre-requisites to building a Next.js application are knowledge of JavaScript and React JS. A beginner is advised to first build an application with JavaScript, then build on that knowledge by re-writing it as a React JS project, then finally a Next.js project.

Why use Next.js?
Previously, I would create all my React JS apps using create-react-app, which provides an out-of-the-box environment to build a React single-page app. However, implementing advanced optimisation features such as SSG (static site generation) and SSR (server-side rendering) requires complicated setup. Next.js provides many useful optimisations out-of-the-box, including SSG, SSR, lazy-loading images and code splitting. Also, the creators of Next.js have created a hosting platform, Vercel, that offers first-class support for Next.js, including automatically providing a CDN (content delivery network) called Vercel Edge Network that serves all pages using static generation and assets (JS, CSS, images, fonts etc.) very quickly.
Next.js provides code splitting automatically, so each page only loads what’s necessary for that page. Therefore, when the homepage is rendered, the code for the rest of the site is not served initially ensuring fast loading times even for websites with hundreds of pages.
In production, Next.js prefetches code for any linked page in the background whenever Link components appear in a browser’s viewport.

Navigation
Routes in Next.js are handled automatically using the file system. You merely have to create pages in the ‘pages’ folder and the routes are created automatically, using the same name as the file. For example, the page at ‘pages/products’ would have route '/products'. You no longer need to manually install the react-router-dom package and define the routes yourself.
To navigate between pages, the Link component is most commonly used. It is also possible to navigate with the router (using the useRouter hook), for example if you want to navigate to a different page after calling a function.
To use the Link component, you must wrap the Link component around an a tag. The Link component must have an href prop, which is passed to the a tag. If you wrap the a tag in another child component, then you must use the passHref prop to ensure it is passed to the a tag via the child component.

Assets
Static assets, like images, are served under the top-level ‘public’ directory. The ‘public’ directory is also useful for robots.txt, Google Site Verification and other static assets.
Next.js provides an Image component that provides automatically Image Optimisation by default. This allows for resizing, optimizing and serving images in modern formats like WebP when it is supported by the browser. It avoids sending large images to devices with a smaller viewport. Images are optimised on-demand as users request them, so build times aren’t increased by shipping a large quantity of images.
Images are lazy loaded by default; therefore, page speed isn’t penalized for images outside the viewport and only load as they are scrolled into viewport. Images are always rendered in a way that avoids Cumulative Layout Shift, which is when the layout shifts after an image has loaded. Cumulative Layout Shift is a Core Web Vital that Googles uses in search ranking.

Metadata
One of the problems with single page applications using client-side rendering, is that we can’t modify the HTML head tag with a different title or metadata based off the specific page that the user has visited. This can negatively affect SEO results as we cannot customize the header to suit individual product pages.
Using Next.js, we can modify the metadata of a page using the Head component provided by Next.

Pre-rendering
One of the major benefits of using Next.js is the ability to easily pre-render page, thus resulting in faster load times for our application which improves both UX and SEO.
Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering.
Static Generation generates HTML at build-time. The pre-rendered HTML is reused on each request.
Server-side Rendering generates the HTML on each request.
Next.js allows you to choose which pre-rendering form to use for each page. You can create a “hybrid” Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
You are recommended to use Static Generation as often as possible because your pages can be built once and served by CDN which is much faster than having a server render the page on each request. Pages you may want to use Static Generation include: marketing pages, blog posts, e-commerce product listings, help and documentation. If the page requires data that is frequently updated or the page content changes on every request, then you cannot use Static Generation and should use Server-side rendering instead.
You could also skip Server-side rendering and just use Client-side rendering instead. You are best suited to using Client-side rendering for pages that do not require SEO, for example you probably don't need a profile page that contains individual user data to be indexed by search engines. In this case, it can be a good idea to pre-render a barebones template of the page and then use client-side JavaScript to fetch the required data and render the rest of the page.

Static Generation
Static Generation can be done both with and without data. To implement with data, you must create an async function called ‘getStaticProps’. ‘getStaticProps’ runs at build time in production and inside the function you can fetch external data and send it as props to the page.
It essentially tells Next.js that the page has data dependencies, so when the page is pre-rendered make sure to resolve them first.

Server-side Rendering
When you need to fetch data at request time, rather than build time, you can use Server-side Rendering. To use Server-side Rendering, you need to export ‘getServerSideProps’ instead of ‘getStaticProps’ from your page.
As it is called at request time, it has a ‘context’ parameter containing request specific parameters.
Server-side rendering should only be used if you need to pre-render a page whose data must be fetched at request time. Time to first byte will be slower than with Static Generation as the server must compute the result on every request, and the request can’t be cached by a CDN without extra configuration.

SWR (stale-while-revalidate)
The team behind Next.js created a React hook for data fetching called SWR. It is highly recommended for fetching data on the client side as it handles caching, revalidation, focus tracking, re-fetching on internal and more. SWR documentation can be found at https://swr.vercel.app/.
SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data. With SWR, components get a stream of data updates constantly and automatically. The UI will always be fast and reactive.

Dynamic Routes
To create dynamic routes in Next.js, you add brackets to a page (‘[param]’). For example, the page at ‘pages/product/[id].js’ would match the route at ‘/product/1’. The id will be accessible to the page inside a query object provided by the Next.js router.
To implement dynamic routes, you must define ‘getStaticPaths’. A function that returns a list of paths to use, which must not be an array of strings but rather an array of objects. Each object must have the ‘params’ key and contain an object with the ‘id’ key (as we’re using ‘[id]’ in the file name).

Shallow Routing
Shallow routing allows you to change the URL without running data fetching methods again, that includes ‘getServerSideProps’, ‘getStaticProps’, ‘getInitialProps’.
You will receive the updated ‘pathname’ and ‘query’ via the ‘router’ object without losing state. Shallow routing only works for URL changes in the current page.

API Routes
API Routes let you create an API endpoint inside a Next.js app. You can do so by creating a function inside the ‘pages/api’ directory.
They can be deployed as Serverless Functions (Lambdas).
You should not fetch an API Route from ‘getStaticProps’ or ‘getStaticPaths’. Instead, you should write the server-side code directly in ‘getStaticProps’ or ‘getStaticPaths’ (or call helper function).

Django Part 3 - User authentication with dj-rest-auth and allauth

willp11 — Fri, 03 Jun 2022 09:49:57 +0000

For this part of the tutorial, we will be using the dj-rest-auth and allauth packages to help us create API endpoints for account registration, login and email verification. There are various different ways to implement user authentication with Django, will be using token authentication.
We also need to install the Django rest framework package. While we are at it installing packages, we should get the django cors headers package too, as for best security practices we should be protecting against CORS attacks.

As usual, use pip to install the packages.

py -m  pip install dj-rest-auth django-allauth djangorestframework django-cors-headers

After installing the packages, we need to update the project settings. Add the following to the INSTALLED_APPS list in backend/settings.py.

INSTALLED_APPS = [
    ...
    'django.contrib.sites',
    'corsheaders',
    'rest_framework',
    'rest_framework.authtoken',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'dj_rest_auth',
    'dj_rest_auth.registration',
    ...
]

Now we need to run some database migrations as the newly installed packages use some new database models.

py manage.py migrate

Add the cors middleware to the MIDDLEWARE list. It must be before the common middleware.

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

Add all of these settings to the bottom of settings.py.

REST_FRAMEWORK = {
    "DEFAULT_PERMISSION_CLASSES": [
        "rest_framework.permissions.AllowAny",
    ],
    "DEFAULT_AUTHENTICATION_CLASSES": [
        "rest_framework.authentication.SessionAuthentication",
        "rest_framework.authentication.TokenAuthentication",
    ],
}

AUTHENTICATION_BACKENDS = (
   "django.contrib.auth.backends.ModelBackend",
   "allauth.account.auth_backends.AuthenticationBackend"
)

CORS_ORIGIN_WHITELIST = (
    "http://localhost:3000",
    "http://localhost:8000",
)

CSRF_TRUSTED_ORIGINS = ["http://localhost:3000"]

SITE_ID = 1

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_USERNAME_REQUIRED = True
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True

ACCOUNT_CONFIRM_EMAIL_ON_GET = True
ACCOUNT_EMAIL_CONFIRMATION_AUTHENTICATED_REDIRECT_URL = 'http://localhost:8000/api/v1/dj-rest-auth/login/'
LOGIN_URL = 'http://localhost:8000/api/v1/dj-rest-auth/login/'

For now, we are just using the console to receive the email verification email. If you want to use a real email, you can use Gmail by replacing the EMAIL_BACKEND setting with the following:

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_USE_TLS = True
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = os.environ.get("EMAIL_USER")
EMAIL_HOST_PASSWORD = os.environ.get("EMAIL_PASSWORD")
EMAIL_PORT = 587

It is best practice to use a .env file to store your email and password. Install the load dotenv package to use .env files.

py -m pip install python-dotenv

Now create a .env in the same directory as your settings file. In the .env file, write your email and password.

EMAIL_USER=”YOUR EMAIL"
EMAIL_PASSWORD="YOUR PASSWORD"

Add the following code to the top of the settings.py file.

from dotenv import load_dotenv
import os

load_dotenv()

If you try to use your regular email password, you will most likely get an error as you don’t have permission from Google. You will need to create an app password. You can find instructions on how to do that at https://support.google.com/mail/answer/185833?hl=en

Now we need to create the URLs to access the endpoints provided by the packages we installed.

In backend/urls.py add the following:

from django.contrib import admin
from django.urls import path, include, re_path
from dj_rest_auth.registration.views import VerifyEmailView, ConfirmEmailView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/dj-rest-auth/', include('dj_rest_auth.urls')),
    path(
        'api/v1/dj-rest-auth/registration/account-confirm-email/<str:key>/',
        ConfirmEmailView.as_view(),
    ), # Needs to be defined before the registration path
    path('api/v1/dj-rest-auth/registration/', include('dj_rest_auth.registration.urls')),
    path(
        'api/v1/dj-rest-auth/account-confirm-email/',
        VerifyEmailView.as_view(),
        name='account_email_verification_sent'
    ),
]

Next, we will create a serializer for the /user endpoint. Serializers in Django REST Framework are responsible for converting objects into data types understandable by javascript and front-end frameworks. Serializers also provide deserialization, allowing parsed data to be converted back into complex types, after first validating the incoming data.

In the users directory, create a new file called serializers.py. In serializers.py:

from rest_framework import serializers
from .models import CustomUser

class UserProfileSerializer(serializers.ModelSerializer):
    class Meta:
        model = CustomUser
        fields = ('pk', 'email', 'username', 'email_verified')

Now we need to use the serializer by adding it to the settings.py file. At the bottom of settings.py:

REST_AUTH_SERIALIZERS = {
    'USER_DETAILS_SERIALIZER': 'users.serializers.UserProfileSerializer'
}

We have finally added everything we need. Navigate to http://127.0.0.1:8000/api/v1/dj-rest-auth/registration/ and try to create a new account.

Enter a username, email and password. You should receive a response containing an authentication key that will use for authenticated API requests. You should also receive an email to verify your email address. This will either be in your email inbox or the console depending on what you setup previously. Right now, following the link in the email will change a separate database model and not the email_verified field in our custom User model.

We want to be able to update our user model, so we need to use a signal. This will send a signal when a user verifies their email.
Create a signals.py file inside the users directory. In signals.py:

from allauth.account.signals import email_confirmed
from django.dispatch import receiver

@receiver(email_confirmed)
def email_confirmed_(request, email_address, **kwargs):
    user = email_address.user
    user.email_verified = True

    user.save()

Then, we need to edit the UsersConfig class in users/apps.py.

class UsersConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'users'

    def ready(self):
        import users.signals

Now follow the link you received to verify your email. Then login to the admin site and check the user model. Your newly created account should have it’s email_verified field set to True.

You can login to your new account at
http://127.0.0.1:8000/api/v1/dj-rest-auth/login/

You can see the current logged in user data at http://127.0.0.1:8000/api/v1/dj-rest-auth/user/

Django Part 2 - Creating a custom User model

willp11 — Thu, 02 Jun 2022 06:14:18 +0000

We are going to create a custom user class that will be used when users register an account and login. It is much easier to do this before running the initial database migrations, we can then easily make adjustments to the model later.

We will define the custom user model in the users/models.py file. The model will have all the default User model fields, such as username, email and password. On top of that, we are adding an optional name field and an email_verified field that will default to False and update to True when a user verifies their email.

from django.db import models
from django.contrib.auth.models import AbstractUser

class CustomUser(AbstractUser):
    name = models.CharField(max_length=100, null=True, blank=True)
    email_verified = models.BooleanField(default=False)

We need to update the settings.py file so that we can use the newly created CustomUser model for authentication.

AUTH_USER_MODEL = 'users.CustomUser'

Before we can start the server again, we need to run the database migrations. We use the manage.py script to create and run database migrations.

py manage.py makemigrations
py manage.py migrate

Django comes with some pre-made admin functionality that can be accessed at http://127.0.0.1:8000/admin

In order to log in there, we need to create a super user account which can be done using the manage.py script.

py manage.py createsuperuser

Follow the instructions and enter your username, email and password, then navigate to the admin site at http://127.0.0.1:8000/admin

You can now login using the credentials you just created.
In the admin site, we can see all the database models and instances.
Normally, we would be able to see the User model, however at the moment we can only see the Groups model because we created our own custom user model. In order to see the User model in the admin site, we are going to write a custom admin class.

Before we do that, we are going to create some forms that will be used by the admin class to enable us to create and update User instances.
Create a new file, forms.py, inside the users directory.
In users/forms.py:

from django.contrib.auth.forms import UserChangeForm, UserCreationForm
from .models import CustomUser

class CustomUserCreationForm(UserCreationForm):
    class meta(UserCreationForm):
        model = CustomUser
        fields = UserCreationForm.Meta.fields + ('name',)

class CustomUserChangeForm(UserChangeForm):
    class meta(UserChangeForm):
        model = CustomUser
        fields = UserChangeForm.Meta.fields

Then in the users/admin.py file, we will create the custom admin class and register it to the admin site.

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin
from .models import CustomUser
from .forms import CustomUserChangeForm, CustomUserCreationForm

class CustomUserAdmin(UserAdmin):
    add_form = CustomUserCreationForm
    form = CustomUserChangeForm
    model = CustomUser
    list_display = [
        'email',
        'username',
        'name',
        'is_staff',
        'email_verified'
    ]
    fieldsets = UserAdmin.fieldsets + ((None, {"fields": ("name",)}),) 
    add_fieldsets = UserAdmin.add_fieldsets + ((None, {"fields": ("name",)}),)

admin.site.register(CustomUser, CustomUserAdmin)

Now when logged into the admin site you can see the Users model and our user instance that we are logged in with.

In the next part of the tutorial, we will be creating the API endpoints to register, login and verify email address.

Django Part 1- Creating a new project

willp11 — Wed, 01 Jun 2022 02:53:20 +0000

In this post I will be showing how you can create a new Django project.

This tutorial assumes that you already have Python and pip installed. I am using a Windows machine, it uses the command py to run Python, however on Linux it will be different and most likely you will need to replace py with python3.

First, create a new folder that will hold all our project directories. Inside this folder, create a new virtual environment using the command:

py -m venv venv

This will have created a new directory called venv that contains our new virtual environment. Now activate the venv using the command:

venv\Scripts\activate

On Linux, the command is:

source venv/bin/activate

We need to install Django using pip. This will install Django into the new virtual environment that we have setup.
Use the command:

py -m pip install Django

Now we can use the django-admin command line utility to create a new project. We will call the Django project “backend” as later we will write a basic frontend using React. Use the command:

django-admin startproject backend

Now navigate inside the newly created project folder.

cd backend

Inside the new project we will create our first app. During this tutorial, we will be creating a custom user model and therefore we will name the app “users”.

To create the app we will be using the manage.py script that Django provides. We will use script for various functionality when building a project, including starting the development server, creating and running database migrations and more.
To create the app, run the command:

py manage.py startapp users

We need to register the new app inside the base app in the project. To do this, we edit the settings.py file inside the inner backend directory. Have a look inside the file users/apps.py, in there we find a class created by Django called UsersConfig. We need to add this class to the INSTALLED_APPS list inside backend/settings.py.

INSTALLED_APPS = [
    …
    users.apps.UsersConfig
]

Now we want to run the development server to check that the project has been created successfully. Use the command:

py manage.py runserver

It will run the development server at the default port of 8000. Open your browser and navigate to http://127.0.0.1:8000 and you should see the Django default welcome page.