Как верстать с использованием ReactJS?

Question

[iostream90]

Здравствуйте,
Долгое время занимался класической версткой (10 статических html-страничек, шаблонизатор, препроцессор, простыня в custom.js)

Решил использовать React, и первая же проблема с которой столкнулся, все документации/видео сводятся к:

• нам понадобиться один html документ в котором будет только один блок, а так же один js файл в котором мы напишем прекрасное SPA c тысячей строк html разметки в js файле и выплюнем это все в единственный тег нашего html документа
  
• сделаем многостарничное приложение заюзав роутинг и дописав в наш js файл еще тысячу строк
  

Обясните пожалуйста, если мне нужно подготовить 3 темплейта (условно: главная, контакты, о нас).

1. Я их создаю, и в кадом из них содержится по одному тегу. Ну или статическая информация (которую нет смысла пропускать через js), а так же теги с id (везде используется один, но я так понимаю можн осколько угодно) в которые мы выплюнем интерактивные елементы через render.
   
2. В каждый из этих html документов подключается app.js в который импортим, к примеру, 3 модуля (выше упомянутых страниц).
   
3. B каждом из этих модулей описываем необходимые классы и через ReactDOM.render отрисовываем их по нужным айдишникам в нашем темплейте.
   

Как-то так?
Буду признателен если кто-то скорректирует мое видение этого процесса, или поделится уроками где рассматривается более обширная архитекутра чем в туториалах по SPA.

Тут же вопрос.
Для ситуации когда нужно отрендерить два компонента в разных местах страницы нам же не дублировать ReactDOM.render

ReactDOM.render( <Content/> ,
  document.getElementById('root')
);
ReactDOM.render( <Footer/> ,
  document.getElementById('footer')
);

Этот кусок кода можно компактней написать?

Comments

[copal]

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

Answer 1

[Андрей]

Суть React заключается в том, что его архитектура базируется на компонентах. Как в лего, все собирается из кирпичиков.

Далее компонент самого верхнего уровня рендерится в некоторый элемент на странице. Разные компоненты можно отрендерить в разные элементы, никто этого не запрещает.

Так же надо отчетливо понимать, что философия React - генерировать разметку динамически при изменении стейта (состояния). Классически стейт хранится локально в каждом компоненте, однако зачастую это неудобно, поэтому придумали Flux, одной из инкарнаций которого является, в некотором приближении, Redux - некое централизованное хранилище стейта, с плюшками и балеринами.

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

Answer 2

[Константин Франк]

>> или статическая информация (которую нет смысла пропускать через js)
Для таких ситуация обычно создается компонент <StaticInformation page="page1" />, в котором, к примеру, с помощью componentDidMount() заполняется div информацией, полученной с помощью post/get запроса.

>> уроками где рассматривается более обширная архитектура чем в туториалах по SPA
https://www.youtube.com/watch?v=MhkGQAoc7bc&list=P... - самые адекватные уроки

>> Для ситуации когда нужно отрендерить два компонента в разных местах страницы
Изначально создается родительский компонент App extends React.Component (к примеру), в котором в методе render имеем:

<section>
   <Header />
   <Content />
   <Footer />
</section>

Подключаем import Header from ... и далее работает с каждым компонентом отдельно.

Сам всегда использую react-router, так как он вполне подходит и для многостраничных сайтов (тык). Перебрасываем пользователя на index.html при любом запросе и обрабатываем все уже внутри приложения. Для пользователя разницы никакой.

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

Answer 3

[Владимир Т.]

Реакт нужен для разработки SPA-приложений. Для вашего случая с тремя страницами он не нужен. Не тратьте зря время.

Comments

[Ильдар В]

Зря вы так. Многостраничные приложения на реакте тоже удобно разрабатывать