Directly manipulating the browser’s Real DOM is expensive:

• Each DOM change can trigger layout, style recalculation and paint.

• Changing many nodes one-by-one leads to layout thrashing and poor performance.

• Writing manual, fine-grained DOM-diffing is error-prone and hard to maintain.

React’s Virtual DOM (VDOM) is a lightweight JavaScript representation of the UI. React uses it to compute a minimal set of changes and apply them in batches to the Real DOM, minimizing costly DOM operations.

2. Real DOM vs Virtual DOM a quick comparison

• Real DOM

  • Browser-managed tree of nodes.

  • Updating is relatively slow (layout, style, paint).

  • Imperative: you tell the browser exactly what to change.

• Virtual DOM

  • JavaScript object tree representing the UI (elements, props, children).

  • Very cheap to create and compare.

  • Declarative: you describe what the UI should look like; React figures out how to update the Real DOM.

3. Initial rendering

• Component code runs its render() (or functional component body) and returns a tree of React elements (JS objects describing tags, props, and children).

• React builds a Virtual DOM tree from those elements.

• React converts (renders) that VDOM tree into Real DOM nodes and appends them into the document. This conversion may be batched/optimized.

• Browser paints the initial UI.

4. How state or props changes trigger a re-render

• When a component’s state or props change (e.g., via setState, useState setter, or new props from a parent), React marks that component as needing update.

• React calls the component’s render function again (or re-runs the functional component) to produce a new VDOM tree for that component subtree.

• Important: calling render does not directly modify the Real DOM — it produces a new VDOM representation.

5. Creating a new Virtual DOM tree

Each update produces a new VDOM tree (or at least for the affected subtree). The old VDOM tree is retained (or referenced) so React can compare old vs new. The VDOM is typically a lightweight nested structure like:

{ type: 'div', props: { className: 'card' }, children: [ ... ] }

6. What “diffing” (reconciliation) means

Diffing = comparing the old VDOM tree with the new VDOM tree to find the minimal set of changes required to update the Real DOM so it matches the new VDOM.

Key ideas React uses (simple mental model):

• Compare nodes at the same position in the tree.

• If node types differ (e.g., 'div' vs 'span' or ComponentA vs ComponentB), replace the node.

• If types are the same, update attributes/props and recurse into children.

• For lists of children, keys are used to match items across updates and avoid unnecessary re-creation.

7. How React finds the minimal required changes

React’s reconciliation uses heuristics to avoid an O(n^3) general tree-diff. Simplified rules:

1. If two nodes have different types, replace the subtree.

2. If same type, update props and compare children.

3. For children arrays:

   • If keys are provided, use keys to match old and new children and move/update only those that changed.

   • If no keys, fall back to index-based comparison (which may cause more replacements).

4. Only update attributes that changed; leave others untouched.

5. Update text nodes directly if text content changed.

Because the VDOM is cheap to traverse and compare, React can compute a minimal "patch" set before touching the Real DOM.

8. Applying patches: updating only changed nodes in the Real DOM

After diffing, React has a list of operations (patches), e.g.:

• Update prop on DOM node A

• Replace DOM node B with new node

• Insert node C

• Remove node D

React batches many of these changes and applies them in the commit phase. By doing only the needed updates, it avoids unnecessary DOM writes and reduces reflows/layouts.

9. Why this approach improves performance?

• Fewer DOM operations: only necessary updates are applied.

• Batch updates: changes can be grouped to avoid repeated layout calculations.

• Faster decision-making: comparing JS objects in memory is much faster than DOM operations.

• Predictable updates: declarative rendering reduces accidental inefficient DOM manipulations.

10. High-level React flow: render → diff → commit

1. Render (Render Phase)

   • React calls render functions to produce a new VDOM tree (pure, side-effect free).

   • Multiple updates can be scheduled and combined here.

2. Diffing / Reconciliation

   • Compare old VDOM tree with new VDOM tree.

   • Produce a list of patch operations describing minimal changes.

