Создание потрясающих SPA с реагированием

Автор оригинала: Aman Khalid.

Я помню, когда я начал строить WebApps, я привык сильно полагаться на оснований Backend для большинства моих потребностей шаблонов. Это чувствовало себя очень заманчиво (сначала) просто наполнить свои страницы с помощью сценариев Jinja или Blade, чтобы создать функциональный пользовательский интерфейс. Потому что тогда мое понимание MVC было очень ограничено, это стоило мне ремонтопригодность кода.

Я наткнулся на очень интересную книгу, которая обсуждает лучшие практики создания приложений для одной страницы, вы можете найти его здесь Отказ Слой вид, который я считал простой побочным продуктом моей основной логики, нужен гораздо больше, его собственные MVC! Правила в значительной степени одинаковы. Но следует помнить, что сложность модели, вида и контроллера зависит от требований. Для интерфейсов, таких как действия GitHub на странице, сравнительно ниже, чем у Gmail или Canva, управление вызовыми звонками на сервер отличается для приложений с низкой интерактивностью, чем те, которые с богатыми UIS. Поэтому важно быть знакомым с дизайном заранее, эта философия способствует развитию в реакции, потому что реагирование побуждает вас подумать о ваших элементах DOM в качестве отдельных компонентов.

Без дальнейшего ADO давайте обсудим, как файлы расположены в нашем приложении.

Составляющие

Давайте обсудим различные аспекты SPA и сломайте их. Давайте посмотрим, что они сначала, мы проводят их в следующем разделе.

Слой данных

Модели в спа-салоне, как и другие приложения, обрабатывает слой данных проекта, он отвечает за создание API, вызывает данные и использует ответ JSON на заполнение моделей, поскольку React не имеет официального способа определения моделей, я решил использовать Backbonejs за это. Это также потратило мне неприятности определения моего собственного DataSource Отказ

В Backbonejs есть два класса для эффективного управления данными, моделью и классом сбора.

Модель

Модели – это абсолютное представление данных в Backbonejs. Ниже приведен фрагмент базовой модели.

import Backbone from 'backbone';

const Property = Backbone.Model.extend({
    urlRoot : Constants.api_url+'/api/property'
    
export default Property;
});

Это код внутри Property.js Файл, который является позвоночником Модель , мы можем настроить свои свойства для настройки валидаторов, установить значения по умолчанию и т. Д. Но самое главное, мы будем использовать его для получения данных с наших API. Наша модель будет получать данные с запросом JQXHR, все, что нам нужно сделать, это указать действительный URL для нашего API.

Коллекции

Коллекции используются для управления наборами моделей. Модель просто представляет собой единое сущность этого типа данных, что если ваш API возвращает список свойств?

import Backbone from 'backbone';
import Property from '../models/Property';
var PropertyCollection = Backbone.Collection.extend({
    model: Property,
    initialize: function(models, options) {
        this.data = options.data;
    },
    url: function(){
        return Constants.api_url;
    },
    parse: function(data) {
        return data;
    }
});

export default PropertyCollection;

Код выше проживает в PropertyCollection.js, как вы можете видеть, мы инициализировали свойство «Модель» с Недвижимость Модель мы объявили ранее. Если ваш отдых API следует надлежащими конвенциями автоматически Настраивает Запросы творога, вы можете просто использовать .Create () .fetch () и .destroy () методы.

Просмотр + контроллер

Для тех из вас интересно, почему я сменял этих двух вместе, у меня есть вопрос. Какова окончательная цель спа? Доставить пользовательский интерфейс! Это просто более сложный слой просмотра в конце концов. Наличие отдельных контроллеров имеет смысл, если вы выполняете некоторые расчеты на основе тяжелых клиентов. Но для большинства приложений единственная забота состоит в том, чтобы доставить бесшовный интерфейс, а для решения этой цели представления делают тяжелый подъем! Читать это из-за вашего сознания.

В случае реагирования, однако, устранение контроллеров делает еще больше смысла, потому что каждый компонент имеет свой собственный рендеринг и методы жизненного цикла. Что в значительной степени покрывает все расчеты, которые вам нужны.

Прежде чем начать писать свои представления, вы должны проанализировать дизайн приложения для вашего конечного пользователя. Приятно посмотрите на конструкции страниц, которые вы будете служить и внимательно соблюдать иерархию. Посмотрите на этот пример, например.

Каркас для гипотетического приложения

Предположим, что это страница для приложения, которую вы пытаетесь построить. На верхнем уровне у вас есть Тело , который инкапсулирует все, что вы хотите отобразить. Это будет ваш первый реактивный компонент. Затем создайте компоненты ребенка один за другим в отдельном файле.

import React from 'react';
import Header from '../widgets/Header';
import Title from '../widgets/Title';
import Footer from '../widgets/Footer';
import PropertyDetail from '../widgets/PropertyDetail'
const SinglePage = ({match}) => {
    return(
    

    

    
    
    
     
    )
}
export default SinglePage;

