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.
Related
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.
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 have an app (react native/redux/navigation experimental) that has deep flows where a user can navigate to multiple instances of the same screen (think tapping through to multiple profiles).
To avoid each new instance of the screen overwriting data on the screens before it, I’m using a lookup table approach in redux. Each time I push to a new screen, I use a uuid for the route as a key in the lookup table.
Is there a better way to handle this?
I would suggest upgrading the routing framework as React Native Experimental will no longer be supported. You could try either react native router flux or react navigation . I haven't used the latter, so how I would accomplish this in React Native router flux is by: a) utilizing different keys for the same component which you seem to be doing. b) passing the uuid as params to that component upon navigation. E.g.
Actions[routes.currentUser]({ uuid: getUuid() })
where your routes are defined in some other file and you retrieve the uuid.
As explained here
Also, it is generally best practice to separate Navigation State and Application state as explained here
I'm a newbie for React Native and I don't have native development experience(I only worked on several hybrid apps), while learning this react native framework, I get several questions which block my learning.
How to navigate from one page(component) to another page(component) without relying on navigatorIOS or navigator component? In Hybrid develop mode, it's so easy, just add element A with href attribute would work, but in React Native, how to do it? I read some examples, they all use navigator or navigateIOS component to do it.
Is there any interceptor mechanism in react native so that we could inject some logic before rendering or loading component, for example, we want to have interceptor to check whether user has been login?
How to save data globally (cross components)? In Hybrid mode, we have session, we have local storage, and if we angular JS framework, we could use Service or root Scope to save data, by using react native, how do we save data cross components?
Since I'm new to react native and new to native application development, these questions might be fairly stupid, if anyone could help on this.
I don't know i'm answering to your question but please check this router component for react
https://github.com/rackt/react-router
ComponentWillMount and ComponentDidMount can be used to perform some initial loading
You can use flux framework along with React which can do almost all like in angular js
https://facebook.github.io/flux/