Как начать использовать React js в своих проектах?

Question

[Иван]

Добрый день, нужна помощь знающих фронтенд разработчиков и гуру React. Понадобилось мне написать тут не сложное приложение по Android и IOS, безусловно выбор пал на React-Native. После нескольких недель изучения React - Redux все получилось.

Но теперь есть желание начать использовать React в своих проектах. Но как это делать я не могу понять, все крутится вокруг полноценных web-приложений, а не каких-то отдельных компонентов.
Допустим есть у меня проект, например на Drupal, пусть будет интернет магазин. И все работает там хорошо на jQuery, и на php. Суть работы jQuery как библиотеки понятна и прозрачна, я ее подключаю к проекту и использую там где мне это надо. Надо обновить корзину, обновляю; надо вывести форму регистрации вывожу. Все просто и все хорошо и красиво работает.

Суть вопроса как в эту концепцию вписать React? Т.е. например мне надо сделать обновление корзины на React. Мне получается надо у себя поставить node js, запустить create-react-app, установить babel, создать компонент cart. Сделать в нем всю логику кукую-нибудь, потом запустить bulid получившийся js файл я подключаю на странице? Потом я захотел сделать форму регистрации, все мне это делать по новой? и опять получившийся файл подгружать на странице регистрации?
Или я что-то упуская и не до понимаю? Или React нужен для создание серьезных веб приложений и все и в проекте его использовать не получится?
Спасибо за ответы!

Comments

[beduin01]

На React мир клином не сошелся. Попробуйте flutter.io

Answer 1

[Александр Таратин]

Не стоит пихать react везде и всюду.

Мое ИМХО - либо делаем весь клиент целиком на react/angular/... либо не стоит и пытаться. Разве что какую нибудь страничку плагина для CMS можно оформить в таком виде, если ей не требуется сильно взаимодействовать в остальным интерфейсом - получаем мини приложение внутри СMS.

Зачастую достаточно простого шаблонизатора на клиенте.
Сам использую https://github.com/deepsweet/mustache-loader работает на twitter.github.io/hogan.js

Answer 2

[Евгений Мальцев]

yarn add react react-dom

Answer 3

[Dark_Scorpion]

Мне получается надо у себя поставить node js, запустить create-react-app, установить babel, создать компонент cart. Сделать в нем всю логику кукую-нибудь, потом запустить bulid получившийся js файл я подключаю на странице?

Нет, правильнее переписать весь ваш сайт на React+Redux и его уже править. Реакт стоит использовать в средних и крупных проектах, с хорошим пониманием, что такое SPA архитектура.

Answer 4

[Андрей]

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

С jQuery ты, в основном, мутируешь DOM. С React ты конвертируешься пропсы и стейт в разметку. Поэтому требуется совершенно другой подход в разработке. В этом основная сложность.

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

Comments

[Maxim Nepritimov]

Ну каждый отдельно подключаемый компонент надо будет превратить в мини-приложение. Взаимодействие наладить при помощи запросов к БД.

[Андрей]

Чет как-то прям совсем радикально. Взаимодействие можно и через Redux наладить, что касается БД, оно конечно нужно, но далеко не всегда...

Answer 5

[Maxim Nepritimov]

Т.е. например мне надо сделать обновление корзины на React

Значит нужно сделать реакт-приложение корзины.

Мне получается надо у себя поставить node js, запустить create-react-app, установить babel, создать компонент cart. Сделать в нем всю логику кукую-нибудь, потом запустить bulid получившийся js файл я подключаю на странице?

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

Потом я захотел сделать форму регистрации, все мне это делать по новой?

Значит тебе надо будет сделать реакт-приложение формы авторизации. Из повторных действий тут только запустить create-react-app, потом запустить build, получившийся js файл подключить на странице.

Лучше, конечно же, писать полностью приложение (SPA), а не подобные мини-приложения. Но начать можно и с этого. В последующем, объединить все в единое целое - не такая уж и проблема.