3. Commit (Commit Phase)

   • Apply patches to the Real DOM.

   • Run lifecycle effects that require DOM (e.g., useLayoutEffect, refs).

   • Browser paints.

Note: React’s Fiber architecture reorganizes work into units to allow pausing and prioritizing updates (concurrency). For this article we avoid diving into Fiber internals—focus on the mental model above.

11. Step-by-step lifecycle example (simple)

1. Initial render:

   • App renders → VDOM-A created → commit → Real DOM reflects VDOM-A.

2. setState called in a component:

   • React schedules update → component re-renders → VDOM-B created.

   • React diffs VDOM-A vs VDOM-B → determines patches.

   • Commit phase applies patches to Real DOM → Real DOM updated to VDOM-B.

3. Repeat for subsequent updates.

Small code example (conceptual)

function TodoList({ items }) {
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

When items change:

React re-renders TodoList → produces new VDOM for

• and children.

• Because each

• has a stable key, React reorders/updates only affected

• nodes rather than recreating all.

Common misconceptions (clear and simple)

• “React always re-renders the whole page” — No. React re-renders components to produce VDOM but only commits minimal DOM updates.

• “Virtual DOM is a DOM clone kept in memory” — It’s a lightweight JavaScript representation (not a full browser DOM).

• “You don’t need to worry about performance” — VDOM helps a lot, but you still need good keys, avoid heavy synchronous work during render, and memoize when appropriate.

Conclusion — mental model to keep

• Think declaratively: describe what UI should be.

• React converts descriptions to a lightweight tree (VDOM).

• On updates, React creates a new VDOM, diffs it against the old, and applies only necessary changes to the Real DOM.

• This reduces expensive DOM operations and keeps UI updates efficient.

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. It takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel.

Django is a full-featured web framework that follows the Model-View-Controller (MVC) architectural pattern. It provides a set of tools and libraries for building web applications, including an ORM, a templating engine, and a built-in admin interface.

Step 2. Django Setup

To get started with Django, you’ll need to install it on your computer. You can do this by running the following command in your terminal, after setting up a virtual environment:

python -m venv .venv # Command to setup virtual environment

# for macOS and linux
# python3 -m venv .venv

Now to activate the virtual environment we use the following command:

.venv\Scripts\activate # To activate the virtual environment

# for macOS and linux
# source .venv/bin/activate

Step 3. Django Project

A Django project is a collection of settings and configurations that define the structure and behavior of a web application. It includes the code for the application, as well as the templates, static files, and other resources that make up the application.

To create a new Django project, you can use the following command:

django-admin startproject demoproject
cd demoproject

This will create a new directory called demoproject with the basic structure of a Django project.

Step 4. Start a Django Server

To start the Django server, you can use the following command:

python manage.py runserver

This will start the server and make it accessible at http://localhost:8000.

Ignore the unapplied migrations warning. This is a common issue when starting a new Django project. We will address this in a later section.

Step 5. Creating our first views

Create a new file called views.py in the demoproject directory. In this file, we will define a few views that are simple functions that return a response. We want to have home page, about page, and contact page. Each of these pages will return html content.

from django.http import HttpResponse

def home(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: Home page</h1>")

def about(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: About page</h1>")

def contact(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: Contact page</h1>")

Now, let’s create a new file called urls.py in the demoproject directory. In this file, we will define the URL patterns for our application. If the file is already there, you can just add the following code to the end of the file:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('about/', views.about, name='about'),
    path('contact/', views.contact, name='contact'),
]

Now, let’s run the server again and visit the following URLs:

• http://localhost:8000/

• http://localhost:8000/about/

• http://localhost:8000/contact/

You should see the following output in the above routes:

Welcome to Chai's Django Project: Home page
Welcome to Chai's Django Project: About page
Welcome to Chai's Django Project: Contact page

Step 6. Adding Templates App in Django

In Django, templates are used to generate HTML pages. They are used to display data and perform logic in a web application. To create a template, you can create a new file called templates/layout.html in the root directory. Make sure that template folder is at same level as manage.py file.

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to Chai's Django Project</title>
</head>
<body>
    <h1>Welcome to Chai's Django Project</h1>
</body>
</html>

Now if you need to view this template in the http://localhost:8000/ you need to make some changes in the views.py and settings.py file:

# Python : settings.py

'DIRS': ['templates'], # add the name of the templates directory inside this array

from django.http import HttpResponse
from django.shortcuts import render

def home(request):
    # return HttpResponse("<h1>Welcome to Chai's Django Project: Home page</h1>")
    return render(request, "index.html")

def about(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: About page</h1>")

def contact(request):
    return HttpResponse("<h1>Welcome to Chai's Django Project: Contact page</h1>")

Step 7. Adding CSS and JavaScript

To add CSS and JavaScript to your Django project, you can create a new file called static/css/style.css in the root of the demoproject directory. In this file, you can write CSS code that will be used to style the HTML page. You can also create a new file called static/js/script.js in the same directory. In this file, you can write JavaScript code that will be used to add interactivity to the HTML page.

To add these static files go to settings.py and add the following line:

import os # import this at the top of settings.py file

STATIC_URL = '/static/' # below this add the following line
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

In the index.html file, at the top of the file add the following line:

{% load static %} 
<link rel="stylesheet" href="{% static 'css/style.css' %}">

Now, let’s run the server again and visit the http://localhost:8000/ URL. You should see the output.

Step 8. Adding Jinja2 Templates to Django Project

Jinja2 templates are written in a simple text format called HTML. The syntax is very similar to HTML, but with some additional features. You need to inject variables into the template using the {{ variable }} syntax. For example, if you want to display a name, you can use the following code:

Hello {{ name }}!

Jinja2 is a template engine for Python. It is a very powerful template engine that can be used to render HTML, XML, and other formats. It is also used to render templates for the Django admin interface. If you are in Django, you don’t need to install Jinja2 separately. It is already installed with Django. Django also comes with a built-in template configurations that allows you to use Jinja2 templates.

For more details on how to implement Jinja Templates in Django refer the article: Getting Started with Jinja Templates in Django

Step 9. Install Tailwind CSS and Flowbite to your Django project

Tailwind CSS is a CSS framework that allows you to build custom styles for your web pages. It provides a set of pre-built classes that you can use to style your HTML elements, whereas Flowbite is an open-source library of UI components based on the Tailwind CSS featuring all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, but also some more advanced interactive elements such as datepickers. For step-by-step installation refer this article how-to-add-tailwind-css-and-flowbite-to-your-django-project

Step 10. Adding Apps in Django

The most common way to organize your Django project is to use apps. An app is a self-contained module that contains models, views, templates, and other components of your project. Apps allow you to organize your code into logical units and make it easier to manage and maintain your project.

You can create it manually or use the startapp command to create a new app for you. To create an app, navigate to the directory where you want to create the app and run the following command:

python manage.py startapp demoapp

This will create a new directory called demoapp with the necessary files and directories for an app.

To add an app to your project, you need to add it to the INSTALLED_APPS setting in your project’s settings.py file. You can do this by adding the app’s name to the list of installed apps:

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

In Django, templates are organized into apps. Each app can have its own templates directory, which contains the templates for that app. Create a new directory called templates in your app’s directory. Inside the demoapp directory, create a templates directory and add a my_app.html file to it.

Add your basic html code to the my_app.html file.

To serve this file, we need a view and a url. Create a new file called views.py in your app’s directory. Add the following code to the file:

from django.shortcuts import render

def all_chai(request):
    return render(request, 'my_app.html')

This view will render the my_app.html template when it is called.

Create a new file called urls.py in your app’s directory. Add the following code to the file:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.my_app, name='my_app'),
]

This urlpattern will map the root URL of the app to the my_app view.

Now, we need to make aware of this new urlpattern in our project’s urls.py file. Add the following code to the project’s urls.py file:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('demoapp/', include('chai.urls')),
]

Now, we can access the my_app view by going to http://localhost:8000/demoapp

Install the Django Tailwind package via pip:

To add Tailwind CSS to your Django project, you'll need to have a Node.js and NPM installed on your system. If you haven't already, install Node.js and NPM (Node Package Manager). You can install Node.js from here. And then run the below command to install the following packages using pip:

pip install django-tailwind
pip install 'django-tailwind[reload]'

This will install the django-tailwind package and the django-tailwind[reload] package, which includes the tailwind-django command-line tool.

Once you have installed Tailwind CSS, you can use the tailwind-django command to generate the necessary files for your project. This command will create a tailwind.config.js file in your project directory, as well as a static/css/tailwind.css file that contains the compiled Tailwind CSS.

Now, add tailwind to your INSTALLED_APPS in your settings.py file:

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
]

