Reactify-django CLI를 사용하여 React를 Django에 원활하게 통합-JS 튜토리얼-php.cn

Integrate React into Django Seamlessly with the reactify-django CLI

Django 프로젝트에 React를 추가하면 React의 동적 클라이언트 측 기능을 통해 Django의 서버 측 렌더링 및 보안 기능을 활용할 수 있어 개발 경험이 향상될 수 있습니다. Reactify-django CLI를 사용하면 이러한 통합이 간단해지며, React로 대화형 UI를 구축하는 동시에 Django의 강력한 백엔드를 활용할 수 있습니다. 또한 정적 타이핑을 위한 TypeScript와 유틸리티 우선 스타일을 위한 Tailwind CSS를 구성할 수 있는 유연성이 있어 처음부터 간소화되고 현대적인 개발 설정이 가능합니다.

이 가이드에서는 Django와 React를 결합하는 것이 왜 유익한지 살펴본 다음, 새로운 Django 프로젝트와 기존 Django 프로젝트 모두에서 Reactify-django를 사용하여 React를 설정하는 방법을 살펴보겠습니다.

모놀리식 Django-React 설정을 선택하는 이유는 무엇입니까?

모놀리식 Django-React 아키텍처는 두 세계의 장점을 모두 제공합니다.
이 접근 방식이 유리한 이유는 다음과 같습니다.

서버측 렌더링(SSR): Django의 템플릿 엔진과 강력한 백엔드 기능은 기본적으로 서버측 렌더링을 제공하여 SEO와 초기 페이지 로드 속도를 향상시킵니다.
향상된 라우팅 및 보안: Django에 내장된 라우팅 및 강력한 보안 기능(예: CSRF 보호 및 세션 처리)은 백엔드 관리를 단순화하여 복잡한 라우팅을 더 안전하고 쉽게 처리할 수 있도록 해줍니다.
통합 배포: React와 Django를 한 지붕 아래에 사용하면 단일 애플리케이션으로 배포할 수 있으므로 별도의 프런트엔드와 백엔드 서비스를 관리하는 복잡성이 줄어듭니다. 또한 Django와 React가 동일한 출처를 공유하므로 CORS 헤더 및 구성이 필요하지 않습니다.

reactify-django를 사용하여 Django 내에서 React를 설정하면 프로젝트 초기화 속도가 빨라지고 상용구 코드가 줄어들어 즉시 기능 구축을 시작할 수 있습니다.

1. 시작하기:

reactify-django 설치
Reactify-django를 사용하려면 컴퓨터에 Node.js가 설치되어 있어야 합니다. Node가 있으면 npx로 직접 Reactify-django를 실행할 수 있습니다.
npx 반응-장고

명령 개요
CLI에는 두 가지 기본 명령이 있습니다.

init React가 포함된 새로운 Django 프로젝트를 설정합니다.
add 기존 Django 프로젝트에 React를 추가합니다.

2. React를 사용하여 새 Django 프로젝트 설정

처음부터 시작하려면 init 명령을 사용하여 React로 구성된 새 Django 프로젝트를 생성하세요.

1. 명령 실행:

npx 반응-장고 초기화

2. 설정 프롬프트에 응답하십시오:
다음을 제공하라는 요청을 받게 됩니다:

프로젝트 이름: Django 프로젝트의 이름입니다.
앱 이름: React가 통합될 Django 앱의 이름입니다.
선택적 설정: 추가 도구 및 스타일링 기능을 위해 프로젝트에서 TypeScript 및/또는 Tailwind CSS를 사용할지 여부를 선택하세요.

3. 파일 생성 및 구성:

CLI는 Django 프로젝트 파일을 설정하고, React 번들링을 위한 Webpack을 구성하고, 선택한 경우 TypeScript 및/또는 Tailwind에 필요한 종속성을 추가합니다. views.index를 사용하여 루트 URL에 매핑된 React의 시작점으로 template/your_app_name/index.html 파일을 자동으로 생성합니다.

사용 예:

npx Reactify-django init -c ./my-new-project

원하는 프로젝트 폴더에서 실행하지 않는 경우 -c(또는 --cwd) 플래그를 사용하여 대상 디렉터리를 지정할 수 있습니다.

