How to start using React js in your projects?

Question

Frontend

Good afternoon, I need the help of knowledgeable front-end developers and React gurus. It took me to write a simple application for Android and IOS here, of course, the choice fell on React-Native. After a few weeks of learning React - Redux it worked out.
But now there is a desire to start using React in your projects. But I can’t understand how to do this, everything revolves around full-fledged web applications, and not some individual components.
Let's say I have a project, for example on Drupal, let there be an online store. And everything works well there on jQuery, and on php. The essence of jQuery as a library is clear and transparent, I connect it to the project and use it where I need it. I need to update the cart, I update; I need to display the registration form. Everything is simple and everything works well and beautifully.
The essence of the question is how to fit React into this concept? Those. for example, I need to update the cart in React. It turns out that I need to install node js, run create-react-app, install babel, create a cart component. Make all the logic in it somehow, then run bulid. Do I include the resulting js file on the page? Then I wanted to make a registration form, should I do it all over again? and again the resulting file is loaded on the registration page?
Or am I missing something and don't understand? Or is React needed to create serious web applications, and that’s all and it won’t work in the project?
Thanks for answers!

Answer 1

You should not shove react everywhere and everywhere.
My IMHO - either we make the entire client entirely on react / angular / ... or it's not worth even trying. Unless some page of the plugin for the CMS can be designed in this form, if it does not need to interact strongly with the rest of the interface - we get a mini application inside the CMS.
Often a simple template engine on the client is sufficient.
Myself using https://github.com/deepsweet/mustache-loader works on twitter.github.io/hogan.js

Answer 2

yarn add react react-dom

Answer 3

It turns out that I need to install node js, run create-react-app, install babel, create a cart component. Make all the logic in it somehow, then run bulid. Do I include the resulting js file on the page?

No, it's more correct to rewrite your entire site on React + Redux and edit it already. React should be used in medium and large projects, with a good understanding of what SPA architecture is.

Answer 4

React renders to a given element, you can render different components to different elements. It must be clearly understood that React has a completely different concept than jQuery.
With jQuery you basically mutate the DOM. With React you are converting props and state into markup. Therefore, a completely different approach to development is required. This is the main difficulty.
If you want to point-to-point replace components with React ones, then you need to connect the React separately, and the components separately. And you have to somehow figure out how unrelated components will exchange state with the main application and with each other ...

Answer 5

Those. for example, I need to update the cart on React

So you need to make a react-app of the basket.

It turns out that I need to install node js, run create-react-app, install babel, create a cart component. Make all the logic in it somehow, then run bulid. Do I include the resulting js file on the page?

In addition to the Cart component, you will also need to make a basic component that will display a list of all purchases and some logic of the cart itself. In the card component, the logic for the card is already implemented.

Then I wanted to make a registration form, should I do it all over again?

So you will need to make a react-application of the authorization form. Of the repeated actions here, only run create-react-app, then run build, connect the resulting js file on the page.
It is better, of course, to write a complete application (SPA), and not similar mini-applications. But you can start with this. Subsequently, to combine everything into a single whole is not such a problem.