Table of contents
No headings in the article.
React pure front-end (Create React App) + Rails JSON API, separation of front-end and back-end projects
NextJS + NodeJS + Rails JSON API front-end and back-end project separation
Optionally use React apps in certain pages through Stimulus integration
Through document.addEventListener()+ReactDOM.createRoot()+fetch()+rails layer turbo_stream, Turbo.renderStreamMessage of front-end react
All of the above schemes have advantages and disadvantages, which need to be selected according to the actual situation. In my case, I am proficient in using front-end frameworks and do not like to pass APIs, and I am not familiar with Hotwire. Finally, through learning and searching, I saw the [inertia-rails](https: github.com/inertiajs/inertia-rails) and [inertiajs](https: inertiajs.com/client-side-setup) scheme, directly in the controllers of rails render data to the corresponding front-end framework components, where inertiajs is defined as Build single-page apps, without building an API. Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.
At present, I am changing to the official demo: [Ping CRM](https: demo.inertiajs.com/login). The choice is the rails integration solution, before there was [Ruby on Rails/Vue](https: github.com/ledermann/pingcrm /) by Georg Ledermann, I switched the front-end framework to react. This is my [github address](https: github.com/jisuanjixue/pingcrm_react), I switched the CSS technology to [chakra-ui](https: chakra -ui.com/getting-started), a react UI library. Welcome to start !!