Как используется React.js в плане разработки веб-сайта? (Какова его роль)?

Question

[ArsenBor66]

Здравствуйте. Подскажите как начинающему, вот я не пойму. Есть к примеру HTML + CSS которые отвечают за содержимое страницы, как еще говорят верстка, обычно пишут, что javascript используется для внедрения интерактивности в страницу и динамики. Вот поинтересовался реактом, который якобы сам создают компоненты, которые являются HTML элементами. Выходит, в таких случая верстка не нужна? Или всё таки как делают сайты с реактом? Или реакт для чего-то другого предназначен? Спасибо заранее.

Comments

[WapSter]

Компоненты лишь просто удобство внедрения кода, а сама роль реакта важная это взаимодействие с api сервера, последующего рендеринга на клиенте, упакованные все вместе для удобства разработки. Отсюда отличное разделение фронта от бекенда

[WapSter]

Артём Петренков, да не спорю, напрямую нет, но взаимодействует с данными, мне писать в комментах статью об axios и кучи других библиотек?

[WapSter]

Артём Петренков, я написал что имеет отношение? слушай просто отстань чувак.

[Антон Спирин]

Тимур Турсунбаев, для React приложения не обязательно наличие сервера. "Самая важная роль" у библиотеки несколько иная.

Answer 1

[Шохрух Шаймардонов]

Ответ очень грубый и для новичков (опытные разрабы меня оклюют за это но все же)

Реакт это фреймворк и соответственно задает некие правила разработки фронт части сайта.
Но если про то как он работает, то вкратце:
Вы создаете некий компонент в реакте, а он в свою очередь переводит этот самый компонент в тот же самый html код со стилями, и добавляет ему всякие js - интерактивности.
Сделан для удобства разработки сайтов (чтобы вы не писали сотни строк html, а потом потели и стилизовали это с помощью css, а + ко всему этому, еще и нужно с помощью js задавать какие-нибудь свойства вашему блоку(компоненту), к примеру чтобы при клике на кнопку у вас скрывался блок.

Что касательно компонентов в реакте, то напоминает классы в ООП. Т.е вы создаете класс(компонент) у него есть свойства и методы. В свойства класса(компонента) вы записываете значения, которые необходимы для построения из этого класса(компонента) уже обычного тега html и его стилизования, а методы класса(компонента) нужны чтобы отрисовать этот компонент и следить за его состоянием

Чтобы понять (если недоступно описал) то, что я описал ГРУБЫМ языком:
Статья на Хабре

Comments

[Шохрух Шаймардонов]

Артём Петренков, ну насчет этого я бы не стал спорить. Очень много спора вокруг того, в чем разница между фреймворком и библиотекой.

Для себя выявил их отличие:
Если ваш код (весь) подстраивается под некую библиотеку, то это фреймворк, иначе это библиотека

[Шохрух Шаймардонов]

Артём Петренков, я знаю что по моему определению это фреймворк) я пытался объяснить на минималках и поэтому скинул ссылку на более подробно написанную статью

[Шохрух Шаймардонов]

Артём Петренков, возможно. Но это уже холивар на тему что такое фреймворк и библиотека. Это вне вопроса

Answer 2

[kova1ev]

react дает возможность описывать элементы страницы смесью javascript и html. Названа эта технология jsx. И к файлам jsx можно подключать css. То есть, проще говоря, мы в одном файле описываем элемент страницы (называемый компонент) в котором пишем и js и html и еще и css этого элемента туда подключаем. И это не основная возможность реакта, там еще много всего, например обновление компонентов при изменении в данных.

так что верстка все равно нужна.

Answer 3

[Алекс Глебов]

На реакте пишутся приложения, которые работают в браузере.
такие получают данные в виде json и выстраивают html на их основе.
при переходе по ссылке нет обновления страницы, изменились данные - перестроился интерфейс.
html там управляется реактом и с ним напрямую не работают, вместо этого есть jsx.