Это топный компонент, такой как Тело нашего каркаса из приложения я сделал Заголовок , Название , PropertyDetail и Нижний колонтитул У всех детей верхних уровней обертки. Даже недвижимость есть дети собственного так далее.

Все компоненты верхнего уровня позже служат независимыми страницами приложения

Теперь давайте немного поговорим о каркасе. Хотя мы знаем, что Тело Может быть страница нашего приложения, но то же самое нельзя сказать для Избранный контент или Сообщения, Вместо этого они будут виджеты нашего приложения, в большинстве Caes виджеты будут использоваться моделей, которые мы обсуждали ранее.

Маршруты

Теперь для маршрутизации мы будем использовать маршрутизатор RACT, который большинство из вас, должно быть, слышал о. Но прежде чем это давайте немного обсудим URL. URL в SPA – это обозначение конкретного состояния приложения, то есть вместе с маршрутом и параметрами приложение может быть загружено в желаемое состояние. В интерактивном спа-салоне очень нормально иметь несколько государств на странице, вы бы хотели получить доступность как множество состояний ваших приложений через URL-адреса, но это означало бы грязные схемы URL, поэтому все возможное, чтобы сбалансировать оба.

Чтобы сделать чистые URL, я решил сохранить их в отдельном файле (и не использовать Динамические URL-адреса 😄), чтобы получить знакомое ощущение MVC. Маршруты, определенные с использованием React Router – это только теги JSX, а компоненты передаются им как реквизиты.

Здесь Listpage и Одикал Являются ли мой верхний уровень реагирования. Также обратите внимание, что вы должны обернуть несколько URL-адресов с

Проводка вверх

Хорошо, мы знаем, что представляет собой потрясающий спа, пришло время поставить кусочки вместе. Во-первых, генерировать проект, использующий Create-React-App Найдено в репозитории инкубатора Facebook, он очень полезен для настройки начального проекта, и все современные инструменты веб-разработки управляются для вас, поэтому вы можете сосредоточиться на написании приложения, а не настроить веб-папак (который, кстати, заслуживает отдельную статью объяснять). Так как вы будете писать модульный код, было бы намного проще написать тесты, приложение Create-React-App использует Jest для беговых испытаний.

После создания приложения будет выглядеть структура вашей папки.

my-app/
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js

Попробуйте работает NPM начать Если все в порядке, ваше приложение должно быть доступно на 3000 портов. Также не забудьте поставить весь код в SRC Справочник, что-либо за пределы этой папки не доступна, это ограничение, наложенное генератором Create-React-App.

Переходные материалы

Давайте сталкиваемся с этим, никто из этих мечтаний о создании спа-салона не будет осуществить с текущим состоянием рабочего каталога. Кроме index.js и RegisterServiceWorker.js Мы переместим все в новый каталог. Прежде чем прикасаться к тому, что создайте эту структуру каталогов. Пусть сценарии остаются там, где они есть.

my-app/
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── js
│   └── manifest.json
├── README.md
└── src
    ├── assets #All the media/styles/fonts/helper_functions:p
    │   ├── objects
    │   └── styles
    ├── components #controller+view Layer
    │   ├── pages #top-level pages
    │   └── widgets #children
    ├── data #Data Layer
    │   ├── collections #Backbone.Collection
    │   └── models #Backbone.Model
    ├── routes #React router routes
    ├── App.css #unruly mess
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js #end unruly mess

AppFlowChart.sucks

Первые вещи впервые создают это (не обязательно в этом порядке)

• Создайте простой реагирующий компонент в /SRC/Компоненты/Страницы Назовите это Home.js.
• Создать URLS.JS в /src/urls и создать маршрут, указывающий на домашний объект <Маршрут Точный компонент = {home}/> Отказ Это сделает содержимое Home.js При доступе к корню домена.
• Изменить линию рендеринга в index.js к Reactom.runder (, документ. GtectelementbyId («root»));

При этом убедитесь, что каждый файл JavaScript экспортирует только одно и обеспечивает правильное использование оператора импорта.

Еще одна вещь, которую следует отметить, – это страницы Rection на верхнем уровне не могут быть классоми React, поскольку React Router пропускает параметры в URL-адресах, которые передаются в качестве параметров, а не реквизиты!

Хотя рекомендуется сделать ваши виджеты в качестве классов, которые расширяют React.comPonent. Теперь вы можете использовать ваши модели, чтобы пройти данные в ваши виджеты или инициализировать их Государство Отказ

Наконец, когда вы готовы развернуть приложение, запустите NPM запустить сборку Это будет объединять все ваши активы, установить реагирование на режим производства и сохранить упакованный проект для создания каталога проекта. Теперь вы готовы развернуть ваше приложение!

Как очаровательное заметку.