Скачать с ютуб Complete Django and React App (2024) в хорошем качестве

Complete Django and React App (2024)

Here, I will create a complete full-stack Django and React todo app. A notes app is a simple application, however I consider it one of the best apps for learning core web development concepts like CRUD operations. CRUD operations are ubiquitous in web development, making it essential for me to create a fully functional notes app that incorporates these operations to master the concepts effectively. Source code: https://github.com/Leynad21/todo-reac... (Some parts of the source code may differ from what is shown in the video, but the functionality remains the same) QUICK SETUP: 1) Install and activate virtual environment In the root folder, on the terminal create a virtual environment. Terminal command: python -m venv [name of the environment (usually env)] Activate command: source env/Scripts/activate 2) Creating and setting up Django Project a) Install django and all the main libraries : a. pip install django b. pip install djangorestframework django-cors-headers b) Create project in terminal: django-admin startproject backend c) Cd to the backend folder d) Create an app in django in the terminal a. python manage.py startapp [name of the app] 3) Create a react app using vite Go back to the root folder and: a) npm create vite@latest frontend -- --template react b) cd frontend c) npm install 4) Open VS code and the run the servers a) In the root folder open VS code: a. code . b) Open two terminals and make sure your virtual environment is active c) Run django server a. cd to backend b. python manage.py runserver d) Run react server a. cd to frontend b. npm run dev 5) Set up the settings.py to include rest_framework and corsheaders CORS_ALLOWED_ORIGINS = [ "http://127.0.0.1:5173", "http://localhost:5173", ] Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', External Apps 'rest_framework', 'corsheaders', Internal Apps 'main', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', "corsheaders.middleware.CorsMiddleware", 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] Timestamps: 0:00:00 - Introduction 0:02:10 - Django & React Setup 0:13:00 - Backend Development Begins 0:13:35 - Creating Django Models and Serializers 0:18:30 - Configuring Views & URLs 0:33:50 - Frontend Development Commences 0:35:00 - Setting Up Tailwind CSS 0:40:00 - Designing Layout and Components 1:06:15 - Integrating Backend API with the Frontend 1:21:00 - Implementing Dynamic Styling 1:30:10 - Adding CRUD Functionality 1:34:00 - Creating Functionality 1:44:30 - Deleting Functionality 1:50:15 - Updating Functionality 2:18:15 - Recap #django #react #tutorial #todo