Posts

Develop a CRUD Application using Django and React (Part 3) - Frontend

Image
In previous articles we learned to  develop the backend  of a simple student management web application using Django REST framework and introduced  React Core concepts . In this article you will write code to develop the frontend of student management app. You can get the source code from my GitHub repo: GitHub - fizaashraf37/smwa-project: A simple student management web application with CRUD… A simple student management web application with CRUD operations developed in Django and React Js - GitHub … github.com Watch step by step tutorial on YouTube Table of Contents Prerequisites Create React App Create TOP Navigation Bar Create Side Navigation Bar Create Home Page Create Students List Page Create Manage Students Page Test CRUD operations Summary Prerequisites Make sure you have a recent version of  Node.js  installed.  After installation check if node and npm are installed in your system. Run below commands to check node and npm versions in command prompt: Check node version node --v
Post a Comment
Read more

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

Image
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  D ocument  O bject  M odel of the page. The  HTML DOM  model is constructed as a tree of  Objects : The W3C Documen
Post a Comment
Read more

Develop a CRUD Application using Django and React (Part 1) - Backend

Image
In this Article you will learn to develop a simple student management web application with CRUD operations using Django Rest Framework for backend and React Js for frontend. The final application will look like this. Get the full source code from here: GitHub - fizaashraf37/smwa-project: A simple student management web application with CRUD… A simple student management web application with CRUD operations developed in Django and React Js - GitHub … github.com If you are a visual learner the you can watch full video with step by step instructions on YouTube: Table of Contents: Introduction to REST API Introduction to CRUD and HTTP Verbs Application Architecture Steps to Develop the Application Introduction to REST API If you have ever wondered how some big web applications like Netflix, Facebook etc work. The main concept behind almost any web application is REST APIs. These applications use REST APIs to interact with the backend data store. An API (Application Programming Interface) is
Post a Comment
Read more