I have written a create-react app which has a dependency on Redux. I would like to package up my app in an NPM package so I can use it in another site that I am building which also uses redux.
I was wondering if it is possible to package up my app provided that it has a dependency on Redux?
Sure you can! But there are some caveats in this approach:
You will need to synchronise the versions of React/Redux in both packages because it would be really bad to have multiple versions of these libraries on your website (performance).
If you'd like transfer data between those two apps you'd have to expose some kind of API which will allow to do that (because both apps will work on separate Redux instances.
If you want to make modular apps you could go another way:
Create an React/Redux app but don't make it setup Redux itself - just expose the reducer.
Anywhere you'd like to use the created app - just import the reducer and plug it in in your Redux instance.
This approach will be a lot lighter for the user :)
Related
My goal here is to have an npm module that exports a set of useful components to various applications in my company.
The components will need to have fairly complex shared state. Much of this state the apps won't care about, but some of it they will. The apps will also need to be able to change the state of the components via dispatches or some mechanism.
Is there a recommended way to do this using Redux or hooks, or whatever? I could not find examples or tutorials for this specific design question.
When I create a new react app with npx create-react-app my-app --template typescript what kind of software architecture does it have by default (MVC, Redux or Flux)? I read all the differences and I got confused a little bit, so I would like to know what do I get by default and stick to it, so that I get a better understanding on how it works.
React does not provide any state management library like Redux or Flux natively or when you create a react app with CLI.
React only provide support for context API natively.
You can install supporting packages and libraries as per your requirement.
There are lots of features that come out of the box create-react-app.
You can run a single command and get a brand new React application that comes with:
A recommended starting folder structure
A solid build setup with webpack and Babel (that you don't have to worry about setting up)
Scripts to run our React application
Extensibility
Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. React does not support Redux by default, you have to integrate that.
React by default support ContextAPI. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
I am new to ReactJS and I'm working on the Front-End side of a project I have developed myself. The project is meant to be a site where users can logIn and post messages.
I have developed my back-end using Spring, Kotlin and MongoDB as DDBB, and have developed the API to perform all the necessary actions.
I have already developed the front-end side in Angular 6, since I know how to do that, and I have the site running correctly.
However, I'm trying to learn ReactJS, and I want to 'replicate' what I've done in Angular with React. After some tutorials and stuff, I have been able to develop my LoginComponent, which can fetch correctly the userInformation from the backend.
Here's then my question: In Angular, I use services to store variables that I may need from different routes, such as the userId (I will query the messages using that). I have not noticed how to do that in React, any idea?
Sorry for the poor explanation, I'm new to React.
You need a place to store the application state, you can use rxjs or mobx observables, or you can use redux. I personally like observables, as there is a lot of boilerplate in redux.
In react, your smart components will usually import pure functions from services that perform actions on the stores, and derive its rendering from the application state that is passed down to dumb rendering components.
I am creating React Native App for mobile on Expo.
When we try to make mobile Apps, we should usually manage state in this app.
However, I am using Expo. Of course, Expo is useful to start React Native App easily and quickly but sometimes Expo cannot accept modules.
So, in this case, I tried to use Realm to manage state but Expo can't follow this.
Could you teach me which way for state management is better in React Native on Expo?
There's a few ways to go about this, two of which I know and have used:
AsyncStorage: This is default with react-native and you won't need to install anything to use it, here's a few tutorials and documentation on it.
https://facebook.github.io/react-native/docs/asyncstorage
https://medium.com/building-with-react-native/what-is-asyncstorage-in-react-native-and-how-you-to-use-it-with-app-state-manager-1x09-b8c636ce5f6e
https://medium.com/#richardzhanguw/storing-and-retrieving-objects-using-asyncstorage-in-react-native-6bb1745fdcdd
React-Redux: This is something I use a lot more, it utilises AsyncStorage but allows you to create a better storage flow and a system of persisting data so when you close the app and reopen it, the data will still be there. I've found React-Redux to be a lot easier once properly learned, here's a few documentations on it.
http://www.reactnativeexpress.com/redux
https://alligator.io/react/react-native-redux/
https://medium.com/#relferreira/react-native-redux-react-navigation-ecec4014d648
A quick google search on either (react native using react redux or react native using async storage) will give you quite a few documentations/tutorials that is quite useful and you always have Stackoverflow, if you're ever stuck.
there are multiple ways
redux (https://redux.js.org/)
mobx (https://mobx.js.org/intro/overview.html)
react context API (https://reactjs.org/docs/context.html)
for small apps, i prefered use react context and for an app with a large scale I using redux
how to create web and android application using react. can I use both reactJs and react native. If I create web app by using reactJs, how to convert web into android application (reactjs into react native).
Thanks in advance...
I personally in my projects have not seen a way of doing this automatically. There are some things that you might wish to look at however.
https://github.com/necolas/react-native-web - Seems to allow you to use the same components from react native directly in a react project. So the idea being you write your react native project and then import this package for the web build and voila.
I have ended up manually managing the proccess. If you layout your application keeping your application logic completely seperate from any display component logic the process really isn't that painful. Not sure if there is a better guide but this might give you an idea http://jkaufman.io/react-web-native-codesharing/
You could also use something like webpack to automate this process of swapping components / packages out for native / web.