Django를 사용한 React JS - 실제 사용

Django를 사용한 React JS - 실제 사용

나는 리액트와 장난을 쳤는데 꽤 마음에 든다.이것은 Angular보다 훨씬 상세하지만(| 필터가 있는 ng-repeat은 값을 매길 수 없습니다) OK.

귀찮은 건 리액트 with 장고 템플릿을 어떻게 사용해야 하는지입니다."HTML" 마크업과 함께 javascript를 모두 템플릿에 넣어야 합니까?

Angular 구현은 매우 원활했습니다.template/django 폼클래스에 몇 가지 속성을 넣고 javascript를 별도의 파일로 작성했습니다.그 파일을 포함하면 끝입니다.

'사용' 대응 방법올바른 방법은 무엇일까요?

잘 부탁드립니다!

Django 템플릿과 함께 React를 사용하고 싶기 때문에 React 코드는 페이지의 특정 부분에만 영향을 줄 것입니다.그 전제에 근거해 이하의 설명이 작성된다.

우선 JS 코드를 모두 템플릿에 넣을 필요는 없습니다.사실, 그렇게 되면 혼란이 생깁니다.

웹 팩을 사용하여 별도의 JS 기반 빌드 프로세스를 생성할 수 있습니다(이 방법을 참조하십시오).이것에 의해, 클라이언트측 코드의 기능이 강화되어 Common을 사용할 수 있게 됩니다.브라우저의 JS 모듈. 리액트를 포함하여 npm에서 직접 꺼낼 수 있습니다.

웹 팩은 및 웹번들을 생성합니다.이 번들은 합니다.장고.<script>태그를 지정합니다.

, 그럼 이제 '나', '나', '나'를 만들어야 돼요.React.render()호출하여 기존 페이지 레이아웃의 어딘가에 React 애플리케이션을 렌더링합니다.특정 ID/클래스 이름을 가진 빈 HTML 요소를 응용 프로그램의 마운트 지점으로 사용해야 합니다.

단, 여기서 주의해야 할 점은 Common에 접속할 수 없다는 것입니다.브라우저 또는 Django 템플릿에서 직접 JS 모듈.그러니까 너나

• React을 ★★★★★★★★★★★★★★★★★★★★★★★★★★에window 또는 object,
• 하여 앱 이 을 앱 초기화를 처리하는 데 합니다.window★★★★★★ 。

어떤 경우든 템플릿에서 직접 초기화 코드를 호출해야 합니다(글루 코드의 예와 앱 초기화 호출을 참조하십시오).

이 초기화 단계에서는 Django 템플릿에서 사용 가능한 변수를 JS 코드로 전달할 수도 있습니다.

최종 Django 템플릿은 다음과 같습니다.

{% load staticfiles %}
{% extends 'base.html' %}

{% block scripts %}
<script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
<script type="text/javascript">
  // Initialization glue code
  window.MyApp.init({el: '.app-mountpoint'});
</script>
{% endblock %}

{% block content %}
<!-- Your template contents -->

<!-- The mount point of your app -->
<div class="app-mountpoint" />
{% endblock %}

그리고 글루 코드:

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

처음에는 이 모든 것이 압도적으로 들릴 수 있다는 것을 알지만(Angular와 함께 했던 몇 가지 단계와 비교하면 훨씬 더) 장기적으로 보면 효과가 있을 것입니다.

요약:

1. 개별 JS 파일에 리액트 코드 쓰기
2. 웹 팩 사용(공통 활용)JS 모듈)를 통해 React 코드를 번들합니다.
3. Django 템플릿에 번들 포함
4. Django 템플릿의 글루 코드를 사용하여 리액트 코드를 렌더링합니다.

프런트엔드와 백엔드를 서로 다른 독립된 2개의 엔티티로 간주하면 어떨까요?제 말은 다음과 같습니다.

1. Django는 API일 뿐이고 json 데이터로 응답해야 합니다.
2. 프런트 엔드는 nginx에서 제공하는 정적 파일만 사용해야 합니다.
3. 당신은 두 사람 사이의 통신을 허용하기 위해 CORS와 거래해야 할 수도 있습니다.하나는 프런트엔드에서 비행 전 요청을 허용하는 것이고 다른 하나는 nginx 프록시를 설정하는 것입니다.이것은 별개의 문제이기 때문에, 상세한 것에 대하여는, 검색해 주세요.

이 아키텍처를 통해 통합을 처리하지 않고 모든 것을 분리할 수 있다고 생각합니다.프런트 엔드/리액트 생태계는 이미 너무 복잡하기 때문에 구성의 단순성을 고려해야 한다고 생각합니다.

또, 도입 프로세스에서 이 아키텍처(어떤 툴을 사용할지)에 대해서도 알고 싶기 때문에, 코멘트를 추가해 주세요.또, 향후의 독자에게 도움이 되는 정보를 제공할 수 있도록, 코멘트를 주세요.

저는 당신이 요구하는 것과 비슷한 것을 실행했습니다.내 프런트 엔드는 웹 팩을 사용하여 컴파일된 reactjs에 전적으로 적용되며 템플릿은 django로 작성됩니다.

그래서 나는 다음과 같이 한다.

1. react-router를 사용하여 .jsx/.js 코드를 만듭니다.
2. 웹 팩을 사용하여 컴파일합니다.
3. django-webpack 사용

따라서 django-webpack은 매우 잘 작동하며, django 이외의 컴파일을 분리하여 훌륭하고 확장 가능한 방식으로 작업하는 것을 생각할 수 있도록 도와줍니다.

언급URL : https://stackoverflow.com/questions/28610372/reactjs-with-django-real-usage