Develop a CRUD Application Using Django and React (Part 2) - Frontend

In previous article you learned to develop the backend part of a simple student management web application using Django REST framework. In this article you will learn to develop the Frontend part of this app using React JS. 

Before we start coding, let just go through some basic concepts of React Js. If you are already familiar with these concepts then you can directly jump to part 3.

Intro to React Js

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

React uses JSX syntax. JSX is a React extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML.

What is DOM?

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

The W3C Document Object Model (DOM) is an API that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

What is ReactDOM?

ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more.

• render()
• findDOMNode()
• unmountComponentAtNode()
• hydrate()
• createPortal()

To use the ReactDOM in any React web app we must first import ReactDOM from the react-dom package by using the following code snippet:

import ReactDOM from 'react-dom'

React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components. We will develop our app using Function components.

In older React code bases, you may find Class components primarily used. It is now suggested to use Function components along with Hooks, which were added in React 16.8. 

Class Component

A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Function Component

Here is the same example as above, but created using a Function component instead.

A Function component also returns HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand, and will be preferred in this tutorial.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

Props

Components can be passed as props, which stands for properties.

Props are like function arguments, and you send them into the component as attributes.

To send props into a component, use the same syntax as HTML attributes:

Add a “brand” attribute to the Car element:

const myElement = <Car brand="Ford" />;

Use the brand attribute in the component:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

State and Hooks

State of a component is an object that holds some information that may change over the lifetime of the component.

Hooks were added to React in version 16.8.

Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed.

For example, useState is a Hook that lets you add React state to function components

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("red");
}

The first value color is our current state.

The second value setColor is the function that is used to update our state.

React Events

Just like HTML DOM events, React can perform actions based on user events.

React has the same events as HTML: click, change, mouseover etc.

React events are written in camelCase syntax:

onClick instead of onclick.

React event handlers are written inside curly braces:

onClick={shoot} instead of onClick="shoot()".

<button onClick={shoot}>Take the Shot!</button>

Example:

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

Now that you are familiar with core React concepts. Lets start coding.