URL 구성에 대한 참고 사항:
기본적으로, Reactify-django의 init 명령은 Django 앱을 루트 URL("")에 매핑합니다. 이 구성은 다음과 같이 URL에 앱별 접두사를 사용하도록 제안하는 Django의 일반적인 권장 사항과 약간 다릅니다.

from django.urls import include, path

urlpatterns = [
    path("your_app_name/", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

로그인 후 복사

그러나 단순화를 위해 생성된 설정에는 루트 수준에서 직접 앱의 URL이 포함됩니다.

from django.urls import include, path

urlpatterns = [
    path("", include("your_app_name.urls")),
    path("admin/", admin.site.urls),
]

로그인 후 복사

이 접근 방식은 단일 페이지 애플리케이션에 대한 깔끔한 기본 수준의 진입점을 제공합니다. Django 규칙을 따르거나 여러 Django 앱을 사용하려는 경우 앱 이름 접두사를 포함하도록 수정할 수 있습니다.

3. 기존 Django 프로젝트에 React 통합

이미 Django 프로젝트가 있는 경우 add 명령을 사용하여 기존 Django 앱 내에서 React를 설정할 수 있습니다.

1. 앱 디렉토리로 이동하세요:

cd 경로/to/your-django-app

2. 명령 실행:

npx 반응-장고 추가

3. 추가 옵션 선택:

React 설정을 필요에 맞게 조정할 수 있도록 TypeScript 및 Tailwind 구성을 묻는 메시지가 표시됩니다.
이 명령은 앱 디렉터리에 webpack.config.js를 생성하고 JavaScript 번들을 static/your_app_name/js/에 Bundle.js로 배치합니다. 템플릿에 React를 포함하려면 다음과 같이 이 번들을 로드할 수 있습니다.

{% 정적 로드 %}
<div>



<p><strong>사용 예:</strong></p>

<p>npx Reactify-django add -c ./path/to/app</p>

<h2>
  
  
  4. 프로젝트 실행 및 빌드
</h2>

<p>설정이 완료되면 즉시 개발을 시작할 수 있습니다.</p>

로그인 후 복사

개발 모드

1. Webpack 개발 서버 시작:
Django 앱 디렉터리(package.json이 있는 위치)에서 다음을 실행합니다.

npm 시작

이렇게 하면 저장할 때마다 React 코드를 번들로 묶어 Django 정적 폴더에 출력하는 Webpack 개발 서버가 시작됩니다.

2. Django 개발 서버 실행:
별도의 터미널 세션에서 다음을 사용하여 Django 서버를 시작합니다.

pythonmanage.py runserver

이제 Django 개발 서버에서 React 앱에 액세스하여 서버측 및 클라이언트측 개발을 동시에 수행할 수 있습니다.

프로덕션 빌드

배포할 준비가 되면 Django 앱 디렉토리로 이동하여 다음을 실행하세요.

npm 실행 빌드

이렇게 하면 프로덕션용 React 앱이 번들로 제공되어 Django가 제공할 static/ 디렉터리에 최적화된 JavaScript가 배치됩니다.

5. 설정 맞춤설정

reactify-django를 실행한 후 구성 파일(예: webpack.config.js 및 Django 설정)을 미세 조정에 사용할 수 있습니다. 이러한 유연성 덕분에 프로젝트 요구 사항에 더 잘 맞게 설정을 조정할 수 있습니다.

결론

reactify-django CLI는 새로 시작하든 기존 앱에 React를 추가하든 관계없이 Django 프로젝트에 React를 추가하는 프로세스를 단순화합니다. Django의 강력한 백엔드와 React의 프런트엔드 유연성을 결합하면 강력하고 기능이 풍부한 모놀리식 애플리케이션을 만들 수 있습니다.
사용해 보려면 npx Reactify-django를 사용하여 CLI를 설치하고 개발 프로세스를 간소화할 수 있는 방법을 살펴보세요. Django와 React의 장점을 모두 활용하여 코딩을 즐겨보세요!

이 도구가 귀하의 프로젝트에 도움이 되기를 바랍니다. 이 프로젝트는 GitHub에서 찾을 수 있습니다. 문제가 있으면 언제든지 기여하거나 보고해 주세요!

위 내용은 Reactify-django CLI를 사용하여 React를 Django에 원활하게 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!