Часть 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 этого руководства.