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

Здравствуйте,
Долгое время занимался класической версткой (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')
);

Этот кусок кода можно компактней написать?
  • Вопрос задан
  • 17429 просмотров
Пригласить эксперта
Ответы на вопрос 3
iCoderXXI
@iCoderXXI
React.JS/FrontEnd engineer
Суть React заключается в том, что его архитектура базируется на компонентах. Как в лего, все собирается из кирпичиков.

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

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

Насколько мне известно, React не навязывает никаких парадигм и прекрасно совместно уживается на одной странице с чем угодно, так-что, в принципе, отреактить можно только самое необходимое, а остальное запилить по старинке...
Ответ написан
Комментировать
kostya-frank
@kostya-frank
Системный администратор
>> или статическая информация (которую нет смысла пропускать через 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 страницы, подключив по куче модулей, как Вы и сказали, но данный вариант обычно не используется.
Ответ написан
Комментировать
Реакт нужен для разработки SPA-приложений. Для вашего случая с тремя страницами он не нужен. Не тратьте зря время.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы