Как верстают сайты на React и Next?

Question

[student985]

Скажите пожалуйста, если я делаю сайт на React.js или Next.js.
Верстка делается сразу в React компонентах ? Или вначале делается классическая верстка, а потом переносится в React? И второй вопрос если сайт на React, там все должно быть на React или допускается сделать некоторые элементы на нативном Js без React?

Answer 1

[Вадим]

Верстка делается сразу в React компонентах ? Или вначале делается классическая верстка, а потом переносится в React?

Как Вам удобнее.
Можно заказать вёрстку на аутсорсе, а потом перевести на реакт. А можно сразу верстать на реакт компонентах.

Если я делаю какой-то сложный с точки зрения вёрстки компонента - я сначала просто верстаю его на чистом HTML, потом декомпозирую на подкомпоненты, если это имеет место быть, а потом накидываю реактивность и логику условного рендеринга. Я считаю, так компонент получается качественнее, с точки зрения вёрстки.

если сайт на React, там все должно быть на React или допускается сделать некоторые элементы на нативном Js

Реакт по своей природе - библиотека, которая может быть добавлена на любой сайт.
Что означает, что у вас может быть 90% статичной вёрстки и 10% на реакте(какие то виджиты, отдельные блоки или сложные формы).
И наоборот.
Как и 100% на реакте.

Answer 2

[Ivan Ivanovich]

1.Верстка делается сразу в React компонентах? Или вначале делается классическая верстка, а потом переносится в React?
Если проект разрабатывается с нуля, верстка сразу-же делается в компонентах. Если на React переносится уже готовый проект, классическую верстку делят на компоненты и просто переносят.

2. Если сайт на React, там все должно быть на React или допускается сделать некоторые элементы на нативном Js?
React использует концепцию virtual dom, поэтому нативные js элементы (const div = createElement('div')) не допускаются. Но есть похожий способ создания элементов без синтаксиса jsx (https://ru.reactjs.org/docs/react-without-jsx.html). Если React встраивается на уже готовый сайт частично, то часть сайта может быть спокойно на нативном JS, а другая на React.