Next, run the below command to create a Tailwind CSS compatible Django app, I’d like to call it theme. Customize with your own names:

python manage.py tailwind init

Add the newly create theme to your INSTALLED_APPS in your settings.py file:

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme'
]

Register the generated theme app by adding the following line to settings.py file:

TAILWIND_APP_NAME = 'theme'

Make sure that the INTERNAL_IPS list is present in the settings.py file and contains the 127.0.0.1 IP address:

INTERNAL_IPS = [
    "127.0.0.1",
]

Now, install Tailwind CSS dependencies, by running the following command:

python manage.py tailwind install

The django-tailwind package comes with a simple base.html template located at your_tailwind_app_name/templates/base.html. You can always extend or delete it if you already have a layout. If you are not using the base.html template that comes with django-tailwind, you can configure by adding the below lines in choice of your template:

{% load static tailwind_tags %}
...
<head>
   ...
   {% tailwind_css %}
   ...
</head>

The {% tailwind_css %} tag includes Tailwind’s stylesheet.

Let’s also add and configure django_browser_reload, which takes care of automatic page and CSS refreshes in the development mode. Add it to INSTALLED_APPS in settings.py:

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'theme',
  'django_browser_reload'
]

The middleware should be listed after any that encode the response, such as Django’s GZipMiddleware. The middleware automatically inserts the required script tag on HTML responses before </body> when DEBUG is True.

Include django_browser_reload URL in your root url.py :

from django.urls import include, path

urlpatterns = [
    ...,
    path("__reload__/", include("django_browser_reload.urls")),
]

include this at the end of all the paths.

Now, finally to render the tailwind in your project you need to configure an last step that is to include the path of NPM. That’s because this app needs node.js to be installed in your system. And you need to provide the path to the node.js executable in your settings.py file: You can use command where node to find the path to the node.js executable.

NPM_BIN_PATH = 'npm.cmd' # For Windows

NPM_BIN_PATH = '/usr/local/bin/npm' # For MacOS and linux

Now, all the steps are completed to start Django Tailwind in development mode, run the following command in a terminal to get started:

python manage.py tailwind start

This will start a long-running process that monitors files for changes. Use CTRL + C to stop the process.

Here's what's happening behind the scenes:

1. The stylesheet updates every time you add or remove a CSS class in a Django template.

2. django-browser-reload watches for changes in HTML and CSS files. When a Django template or CSS is updated, the browser refreshes them automatically. This provides a smooth development experience without needing to reload the page to see updates.

Installing Tailwind CSS Django - Flowbite

Now that we have successfully installed Tailwind CSS, if we want to implement or use some components, we can use the Flowbite component library to do so. Below are the given steps to get stated with the Flowbite:

Install Flowbite as a dependency using NPM

npm install flowbite

Make some desired changes in the tailwind.config.js file:

module.exports = {
  content: [
      './templates/**/*.html',
      './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('flowbite/plugin')
  ]
}

Include Flowbite’s JavaScript file inside the layout.html file just before the end of the <body> tag using CDN or by including it directly from the node_modules/ folder

<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>

Let’s start by adding a Navbar component inside the layout.html file:

