В тази статия ще разгледаме няколко теми с минимален набор от знания, необходими за да започнете създаването на молба:

Преди да започнем

За да се разбере какво ясно реагират, искам да предлагат тази опция:

Тя включва концепцията за разделяне на компоненти на потребителския интерфейс, обособени части, които са лесни за поддържане, разширяване, и отново се прилага.

Реагират можем, а се използват за изграждане на елементи в браузъра и от страна на сървъра, че е последната HTML ще се формира не на клиента и на сървъра, което ви позволява да се изгради т.нар изоморфно + приложение ви позволява да се избегнат проблеми с SEO присъщ на цяла страница приложения. Но това не е всичко, с помощта Реагират да създадете стандартни мобилни интерфейси (реагират Native).

Преди появата на Аякс за всеки потребител действия за показване на новите данни рестартира цялата уеб страница. Това не беше твърде ефективно решение, когато само част от данните, които ще бъдат актуализирани. С появата на Аякс може да актуализира данните на страницата. Там са били така наречените молба на една страница, когато е натоварена само една страница и всички следващи заявки се обработват без пълно презареждане.

Тъй като интерфейси са все по-сложни, увеличаване на сложността на управление на данни и състояние приложение. Много библиотеки използват двупосочни данни, свързващи се с интерфейс, както и манипулиране на DOM дървото директно. Но този подход не достига на скоростта.

Реактивен оказване на лесни за използване от задължителни традиционните данни. Тя ви позволява да ни пишете в декларативен стил, тъй като компонентите трябва да изглеждат и да се държат. Това няма да се промени на DOM дървото, когато данните се променят в реагират има лек копие на дървото DOM, който съдържа текущото състояние. Ако промените данните във виртуалната DOM дървото да премине реагира сравнение с реалния DOM и промени стават само когато това е наистина необходимо. Това, което прави реагират много бързо и ефективно.

В реагират включва всички компоненти, които са самодостатъчни градивни елементи. Всичко това красота цели прилагането на принципа на "разделяй и владей", в която нито една част не трябва да бъде особено трудно. От по-малки компоненти, можете лесно да създавате по-сложни и богати на функции компоненти.

Гъвкав модел абстрактен документ

Реагират има своя собствена гледна точка на потребителския интерфейс, който извлича базовия модел на документа. Най-значимият Предимството на този подход е, че тя позволява да се използват едни и същи принципи, за да направи HTML, така че например местни и персонализирани IOS и Android интерфейси. И това ви осигурява следните предимства:

Събития държат в съответствие с начина, по който стандарти във всички браузъри и устройства;

Общо HTML реагират компоненти могат да бъдат изградени от страна на сървъра, което ви позволява да се избегнат проблеми с SEO и изграждане на изоморфни приложения;

Hello World да реагира

Hello World Реагират

Реагират - работния процес

Работният процес изглежда така:

След написването JSX трябва да бъде автоматично превръща в JS

Напиши код под формата на модули

За да можете да управлявате зависимости

Създаване на JS файлове и карта файлове за отстраняване на грешки

Реагират основната структура на проекта включва:

източник на папка, която съдържа всички модули JS на

package.json - е стандартен файл NPM манифест

Модули за изграждане на проекта, който ще ви помогне с trasformatsiey JSX в JS. Използването на модулите позволява да организирате код като я разделя на няколко файла, всеки от които декларира собствените си зависимости. Такова множество модули. Rect общност прие WebPACK, като предпочитаното средство за решаване на тези проблеми.

Не забравяйте да изпълнява команди

Създаване на първия компонент

Приложение Kanban Board

В този урок ще създадем инструмент за управление на проекти в Kanban стил. Заявлението е дъска разделена на областта за текущото състояние на задачите. Когато промените състоянието на дадена задача се премества в нова област със съответния статут.

Последният ни проект ще изглежда като на снимката по-долу

Йерархията на компонентите в бъдеще нашата молба

Принципите на разделяне на компоненти:

• Не забравяйте, че компоненти трябва да са малки и имат една сфера на отговорност. С други думи, компонентите в идеалния случай трябва да направя само едно нещо. Ако компонентът разширява тя трябва да се раздели на по-малки компоненти.
• Анализиране оформлението на проекта, той ще ви даде съвети за това как неговите компоненти могат да бъдат разделени.
• Обърнете внимание на модела на данни. Опитайте се да пробие в компоненти, така че един компонент е фиксирана една част от вашия модел на данните.

Ако използвате тези препоръки след това най-вероятно ще стигнете до компонентите на състава, показани на фигурата по-долу.

Imprint е ключов компонент в състава. Те са един механизъм, който да реагира за да прехвърляте данни от родител на дете. детайли стойности не могат да бъдат променяни от дъщерното компонент вътре, които са изпратени.

Създаване на компоненти
След като по компоненти на йерархията, че е време да ги създават. Има два очевидни подходи за изграждане на компонента: отгоре-надолу или отдолу-нагоре. За да получите представа за всички реквизити (реквизит), използвани в компонентите на деца, че има смисъл да започнете изграждането на собствените си компоненти от горе до долу.
В допълнение, за да направи по-лесно да подкрепят нашия проект, ние ще създадем за всеки компонент собствен JS файл.

На този етап pp.js преписката ще бъдат много прости. Той ще съдържа само данните, предавани по йерархията на компоненти. Самите данни ще се съхраняват в локална променлива, но за в бъдеще ние ще поправим това и данните ще текат през API на сървъра.