I've created a web application using HTML, CSS and Javascript but is it possible to convert it to a react-native app with the help of any kind of wrapper for HTML, CSS and JS code which can be used within react-native. I would like to convert the web application component into react-native components though it would be a tedious process if I need to change anything in the web application which in turn lead me to change the react-native components.
You cannot use html,css,and javascript code for react native app. Beacause react native has its own tags so it wouldn't possible but still if you can follow the attached url hope it may give you ideas
https://medium.com/javascript-in-plain-english/how-to-convert-any-web-page-to-reactjs-9740f1ba15db
a method would be...
react-native-WebView? I haven't tried it out but from what it sounds like I think its like android web view where u can give it a link and it will load that webpage? that's the closest thing I can think of. of course this method has limitations obviously...
I don't think there are any good methods to turn react code to react-native code since both have different tags and even if you do somehow do it you will have to climb mountains of bugs and fixes if your app is kind of complex.
but if in the future u do take up a project that is for both web and native, and they both share a load of functionality I would recommend something like react-native-web where you can share a codebase between web and native. essentially by making a native app ur making a web app aswell. its a bit tricky when u start but if your having projects like this it will be helpful. hope this gives u some ideas
Related
js and React experts,
Situation:
In our portal we have 2 completely different applications: CMS (PHP based with its own framework, templating engine and so on) and an Online Shop (Next.js based, React technology stack).
Now, there's one module which is already completely built in the Next.js world, but it doesn't exist in the CMS world.
Challenge:
implement the same functionality also in the CMS part of the website with minimal possible effort
Obviously, the naive way would be just to implement it once again in the CMS technology, which is possible, but not very elegant, as the implementation in Next.js will be supported by a separate team, which is going to change things over time and add features, that all would need to be implemented twice.
I'm new to React, but according to an example from the official docs there is a way to run a React app encapsulated in one div element (see https://nextjs.org/learn/foundations/from-react-to-nextjs). I tried it and this minimal example worked embedded in the CMS templating context just fine.
Now, the question is: Would that also work with a Next.js component? Can I render the complete subpage with a separate CMS engine and only one single encapsulated HTML element with Next.js? From what I understood Next.js is built to take over the rendering of the whole page completely, but maybe there's some advanced way to make it work React-like?
Thank you very much for your input.
So I have a React Native app developed using Expo and I have to somehow integrate it with other React Native app that doesn't use Expo. An additional requirement is that this other app (without Expo) needs to stay somewhat independent, that is, there has to be the possibility of developing independently and using it as a standalone app. One idea that I have is to create a third app and include those two in it as some kind of dependency. But I don't really know if it's possible and how to even start doing it. Searching the internet doesn't really help. Is such a kind of merge even a thing? Can I somehow treat a whole app as a component and include two such components in a third app? Or maybe I have to extract components from these two apps and build the third with them? It is actually my first encounter with React Native, so I would be grateful for any guidance.
I have application with logic similar to google's app switcher, let me call it Wrapper. This application take place across all google services and has consistent UI everywhere.
I am looking for solution to inject into my Wrapper application several finished different apps with their own styles, views and JS. They are written with different technologies like React and Angular.
How can I implement such architecture? Are Web-components a solution for this, if yes - please provide me some examples. (The aim is to deploy wrapper separately and all content applications too, so they will have consistent UI and logic from wrapper).
Please do not mention the iframe!
We have done similar model called UI shell, where any developer can develop a microapp in any tech stack like angular, react, vue etc but the main app will consume them as part of its application and display them as part of the main app. Are you looking for similar approach.
I'm working for a company right now and for their whole website they use Cache (language) to 'spit' out HTML onto the page to be rendered then JavaScript and jQuery (and CSS) is used for other things from there.
I've learned React and have been writing Components that I want to use and learned react-router to do my client side routing for me.
I don't know how to integrate the routing part of the webpage (the code essentially) that has been already created with Cache and JavaScript with the new React pages and react-router
The company has no routing whatsoever right now. It is a bunch of iframes like a tree type structure with links so I really need to get it converted to a routing sort of setup.
Sorry It's so long, but now is my question:
Would I use a Node.js webserver and Express.js for the routing for the already build Cache/JavaScrip pages and then once I get that taken care of start using react-router from there to take care of all the new React Components?
Any help is appreciated
Take a look at EWD 3:
https://community.intersystems.com/post/announcing-ewd-3-integrating-javascript-nodejs-and-cache-communities
Also look for the postings in this forum on EWD 3 and React.js (and React Native):
https://groups.google.com/forum/#!forum/enterprise-web-developer-community
I am starting to play around in React and I noticed that the simple app I am making is all in JS. My html page is only an empty body tag!
So I had a few questions because I am new to this framework.
Is my whole app supposed to be essentially all JS?
If it's not supposed to be all JS, when do I decide that something belongs in my html file vs creating it as a react component in JS?
What are the benefits / disadvantages that my html is in all JS?
Am I supposed to set up my server to compile the JS to html to serve html re: Server Side Rendering to maximize performance benefits?
React brings a new way of seeing things: components.
There are two approaches when using React:
AMD (Asynchronous Module Definition): your javascript files are loaded under demand; https://en.wikipedia.org/wiki/Asynchronous_module_definition and in http://requirejs.org/docs/whyamd.html
CommonJS: in this case your app is bundled into only one file (or a few 'chunck' files) - it seems that people have been preferred this way because the app is loaded only one time and it goes to the server only for loading and writing data (i.e. JSON); it helps in reducing charges over the server;
The page is really an empty body tag.... hehe
But with some considerations:
Please take a look at React-Router (or even Angular Route if you use AngularJS):
To move from the current 'page' (view) to a new page, the browser's URL is 'pushed' (changed) without going to the server and the entire new page is mounted according to that URL. This is made by React-Router or Angular Route.
Yes, you are supposed to make your server to output html: you can search for Isommorphic Javascript if you want your client html to be mounted dynamically (useful when you need search engines like Google to scan your page) More info at: http://isomorphic.net/ and this can help you: https://strongloop.com/strongblog/node-js-react-isomorphic-javascript-why-it-matters/
I know there is a lot of new technologies to study, but it's worth...
A little tip I can give you is looking for "Flux". It's a design pattern that helps structuring your application better, that allows you to scale and grow it.
You can take a look at webpack and babel too. Great stuff!
Hope this helps you.