I am going to develop a cross platform mobile app using PWA and React and as I am new to these technologies I wonder what is the best and simplest way to make it responsive.
I know that it's possible to use Media Query.
https://developers.google.com/web/fundamentals/design-and-ux/responsive/
But it seems more works to be done comparing to Bootstrap but unfortunately I couldn't find any document guiding me that is it possible to use these three in the same project or if there will be any conflict.
I would appreciate to have any advice regarding the best way to make a PWA and React project, responsive.
You can use Bootstrap, React, AngularJS or whatever library or framework that you prefer, there's some rules and you have to implement them in your application to make it PWA.
Related
I am creating a react-native application, And the application having many module like
Login Module
Payment
Cart
Product etc.
So I want to follow Micro Frontend Architecture for each module. I have searched on internet but did not find anything. So I want to know is it possible to achieve Micro Frontend Architecture for React-Native application. If yes then How ?
You can use Re.Pack, which is Webpack toolkit for React Native. Since v3 it provides its own ModuleFederationPlugin, which allows you to set up Module Federation (MF) architecture of building micro-frontends.
Example MF app can be found here: https://github.com/callstack/repack-examples/tree/main/module-federation. It covers a basic example of 2 mini-apps loaded dynamically from a "host" app.
There are no proper solutions for RN Micro-frontend so far.
there are a few libraries that may help you to achieve this.
https://github.com/callstack/react-native-brownfield
React Native Wix
But these are not recommended
kindly go through this link so you will be more clear about your question.
https://www.reddit.com/r/reactnative/comments/jdpfrj/microservices_in_react_native/
Microfrontends are concept originating from Web apps world. Achieving the same paradigm on mobile/React Native is possible, e.g. by using Re.Pack, but requires a quite complex setup. On the other hand, using Re.Pack will give you more app superpowers, like dynamically loading bundle splits from Internet.
As a simpler alternative, I would suggest setting up a monorepo containing separate NPM packages for each of the modules. This way you can achieve code separation more natural for mobile apps paradigm.
I have recently been learning Next.js for React and I like the routing system a lot more than react navigation. Now I am about to start a react native frontend and I was wondering if you can utilise Next.js's routing system in react native as well as it's other benefits. I know that you can use it with expo but I am a little confused as to how it all works and I am starting to wonder if the Next only works on the web side of things..
Does anyone have any experience with this? Any information would be much appreciated.
Thanks!
Unfortunately you can't do such thing, due to the fact that the views of react native are Equivalent to native views in Java or Objective C. When you get build version of react native , you are receiving Java or Objective C native views thank to react native's RN bridge. Meanwhile, when you get build version of your Next.js project, you are going to receive HTML, CSS, JS and these codes are not familiar to native platforms.
However, you can use your Next.js backend as your endpoints and fetch data in react native via calling this endpoints.
UPDATE Oct_2022:
there seem to be a new tool created for this purpose , called solito. I haven't used it personally but it might meet your needs.
UPDATE Jan_2023:
It looks like there are more Tools being created for Both web and native platforms , check react-native-web
You can check out Tauri. With that you can create from Next.js, React, Svelte etc. cross-platform native Apps. Currently, Windows, Mac and Linux are supported stable. Android & iOS is currently in Alpha
The magic behind Tauri is, that they provide around your Frontend library/framework a Rust layer with that you can interact with platform native APIs. They call it Commands.
You can find the guide for Next.js here.
Also, if it's not exactly answering the question - "Is it possible to use Next.js in React native?" - I hope that it's helping everyone who is searching for a solution to use Next.js as Cross-Platform Frontend Framework
I read a thread on ycombinator on this where Solito was mentioned and tried it out. In the comments I found this, which suited my needs best :
https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
Solito looks nice but the all in one repo was using Expo, which I did not like because it installs an extra app. I would check it out for yourself and look at the repo above too, which is using Capacitor and is aimed at having one codebase for the two apps.
Both examples worked well. For Tauri I could not find the mobile support so I didn't try it. I would be interested to read more about people's experience with running a minimum stack for cross platform development.
Note : Solito uses React Native, the repo uses Capacitor instead, which may also suite your needs because it works on both iOS and Android.
There's a lot of support now for this tech stack. Besides solito, which is already mentioned, there is also https://tamagui.dev/ which tries to solve all the issues with react-native-web and Next.js along with Solito.
While they currently recommend a monorepo (which adds a lot of complexity in my opinion), I'm playing around with a vanilla React Native + Next.js here: https://github.com/criszz77/luna
This command should get you started to play around:
npx react-native init MyAppName --template #criszz77/luna
I have been using ionic 3 to build mobile applications. With the release of ionic 4 where you can use react or vue or angular, What is the performance difference building an ionic 4 application using react vs angular vs vue.
It depends for you.If you are good command in angular then u should go for it.React and Vue it will take time to stable and not more tutorials and blogs.
I think you should go with angular
Well, this depends on you. There is nothing the three of them can't do. But there are some important factors to consider as well. I will like to compare React and Vue for instance.
React is developed and maintained by facebook developers, for this reason, it has a great and large community of developers working on it. While Vue is developed by an individual, and its community is just growing.
React has more open jobs opportunities than Vue
React will enhance your JavaScript ability more than Vue, though Vue is very easy and fun to learn.
Here are some few links to help you decide: https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd
https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847
I'm at the starting phase of a project that is going to use React Native and React to spit out a build for iOS, Android and web that has a consistent feel. My question is: what's the best way to do this? Should I build the app in React Native and then work on porting a web build? It seems like ReactXP kind of does this, but also includes Windows stuff that we just don't need. Or is it just easier to completely separate the native from the web.
Thank you in advance for the advice!
I am working on a project that needs to be cross platform for web and mobile. Currently the website is being developed using ReactJS and cordova is being used to make it available on mobile.
But I was wondering if it would maybe be a better choice to use ReactNative for the mobile version because cordova might be more of a hassle than ReactNative is. I dont know if this is true tho.
I know this is kind of an open question that tends to be opinionated but i'd still like to hear some thoughts on this from you guys because its bugging me and I dont have the knowledge and experience of working on both these platforms (cordova and reactnative) to have an educated opinion.
React Native is an abstraction to write native UIs for Android and iOS. Your JS code runs in a JS runtime on the OS, but the UI is rendered as native components. This makes it very different than Cordova.
With React Native, you can use the standard platform components such as UITabBar on iOS and Drawer on Android. This gives your app a consistent look and feel with the rest of the platform ecosystem, and keeps the quality bar high. These components are easily incorporated into your app using their React component counterparts, such as TabBarIOS and DrawerLayoutAndroid.
Also you can find differences here:
https://www.toptal.com/mobile/comparing-react-native-to-cordova
Phone gap vs React Native
http://noeticforce.com/mobile-app-development-cordova-vs-react-native-vs-xamarin