I want to move a big Ember v1.4.0 app to React. Instead of creating a new UI from scratch. I want to start building it in React my converting pages over slowly, essentially mixing React and Ember pages in one website.
Goal:
The above is my ultimate goal, but my first goal is is to create a single page in React that is called by Ember's router.
What I have tried so far: I wanted to create a React component in a ./templates/myFirstTestPage.handlebars because, as I understand it, the router.js calls a template file. But I am unsuccessful creating a React component in the handlebars file. Firstly, I cannot use <script> to import React because <script> does not work in handlebars. Secondly, I believe the handlebars is parsing the React app in an incorrect way. Actually, I don't really understand how, and in what order, these frameworks do the rendering.
Possible solutions (but I need implementation details):
Somehow create a React component in the template folder with the .handlebars extension.
Refer to the url of a React app in the handlebars of an Ember app
Have the Ember router map the url to a jsx file. This solution seems really viable to me. I think to myself that surely the creators of Ember must have thought that people might want to have their Ember app refer to some regular html file. Hence, I hope someone might have some knowledge whether this is possible or not.
Somehow create my own router that maps urls to particular files. If its a React component, then I'd map it to my jsx file, if not, I let Ember's router take care of the mapping. I don't really know how to implement a url mapping thing though.
Related
I have a project on Rails 6.
Started migrating it to React by using react-rails. However, there are still some components which I cannot migrate to React ATM due to time limitations.
I want to be able to use the old component (partial) in my React component.
e.g let's say I have a React component:
Component.tsx
export const Component = ({post}) => {
return <div>
<ShareButton post={post}/>
</div>
}
and somehow the ShareButton should contain this:
<%= render partial: 'posts/shared/share_post_btn', locals: {event: false, post: post} %>
I read that it may be possible by using .jsx.erb but I couldn't figure out how.
Would love to get some insights!
Thank you.
I'm afraid you'll be mixing build pipelines here. The .erb is parsed by the asset pipeline, which was the default for Rails <6 and still for CSS, but this doesn't work no longer by default for yarn/webpacker-based builds that Rails 6 favoured for JS output (Rails 7 choose a new path again, I'm sorry).
Also, as components typically have actions attached, I don't really see how a mixed Rails (static HTML) based approach could work.
A few ideas:
In the end, both Rails/ERB and React create HTML. Perhaps you can simply create the same HTML that your ShareButton creates with Rails as a temporary workaround? You'd share the CSS from the new front-end project, and you can slowly migrate rebuilding components in React (when you're thinking of building component library, make sure it works with stand alone HTML/CSS).
You can load static HTML in React using dangerouslysetinnerhtml; that might be a solution if you have complex prerendered text you want to load within a React component.
Load React client side (relatively slow); wouldn't really do this for production: How to perform import/export in client-side React JSX using Babel-Standalone
Do some parsing of the HTML received in React; and render components conditionally (this approach is a bit how Rails Turbo works; a more Rails-native answer to React, Vue and the like)
Push through: none of the 'solutions' above are really satisfying if you want to end up with a clean React version.
Roll back: why use react in the first place. React is just another fancy way of rendering HTML.
Can someone explain that how the concept of components is different in Angular 8 and React? According to various tutorials I've watched, it says React components are reusable and can be rendered separately but it happens same in Angular as well. In file directory you have a main app component inside which you can create separate sidenav, header , footer components and use it whenever you like. It's isolated. So where's the difference? I've worked on Angular 8 previously and but new to React.
Angular and React are two differente technologies. Angular, a framework, with lots of built-in tools, and React a library (in my humble opinion, i would like to believe that you can call React a framework too) that has a popular rendering structure.
Angular and React components has the same concept, but obviously different implementations.
But for sure you can assume that components are made mainly for Code Reuse and Maintenance.
We will be doing our first project using React.
It will not be a Single Page App, but a Multiple Page App.
What I'm trying to figure out at the moment is : what's the difference between a component and an app.
If I only use components, can I still use Redux to have some state management on the current page ? Or do I need an app for this ?
Thanks for the information you can bring !
THoma
There is no special object called "React App". React Components build an "React App" by coming together.
But React Components are formed like tree structure. That means each component have a parent component so you can create a React Component that named "App" and can put another components inside it.
You don't need redux for state management in React Components.
I hope the answers have helped.
Your app may contains a single component and still it will be a react App. If you are using multiple components in a page you can still use react-redux. Redux is basically a container for your states and let suppose you need some state from one component to be consumed in another, Redux provide you a mechanism to make the communication efficient and predictable.
You can also look at the React Context APIs as an alternate to Redux.
An app is simply a component that holds the root of the work you are trying to do. For example an App may have the navigation menu, testimonials, adverts, content, login avitar etc.
If you are making a single App per page (For example a testimonial) then you would still have a SPA. For example, adding testimonials, searching, editing.
You should only use Redux if you are using a SPA with lots of different parts with data in common. If you are making a one-app-per-page and there is no cross over in data then you can simply using Reacts State/Props to hold your data.
Redux is good, but it forces you into a complex path your should try to avoid. If you find yourself wanting data from different domains (customers address and a list of testimonials) then you should use Redux.
If this is a new applications (green) then I strongly recommend you build the whole thing within a SPA using React-Router to control components. you can use frameworks like Next.JS to ensure the site remains small in size (dynamically loading script only when required).
I'm struggling with determining the best route to integrate various components of a single React app on a page within my traditional website. I've worked with React a bit, but they have always been self-contained pieces of content (meaning it fits nicely in one div in the HTML). But now I have a page where I need to sprinkle React into different sections. And each React piece will share various data.
See the attached image. Dark green sections will be React. The rest is a traditional PHP page pulling in content from a CMS.
I'm trying to figure out the best strategy for the React portion.
Should I have multiple renders each going to an appropriate div?
ReactDOM.render(<Section2 />, document.getElementById("react-app-div1"));
ReactDOM.render(<Section1 />, document.getElementById("react-app-div2"));
Since the React elements will all be sharing similar info, am I looking at Redux or Context API to manage that information?
Or is there a better way?
Is this antithetical to React, and I should just get all the markup into the React app itself?
I hope this question makes sense.
image of sample layout
I just wanted to know the difference between react router and react habitat. From what I have been reading (which is not much) these two solve the same problem of externalizing components of a website. I would like to know why one would consider one above the other if they are even comparable in this manner.
React Habitat does not worry about routes or the application information architecture (IA). It simply lets some other system render HTML pages how ever it likes and will hook up one/or many React apps on the fly when ever it see's targets in the html. If a CMS content author changes the URL of a page, or adds a new page no problem React Habitat doesn't care and will continue to hook up React apps.
React Router use routes (urls) to mount React components, this means it needs to know allot about the IA of the application and cant simply be 'dumb' to it like React Habitat. If a CMS content author changes a URL React Router will no longer render, it will require a developer to update the route in the javascript. You could be fancy and dynamically load routes from the CMS but I would question is this too tightly coupled.
They both solve different problems.
1) If you are building a SPA or PWA and want to hold all the IA in the javascript application then use React Router.
2) If a system (.net/php/java/etc) is rendering your HTML such as a CMS and it holds all the IA then use React Habitat.