Can I use React Redux in a mobile environment? I am trying to distribute it over the web without using React Native
React Redux is device independent and just used for managing state for Javascript apps.
So as long as your "web app with redux" runs on a browser the type of device(tablet,phone,pc) doesn't matter.
Hope this clears your doubt.
Related
I have created a website with react.js, Material-UI, and node.js. Now I want to create a mobile app for that website with React-native. I have used redux,react-redux, and saga on the website. I am new to react-native.
I want to know, Is it possible to create a mobile app and website in a single project structure, If possible then how? Because I don't want to repeat the same state and API calling procedure two times.
React.js uses HTML to render pages and React native doesn't support HTML so you can't use direct HTML.
You can buy react native theme that suits your need and you can re-use services and api call logic from react code.
Theme: https://codecanyon.net/search/react%20native
You can't just use your whole code into the react native app.
First and foremost, you must adhere to the react native architecture before creating your UI with react native components.
https://reactnative.dev/docs/getting-started
The most of the assistance will be found here.
There is also the option of creating a new react-native project and using webview to show your entire website there.
https://github.com/react-native-webview/react-native-webview
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
I worked with ReactJS and flux. They are to used to build web based applications. And flux is used to enhance the way to data flow providing bidirectional data flow.
I start learning react native and wants to know
─ Can I use flux into react-native ?
OR
─ Is there any other libraries or framework available to use in react native. I came across Redux. Is that only option in react native ?
Please help me to clarify what to use in react native.
Yes, you can use Flux in your react native app, but Redux will fit anyway the 99,9% of your cases.
Redux is not the only option but is the most used in production so you'll find a lot of examples, not mentioning it is a Flux semplification so if you've worked with Flux maybe you'll get ready very early with Redux.
If persistency is not an issue with your app you can just rely on local state patterns.
React Native + Redux: https://blog.cloudboost.io/getting-started-with-react-native-and-redux-6cd4addeb29
React Native + Flux: https://medium.com/react-native-development/writing-a-react-native-tutorial-in-an-age-of-flux-55fb62d5ff7a
What is a good approach for making a React web and a React Native app that share their APIs for consuming the same database?
The system will have some CRUD screens for managing products and their images as well diferent events that the user will save.
I will follow the component / container pattern with Redux to be able to reuse code.
I am working in Windows SO.
I was thinking in:
NodeJs (APIs) and Heroku server
MongoDB
React (web app)
React Native (mobile app)
Are there some common archetypal model when using React and React Native consuming the same apis and DB?
I know I'm going to get flamed for this one....Even though it's not persistant to what you asked. I started a new project where we are using Firebase as our cloud backend and it works seamlessly between the web, ios, and android versions (building in react native).
But in regards to your question, react and react-native work well together, You can setup your redux actions (in react-native) almost identical to your react web app. The only differences between how you want to query your backend and handle auth (native uses asyncStorage vs localstorage/cookies). React native has a built in Fetch vs any other React package like Axios or SuperAgent.
I have a full blown mobile web app using the following:
React
Redux
Redux-React
React Router
Firebase
I eventually want to convert this mobile web app to a mobile app and I am looking into using React Native. There is a lot of literature on how to build React Native apps from scratch or to convert a native app in Objective-C to react native but I am struggling a bit to find some prior-art of how to approach taking a mobile web app towards native.
More specifically, what are the things that wont work out of the box? I am looking at React-Router.
Some thoughts around how to start transitioning, what to touch and what to not worry would be very helpful.
UPDATE:
Imagine the following app structure. Its already a lot of code. So, I am wondering if there are approaches to do this incrementally?
Many folks are porting their React applications to React Native incrementally by using Web View as an initial 'foot in the door', and then using React Native views on a flow-by-flow basis. With the recent availability of react-native-webview-bridge ( https://github.com/alinz/react-native-webview-bridge ), two-way communication between those web views and the react native components is now very easy.
There can be performance issues when using Web Views on iOS versus the regular Safari app, so that may force certain UI flows to be converted to React Native before you can ship.
I'd highly recommend translating any Selenium tests to Appium to keep your automated test coverage up. React Native is still a bit volatile, and being able to upgrade quickly and safely will be highly dependent on having an automated test suite.
Be sure to have your API (is you have one), your reducer and your action outside of your web folder, because you'll be able to use them in your mobile app.Most of your app structure will be the same, except for the react-router. Like Jan Fanz Palngipang, you could use react-native-router-flux (which is the one i'm using)
I would recommend you to check starter kit like nativebase, rReact Starter Pro to see how their drawer is working.(see how they change container)