{% load compress %}
{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django + Tailwind CSS + Flowbite</title>

    {% compress css %}
    <link rel="stylesheet" href="{% static 'src/output.css' %}">
    {% endcompress %}

</head>

<body class="bg-green-50">

    <!-- Add this -->
    <nav class="bg-green-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded-sm dark:bg-gray-800">
        <div class="container flex flex-wrap items-center justify-between mx-auto">
          <a href="{{ .Site.Params.homepage }}/" class="flex items-center">
              <img src="/docs/images/logo.svg" class="h-6 mr-3 sm:h-9" alt="Flowbite Logo" />
              <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite Django</span>
          </a>
          <button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
            <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
            <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-white bg-green-700 rounded-sm md:bg-transparent md:text-green-700 md:p-0 dark:text-white" aria-current="page">Home</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
              </li>
              <li>
                <a href="#" class="block py-2 pl-3 pr-4 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-green-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <!-- End of new HTML -->

    <div class="container mx-auto mt-4">
        {% block content %}
        {% endblock content %}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
</body>

</html>

Creating a Tailwind CSS production build

To create a production build of your theme, run the following command:

python manage.py tailwind build

{% tailwind_preload_css %} tag is used to replace the development build with a bundle optimized for production. The tag generates a preload directive for your stylesheet, which improves loading performance in production. Place it above the {% tailwind_css %} tag:

{% load tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Django Tailwind</title>
    {% tailwind_preload_css %}
    {% tailwind_css %}
  </head>
  <body></body>
</html>

Conclusion

By following these steps, you have successfully integrated Tailwind CSS and Flowbite components into your Django project. This setup allows you to leverage the power of Tailwind's utility-first CSS and Flowbite's pre-designed components to create a visually appealing and responsive web application.

Django is a powerful web framework that allows developers to build robust web applications. To get started with the Django setup and installation refer here.

Jinja2 is a powerful templating engine for Python, widely used in web frameworks like Flask and Django. It allows developers to create dynamic web pages by embedding Python-like expressions in HTML. Here, we'll explore some of the essential Jinja2 tags and provide examples to illustrate their usage.

Some of the common template tags in Jinja2 are:

1. % extends %}

The {% extends %} tag is used to extend a base template. It takes a template name as an argument, and extends the base template with the contents of the template file.

For example, the following code extends the layout.html template with the contents of a template file called child.html , the code looks like:

Example:

{% extends "base.html" %}

{% block content %}
    <h1>Welcome to my website!</h1>
    <p>This is a child template.</p>
{% endblock %}

In this example, the content block in the child template overrides the content block in the base template, and the title block is not overridden.

2. {% load %}

   The {% load %} tag is used to load a template tag library. It takes a library name as an argument, and loads the template tag library with that name. For example, the following code loads the static template tag library:

    {% load static %}
   

   This will load the static template tag library, which provides a set of template tags for working with static files.

3. { block %} and {% endblock %}

The {% block %} tag is used to define a block of content that can be overridden in child templates. It takes a name as an argument, and defines a block with that name that can be overridden or modified in child templates. For example, the following code defines a base template that includes a header and a footer with some default values:

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
    {% block content %}
        <h1>Welcome to my website!</h1>
    {% endblock %}
    <footer>
        {% block footer %}
            <p>Copyright © 2021</p>
        {% endblock %}
    </footer>
</body>
</html>

And the following code defines a child template that overriding the content block:

{% extends "base.html" %}

{% block title %}My Website{% endblock %}

{% block content %}
    <h1>Welcome to my website!</h1>
    <p>This is a child template.</p>
{% endblock %}

In this example, the content block in the child template overrides the content block in the base template, and the title block is not overridden.

4. {% include %}

The {% include %} tag is used to include another template within the current template. This is useful for reusing components like headers and footers.

Example:

{% include "header.html" %}

5. {% if %}, {% else %}, and {% endif %}

These tags are used for conditional statements, allowing you to render content based on certain conditions.

Example:

{% if user.is_authenticated %}
  <p>Welcome, {{ user.username }}!</p>
{% else %}
  <p>Please log in.</p>
{% endif %}

6. {% for %} and {% endfor %}

The {% for %} tag is used to iterate over a sequence of items. It takes a variable name and a sequence as arguments, and displays the content inside the tag for each item in the sequence. For example, the following code will display a items which are iterated:

<ul>
{% for item in items %}
  <li>{{ item }}</li>
{% endfor %}
</ul>

7. {% with %} and {% endwith %}

The {% with %} tag allows you to define a variable for use within a block, simplifying complex expressions.

Example:

{% with total=price * quantity %}
  <p>Total: {{ total }}</p>
{% endwith %}

8. {% url %}

The {% url %} tag is used to generate a URL for a view. It takes a view name and a set of arguments as arguments, and generates a URL for the view with those arguments.

For example, the following code generates a URL for the index view with the name argument set to 'home':

<a href="{% url 'index' name='home' %}">Go to the home page</a>

This will generate a link to the home page with the name argument set to 'home' in the views file.

9. {% macro %} and {% endmacro %}

Macros are like functions in Jinja2, allowing you to define reusable snippets of code.

Example:

{% macro render_item(item) %}
  <li>{{ item }}</li>
{% endmacro %}

10. {% call %}

The {% call %} tag is used to call a macro with a block of content.

Example:

{% call render_item() %}
  <li>Special Item</li>
{% endcall %}

Conclusion

Jinja2 tags provide a flexible way to create dynamic and reusable templates. By understanding and utilizing these tags, you can build efficient and maintainable web applications. Whether you're extending templates, including components, or using control structures, Jinja2 offers a robust set of tools to enhance your web development workflow.

Prettier is a code formatter that ensures a consistent style by parsing your code and reprinting it according to its own rules. Husky is a tool that helps you manage Git hooks easily, allowing you to automate tasks like code formatting before commits.

Step 2: Install Prettier, Husky, and lint-staged

First, install Prettier, Husky, and lint-staged as development dependencies in your project:

npm install --save-dev prettier husky lint-staged

Step 3: Configure Prettier

Create a .prettierrc file in the root of your project to configure Prettier according to your preferences. For example:

{
    "singleQuote": false,
    "bracketSpacing": true,
    "tabWidth": 4,
    "semi": true
}

Step 4: Create a .prettierignore File

To prevent Prettier from formatting certain files or directories, create a .prettierignore file in the root of your project. This file works similarly to a .gitignore file. Add the paths you want to exclude from formatting. For example:

node_modules
build
dist

This step ensures that Prettier ignores the specified files and directories during the formatting process.

Step 5: Add a Pre-commit Hook

Create a pre-commit hook that runs lint-staged to format only the staged files:

npx husky add .husky/pre-commit "npx lint-staged"

This command will create a .husky/pre-commit file with the following content:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

Step 6: Configure lint-staged

Configure lint-staged to run Prettier on your staged files. Add the following configuration to your package.json:

{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src/**/*.{js,jsx,ts,tsx}": [
            "prettier --write",
            "git add"
        ]
    }
}

This configuration tells lint-staged to format any staged file matching the specified extensions using Prettier.

Step 7: Commit Your Changes

After setting up everything, you can commit your changes. When you run git commit, Husky will trigger the pre-commit hook, and lint-staged will format the staged files using Prettier. Here's an example of what the output might look like:

git add .
git commit -m "Add new feature"

# Example output:
# > husky - pre-commit hook
# > lint-staged
# ✔ Preparing...
# ✔ Running tasks...
# ✔ Applying modifications...
# ✔ Cleaning up...
# [main 1a2b3c4] Add new feature
#  2 files changed, 10 insertions(+), 2 deletions(-)

Conclusion

By following these steps, you’ve set up an automated system that ensures your code is always formatted according to your Prettier configuration before every commit. This integration not only enforces consistency across your project but also reduces the manual effort required during code reviews.