I have to create multiple small React Apps that are modularly integrated on existing WordPress sites (using Shortcodes).
They might use the same state that is currently shared using react-hooks-global-state, which works fine.
However, since I've started using Recoil.js for other Apps, I'd like to know if it is or will be possible to also share global state (accross React instances) with it. The problem right now seems to be that we have to provide a RecoilRoot that must be nested above all components. Obviously, this doesn't work when having multiple React Apps, does it?
Thank you!
Related
So i read somewhere about exposing a React component on the server which makes it importable to a different application, However im unable to find where i read this and cannot locate anything that would help me with this query.
So lets say i have several microservice applications they all essentially share the same Navbar component, my Goal would be to have the component in a central place that can be edited and updated and that would update all other components in other react applications, it would help with maintaining the code.
but in all actuality im not even sure this is possible. considering react components are built into the build folder any structural changes wouldnt be noticeable without rebuilding. But i know i read somewhere about this.
With our team, we are going to start a medium project with Reactjs + Apollo + Graphql and we are looking architecture pattern to keep an order on this project.
I was reading and watching some videos about Architecture for Reactjs and the most commented was Redux, seem good it have state managment and a file structure for work (like layers) but work better with Api Rest and we want to use Graphql.
The other option is use only Graphql and Apollo, because Apollo have it's own state managment and similar options that can replace redux, but if we use this option, what architecture can we give it? mvp? or mvvm? Is it posible with Reactjs?.
If some one with experencie with Reactjs can advise us, we would appreciate it =)
I think you should first understands the benefit of using ReactJs within your project. By saying this I mean to say that React and Redux are independent of each other. These are two different libraries.
React offers it's own benefits such as virtual DOM manipulation, lightweight, used with styled components and many more.
On the other hand Redux is kind of state management library that is based on centralized state management pattern and can be integrated with any JS framework.
With React you get the flavor of creating SPA's or even you can provide the illusion of SPA having multiple pages inside your App.
With React you can use other JS libraries without any obstacles as it is very user friendly and compatible with almost all latest browsers and even to aid the support there are various other libraries too.
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 have made a server side rendering application using React, Redux, Node.js and webpack. Now I would like to make another application with a few extra components which will also reside in the same code base. My requirements are:
I should be able to run both applications without each affecting the performance of the other.
The few components which I have added in the new application should not be accessible in the old application.
We are currently moving an application from asp.Net to React/Redux and .Net core. The application is really complex so we are trying to make so that each page its is own module. But there certain components (Modals, PDF viewers, and other specialized viewers) we need to access throughout the application. Is there a way to add these components from other React projects in a specific application without having to load the entire application. Or maybe create a core React/Redux library that goes in the entire application?
Thanks
Note: we are currently using Webpack, ES6, React and Redux
As a sibling to your modules directory, you may have a shared directory. Inside here, usually, you'll have directories like styles/, fonts/, images/, and ... components/. The components here may be thought of as the atomic structures that create your "molecular" modules. For example, any custom UI components (e.g., buttons, dropdowns, tooltips) go here--assuming you're opting out of MaterialUI.
Then from within your larger "feature" components, you import these components and use them.
As a further step, you can build all your shared components as a private npm module and bring it in that way.
Since Redux is in the discussion, aim to make your routed components be container components. In other words, in <Route path='/something' component={ThisComponent} />, ThisComponent ought to be a generated container component, via the connect()() method.
I would advise against using a Router as your application could easily break should the .net application change urls.
Another option would be to use something like React Habitat