I am new to React JS. I am trying to build a web application which should also work on mobile (Android and IOS) so thought of using react js for web application and created few components. so is it possible to use the React js component in React native.
It's good that you plan in advance. 100% matching between JS and Native won't be possible, but with careful planning, you could get to reuse a good deal.
You may want to take a look at React Native Web project that mirrors Native-specific components for Web (e.g. View, Image, Text, etc).
I suggest building a simple prototype in React JS and then in React Native so you get some understanding of the differences in the two ecosystems. Having a hands on experience will prove more beneficial than any writeup :)
ReactNative is a set of real native Components like View, TextInput TouchableHighlight and more. It is also a platform which let you run javascript code to control these.
There is no WebView like in Cordova, what you get is a native App with native views.
But that means, that you can still have some or your domain logic written in JS which you can use the same way in your Web App.
For example you have a Login Screen for iOS, but all the necessary stuff for your server calls, can go into a separate module e.g. api/auth.js, which is shareable between web, ios, android, iot.. what ever.
Related
I have implemented a web tool with an UI written in Vue 2.
Now I would like to port this UI to a React Native app on iOS and Android without the need to re-implement it from scratch.
What I have tried until now is to build Web Components and include it into the React Native code, but without success.
The alternatives I am aware of are:
Build an Progressive Web App to get rid of this cross platform use case
Build both Web and native app with Flutter
Separate the UI from the logic (e.g. with MVVM pattern) to easily exchange the UI but use the same model and business logic
All of these three options are a bit too late for me because the View app already exists ;-)
Could you please help me to figure out which is the best option to easily reuse your View UI in a React Native app.
Thanks a lot in advance.
I started learning ReactJs and I realized that making complex UI is Ok in react and I can implement any design that I want but when it comes to android I can't figure out how to make those complex designs without losing performance and encountering with bugs. So is there any thing that I should learn to feel free to design in android and customize UI in whatever way I want like doing css stuff in react? or should I learn react native? I spent months to learn android and it is hard for me to change my plan to develop react native apps.
If you want to stay with ReactJs you should study only React native that allows you develop apps will works in both IOS and Android, for a perfect design you can use a live tool like Expo.
Actually the general concept of developing mobile apps by using react native and reactJS are same. You write the JSX on both platform. The only major difference is that the rendering mechanism that react uses is quite different from the other one.
React JS is actually front end library which is developed by Facebook and is used for handling view layer for web and mobile apps. It allows u to create reusbale UI components and is currently one of the most popular Javascript library and it has strong foundation and large community behind it.
Therefore, it completely depends upon the need of customers and the business what kind of mobile application they are looking for and is required for your business whether android or iOS.
Once i tried to create a react native application, but I find it vey hard and not suitable for my needs.
Then i immigrate to react, i kind of begginner in web programming and I remember in react native was a term called 'navigation' and alot of libraries that gives you ability to navigate between screens in alot different ways, stack navigator and etc...
Now i came to react and I started to work with material-ui, but I cant find anything about navigation its seems everything with navigation is related to react native (and I dont sure i can use it in react, at least i didnt find any refrence to that)
Maybe there is another term for navigation in react applications? I saw react-router-dom videos but I dont want to play with the url, its going to be phonegap application using react with webpack...
Any directions for libraries or things i need to read and learn?
Im sorry if this question is very basic, Thanks alot!
You could try the StaticRouter in React Router. https://reacttraining.com/react-router/core/api/StaticRouter
It can load different components based on the path, but won't change the URL. It's usually used for Server-side Rendering.
Although I suspect what you'd really like is to use routerHistory in React Router. Take a look at this example, https://stackoverflow.com/a/42716055/1248811.
react-native targeting mobile app while reactJS targeting Web. They are similar but not the same.
i kind of begginner in web programming and I remember in react native was a term called 'navigation'
Web programming has nothing to do with react native, react native has nothing to do with browser nor web.
I saw react-router-dom videos but I dont want to play with the url,
Sounded like you wanted to visit www.facebook.com, in a browser, without using url? No it's not how it works. Browser will need a URL to render any webpages that you wished.
As we're building a Meteor React web application which will be presented inside a web view inside a react native application. As you can probably tell by reading that sentence, this doesn't make much sense, but due to time constraints and the fact that the react native application is made by another team, we have decided to present it in a web view for now, and eventually convert it to RN as well.
So to prevent having to write everything twice, is there a way to use React Native components in Meteor? (So use <View> for example instead of <div>).
If you want to go down this path, you can use react-native-web to build React Native components for the web.
Just want to warn that while building your web client with RN components will definitely help you transition, you will still pretty much have to scrap all your client side Meteor logic when you transition later. The best RN meteor client currently is react-native-meteor and is more of a proof of concept than anything -- trying to emulate key features of Meteor with a wrapper using a DDP client, but definitely not there yet.
So in the end, you're going to put in some serious hours making the conversion later or scrapping Meteor altogether when you go full native. If you're a fan of Meteor, I would suggest trying apollo made by the folks at Meteor and works out of the box with RN. You can still get all the best features of Meteor like reactive data, optimistic UI, subscriptions, etc. and the learning curve is pretty mild.
I want to reuse some code that retrieves data from an API for two apps. One is an iOS app using React Native. The other one is a website using React.js.
I initially coded the class that retrieves data from an API when I built the iOS app. Thus, I used the fetch method available in React Native.
Unfortunately, there isn't such a method in React.js.
My best option if I want to reuse my code is to abstract the call of the React Native's fetch method by creating a class HTTPRequests with a method fetch which will call the React Native's fetch method or the '$.get' method depending on the lib used by the project: React.js or React Native.
My question is the following: How can I detect the using of React.js or React Native in my project. My first idea is to detect if my JS code is executed through RCTRootView engine or a browser. But I've no idea how to accomplish this.
Any suggestion?
Thanks!
My suggestion would be to move shared logic into separate module (bower, npm, ES6), generalize the way you request data through fetch polyfill, and never ever bother with detecting React/React.native in your project. JS code detection will make your code unnecessary complicated and hard to support when new versions of React/React.native will come up.
I have successful experience of building a cross-platform application with React and React Native using the platform-specific extensions feature of React Native. I've just described how I structured the code in order to achieve that in a blog post Code sharing between React and React Native applications