2016년 11월 24일 목요일

Django에서 React 설정 | React with Django

pip and npm packages

$ pip install django_compressor PyReact
$ npm install -g babel-cli

[project]/settings.py

...
INSTALLED_APPS = (
    ...
    'compressor',
    ...
)
...
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
)

COMPRESS_ROOT = os.path.join(BASE_DIR, 'static')
COMPRESS_PRECOMPILERS = (
    ...
    ('text/jsx', 'third_party.react_compressor.ReactFilter'),
    ...
)

third_party/__init__.py

(empty)

third_party/react_compressor.py

from compressor.filters import FilterBase
from react import jsx


class ReactFilter(FilterBase):
    def __init__(self, content, *args, **kwargs):
        self.content = content
        kwargs.pop('filter_type')
        super(ReactFilter, self).__init__(content, *args, **kwargs)

    def input(self, **kwargs):
        return jsx.transform_string(self.content)

[project]/urls.py

...
from django.conf.urls.static import static
...
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

static/jsx/main.jsx

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('container'))

How to use in templates

{% load staticfiles compress %}
<!DOCTYPE>
<html>
<head>
    ...
    <script src='//fb.me/react-15.0.1.js'></script>
    <script src='//fb.me/react-dom-15.0.1.js'></script>
    ...
</head>
<body>
    ...
    <div id='container'></div>
    ...
    {% compress js %}
    <script src='{% static "jsx/main.jsx" %}' type='text/jsx'></script>
    {% endcompress %}
</body>

Read More

댓글 없음:

댓글 쓰기