React Native and Spring Boot - reactjs

I am working on an application that has a desktop view and a mobile view for the front end to my Spring Boot application. The desktop view is a react app and the mobile version is a react native app.
I embedded the desktop app into Thymeleaf to load the application. I understand how that works. I'm now having issues on how that relates to the React Native application. So the plan is to load the application onto some select Android devices. I am not familiar with how this would work.
My question is, when the React Native app is loaded on the phones, do they need to be connected to the server or does it just make calls to the Spring Boot app. If it's the former, would I have to embed it similarly to the React desktop view in my Spring Boot application. If it's the latter does it just get loaded to the phone, and when each button is hit or when it's loaded initially does it just make it's normal calls to my APIs in the server?
Any help or links to helpful information would be greatly appreciated. Let me know if you need anymore information.

Well, about your question, react and react native are client applications, both work on the navigator or cellphone and can work without any internet connection, it depends on the implementation that the web or mobile application have.
Server call is needed in the case of React first time, after that the resources are cached in the navigator and will be used by the navigator to render the web page.
You only need calls to the Rest API about your business logic.
Read more about this:
https://reactjs.org/tutorial/tutorial.html
https://facebook.github.io/react-native/docs/tutorial

Related

Building a desktop admin panel for react native app

I am building a react native app with firebase auth and cloud storage, and I was just wondering if it is possible to make a dashboard for desktops to administrate the users/app? And if it does, how do I do this? Is it in the same build, or do I have to build a new "app" for adminpanel/dashboard?
This is my first time building the adminpanel/backend xD
While it's possible to build web apps with React Native, I wouldn't recommend it. The Layout of a desktop is just way too different from phones to build React Native Apps including web without constantly using Platform.OS. In your question, you even mention that you wan't the dashboard to just be available on the desktop but not on the Phone (which makes sense in my opinion). Since you seem to know a bit about React Native, it should be an easy thing for you to build the Dashboard as a different Application with React for the web only.

Is server side rendering suitable for mobile apps?

I am considering building my react app with the intent of having both web and mobile built . I came across Next js and is thinking of using it. However, what bothers me is that considering server side rendering is rendered in the server, would that be suitable for mobile apps ? I mean what happens to my mobile app when offline ? Is server side rendering applicable in mobile apps? Am i confusing how the server rendering works ? Pls a better explanation is highly appreciated.
Server side rendering javascript apps gives the same result as any other server-side language.
An example could be a static site made only by html files. What would happen when offline? Nothing.
This behavior is due to impossibility to connect to host.
To handle offline for mobile apps you could have static file handled in app, or you could use a more modern approach without developing the mobile app: PWA.
A Progressive Web App allows to integrate with some native functions of mobile devices and to handle offline status.

modernizing old app handlebars app with react

I've got an old app I wrote in Node, Mongo, Express and Handlebars. It seems to be a bit outdated in the sense that it was more static and all data was called locally off the same domain and rendered with Handlebars on the server side, which I thought was always necessary for SEO and it wasn't built with the idea of later building and connecting the data to a mobile version.
I've been using React a lot lately as well as looking into building mobile apps and with the tutorials out there, it seems like most apps these days are designed in a way that the backend is mostly a remote api with cross site origin requests enabled and a frontend that just gets the data from it and parses it on the frontend whether it's a desktop client or a mobile client.
What would be the best way to modernize my old app that'd keep it rendering on the server side using react instead of handlebars for SEO, while also having an api service for if I were to develop a mobile version that could get and parse the data?
There's a lot of server side rending react tutorials out there, but I'm not sure what the best approach is.
To turn your current app into a SSR (server side rendered) react application would be a big ask.
You would have more luck ripping out the html / handle bars response and just returning JSON instead, effectively turning it into an API.
In terms of adding a SSR react layer, the easiest option would be to use something like Next.JS. This does the heavy lifting for you to create server side rendering. There are plenty of other options out there but Next is one of the best and probably the easiest to get going with.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.
You would then make API calls from your SSR Next / React app to the Node API.
You can reuse the same API for a mobile application if you chose to go down that path at a later stage.

React Web App to React Native

I currently have a web app/api built using React, Node, Mongo & Express. I would also like to develop a react native clien that shares an API. Does having an existing react web client make the react-native mobile development any easier? My biggest concern is authentication & authorization. Can you recommend any tutorials, frameworks, packages that could make it easier? As you can tell.. I am very new to development.
You can utilize the same backend that you use for your Web app, in React-Native.
You can even use the same packages like Axios or superagent.
React-Native's built in one is called Fetch().
You are simply pinging your RESTful backend from a different device.
React-Native code is not at all a one for one with React Code. They are very different and only follow the same architecture Design Principals.
This question has been asked many times.

Can i create an app with react similar to angular 2?

I've been thinking of creating an hybrid app. I worked with ionic before, but i don't have any clue about react.
What i exactly needed is 'code once run anywhere' approach. The angular 2 is doing great in that i can write code for web app, android , apple devices and even windows.
I want to know whether i can do this in React. Can I create an app with react which runs on both web and mobile app as platform independent.
Thanks in advance!
Angular 2 and React are great frameworks/library(for react) which can run almost anywhere. In fact lets first determine what we mean with anywhere.
Angular 2 can server that app on web and if you are using a responsive format can serve mobile devices as well really fast. On devices you can serve it with ionic but the catch here is that this will be served with webviews which is actually a small placement inside the app to show html content. This rendering is rubbish if you want to serve native experience to the user. If not, then great ! Also you can have windows phones as well.
React on the other hand is easy to go in to code fast. I recommend using redux (which might take a while to get used to). Also with responsive design can serve many web devices really fast. Now on the smartphones the experience is native. Yes exactly native ! So if you plan the application correctly and split the logic right you can serve from the same app both application web + mobile. For windows phones now there is a limitation.
For desktops you can use electron as well and have it all!
I guess for me you must consider what your target is (time, devices, experience) and then decide.
Have fun!

Resources