Часть 2: Установка React для вашего приложения Django
Это вторая часть серии руководств, в которых вы узнаете, как интегрировать React / Redux в существующее унаследованное веб-приложение Django от ES5. К настоящему времени у вас должен быть компилятор ES6, интегрированный в ваше приложение, чтобы вы могли писать самый современный и эффективный код JavaScript и JSX. Если вы еще этого не сделали, сначала прочтите Часть 1 этой серии.
Предполагая, что мы установили диспетчер пакетов, такой как npm
, мы можем начать с установки необходимых библиотек для использования React.
Альтернативой установке библиотек с помощью диспетчера пакетов было бы включение необходимых библиотек из CDN (сети доставки контента). CDN - это URL-адрес, который в основном гарантированно будет быстрым и доступным, то есть никогда не упадет. Следовательно, мы можем быть уверены, что если мы сделаем ссылку на размещенный там скрипт, наш сайт никогда не сломается из-за того, что этот сайт не работает. Кроме того, сети CDN могут предложить преимущество - всегда иметь последнюю версию библиотеки. Если вы решите использовать CDN, нам нужно будет добавить теги сценария в наш основной файл HTML-шаблона, чтобы сделать библиотеки доступными во всех наших сценариях внешнего интерфейса.
В этом руководстве я расскажу, как использовать npm
для установки React, а также приведу пример того, как убедиться, что React успешно работает в нашем приложении.
Установка
Важно, чтобы при запуске npm install
мы также включали --save-dev
. Это сохранит зависимость в разделеdevDependencies
нашего package.json, как вы можете видеть ниже:
... "devDependencies": { "react": "^16.2.0", "react-dom": "^16.2.0", }
Это позволяет другим разработчикам, использующим кодовую базу, просто запустить npm install
и установить все эти зависимости автоматически.
Установим необходимые библиотеки:
npm install babel-preset-react --save-dev npm install react --save-dev npm install react-dom --save-dev
Первая строка устанавливает компилятор JSX, чтобы наш JSX можно было превратить в код ES5, читаемый браузером; вторая и третья строки - это собственно библиотеки React.
Настраивать
Требуется еще один шаг, чтобы Babel плавно преобразовал весь наш код JSX в ES5. Добавьте файл с именем ‘.babelrc’ в наш корневой каталог со следующим содержимым:
{ "presets": ["react"] }
Пример использования
1. Начнем с написания компонента React, чтобы убедиться, что React работает. Мы создадим папку компонентов в нашем каталоге JavaScript и создадим новый файл с именем: greeter.jsx
Имейте в виду, что нам нужно будет импортировать React в каждый компонентный модуль, который мы создаем отсюда. (Если бы вместо этого мы загрузили React через CDN, он был бы доступен как глобальная переменная.)
… / webface / static / webface / js / components / greeter.jsx
import React from 'react'; const Greeter = function(props) { return <h1>Hello, {props.name}</h1>; } export default Greeter;
2. Теперь мы можем изменить скрипт hello.js из части 1, чтобы использовать новый компонент React.
… / webface / static / webface / js / scripts / hello.js
import ReactDOM from 'react-dom'; import Greeter from '../components/greeter.jsx'; ReactDOM.render( <Greeter name="Ann" />, document.getElementById('root') );
3. Мы должны изменить наш шаблон, чтобы предоставить ему корневой компонент, в котором будет отображаться компонент React:
… / webface / templates / webface / es6.html
{% load compress %} <!DOCTYPE html> <html> <head> <title>ES6 Test</title> </head> <body> <div id="root"></div> {% compress js %} <script type="module" src="/static/webface/js/scripts/hello.js"></script> {% endcompress %} </body> </html>
4. Наконец, мы можем запустить только что созданный простой пример React, используя: python manage.py runserver
Перейдя к localhost: 8000 / es6 / (или к любому другому порту, на котором может работать наш сервер), мы должны увидеть тег ‹h1› с приветствием Энн.
Теперь мы готовы использовать React в нашем приложении Django!
Если вы еще не совершили конверсию, React стал еще более элегантным и мощным с добавлением Redux. Не знаете, как использовать Redux в своем веб-приложении? Я настоятельно рекомендую вам это сделать, и я покажу вам, как легко установить и включить в часть 3 этого руководства.