2015-03-03 3 views
3

У меня alreayd построил несколько страниц моего приложения. Поскольку мне нужна инфраструктура javascript и второстепенные динамические страницы, я думаю, что попробую React/Flux.Должен ли я воссоздать всю мою страницу с нуля (html и css), если я начну использовать React/flux?

Дело в том, что, несмотря на многое, я не совсем понимаю, могу ли вы сохранить свою СУЩЕСТВУЮЩУЮ кодовую базу (html/js) и использовать только React (jsx, modules) на определенных блоках веб-страницы, которым необходимо взаимодействие с базой данных/динамическая актуализация?

Приведем пример: На моей странице много чего: bootstrap Я скорректировал многое (с помощью css), которое на самом деле используется за сценой javascript/DOM ex для выпадающих списков и других вещей), reply.js для включения мультимедийных запросов на ie8 (используя, я полагаю, DOM), и многих сторонних инструментов, таких как intercom.io или даже google analytics js tracking window в нижней части экрана. Вы можете видеть, как выглядят страницы.

enter image description here

Моя потребность: Мне просто нужно динамические настройки и реальные возможности времени на блоке (D), все остальные, заголовок (B), интерком (C), а остальные могли бы остаться, как они , это сэкономит мне много времени, если я смогу сохранить их в своем текущем html-коде.

Так вот мой вопрос:

  • (1) я должен конвертировать все на странице на реакцию или только положить в JSX/реагировать блок (D) и держать все остальное, как это ?

  • Относится к (1) Я хочу использовать главное преимущество, которое было принесено React (виртуальный DOM и diff), мог ли я использовать его EVEN, если вся страница не на React?

  • Если ответ в основном «это все или ничего, вы должны сделать это ВСЕ, чтобы реагировать на jsx и переделать всю свою страницу», конвертировать ваш html и находить альтернативы всем вашим js-скриптам, использующим DOM как выпадающие меню, световые короба, скрипт intercom.io, скрипты Google Analytics, трудно ли это? Я имею в виду или могу сохранить css и просто использовать это, чтобы изменить html http://facebook.github.io/react/html-jsx.html? это было бы очень легко, но я боюсь, что есть улов здесь ... :)

ответ

1

С точки зрения просмотра слоя вашего приложения все может быть сделано с React (Да реагировать может делать все, что требуется)

Первое, что я хотел бы предложить, чтобы направиться к месту среагировать для docs, сделайте несколько руководств, используйте Google & YouTube, а затем заново создайте приложение из свежих с помощью реакции , но не полностью. (Используйте JSX).

Поскольку вы теперь понимаете, как работает React и как использовать реквизиты и состояния, вы, вероятно, в конечном итоге объедините фрагменты своего приложения за раз.

Самое важное, что нужно учитывать, это контекст. Реакция - это просто Javascript, чтобы вы могли привязывать, вызывать и применять любые объекты из вашего существующего приложения.

var blockA = React.createClass~ 
    blockB = React.createClass~ 
    blockC = React.createClass~ 
    blockD = React.createClass~ 

Реакция - это всего лишь компоненты, каждый блок является компонентом.

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

Edit ...

ДА использовать JSX я думал, что это было глупо изначально, но это отлично!

С манипуляциями DOM это все или ничего. React использует свою копию DOM для более эффективного управления фактической DOM. Для частей вашего кода, который не касается DOM, он не будет иметь большого значения в React, но у React есть красивый рабочий процесс, передав изменения состояния дочерним компонентам. На самом деле это зависит от вас, но если вы используете React, все вещи DOM реагируют. 70% того, что вы пытаетесь сделать, вероятно, манипулируют DOM.

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

+0

вещь я потратил много времени на мои текущие страницы html/css3..so я знаю, я МОГУ все это сделать на React, но я не хочу (если смогу) :) Я хочу знать, если я получаю преимущество скорости/реального времени реакции, даже если я использую только action/jsx/addons на блоке D (и оставляю в покое мой заголовок, окно моего чата intercom.io и т. д.) – Mathieu

+0

, но конечно, я потрачу время, чтобы понять и узнать, что у них действительно есть React – Mathieu

+0

Да, вы получите преимущество по скорости, но только на blockD. Все, что использует $ ('elem') или document.getElementById ('elem') или подобное, будет не быстрее. Вы можете попробовать один блок за раз и оттуда. – Undefined

1

Я новичок в Реагировать, но от того, что я собрал, вы можете посыпать в React код по желанию. Вам не нужно переписывать все ваше приложение. Это включает в себя возможность использовать функции, которые вы описали там, где они вам нужны.