I have created two create-react-app projects one for mobile UI and other for desktop UI because of some conditions. I want to integrate both of them and put on server so appropriate UI is loaded on devices. Is their way to integrate their builds while putting on server or any other way?
Related
I am using React JS (not native) to create a web application. I understand that there default table tags in React such as <table>, <tr>, and <tbody>. When creating these tables I want to be able to manipulate them by dragging them to the side. This application will be used on tablet devices as well as the PC which is why this is necessary.
I need to avoid installing libraries so if this can be done natively all the better. A link to a tutorial would be best.
Thank you
I am starting a new project which is a hiring portal so it'll involve minimal business logic and more of forms, data storage and external services.
Considering the fact that I haven't done much with React other than creating a simple hello world app using create-react-app from npm, I was wondering if it would be better to have a separate frontend app that gets all the backend work done through APIs in my .net app, or to simply use React in my views with the necessary jsx files and NuGet packages.
I want to design a cross-platform (Android, iOS, and Web) plugin-able software that means everyone can easily develop a plugin for it and users can pick plugins from the marketplace and install it. Every plugin can:
Share data in the back-end side with the core application
Have a custom UI in Apps and Web that ideally using a standard UI-kit for consistency (for example Shopify polaris)
In the back-end, there are many best practices in software design like OAuth. but in the frontend, the problem is not straightforward:
Is there any cross-platform UI-kit for react and react-native? for example, using Expo v33+ or ReactNativeWeb we can build the code for android/ios and web but I can't find any cross-platform UI-kit. (NativeBase, Elements or similar cross-platform UI-kits are only for Android and iOS)
In the Frontend, how plugins can share UI using react and react-native (or ideally a cross-platform UI kit) somehow that render in the core dynamically (without needing any update, for example, the plugin provide an endpoint and return a react/native component and the core will render it)
1 - As far as I know there are few of them, like React Universal UI
2 - With the above UI Kit, the distinction on how components are built (imports remain the same) is done at runtime in the boilerplate:
Web (React)
$ ruui dev
IOS (React Native)
$ react-native run-ios
Android (React Native)
$ react-native run-android
If you want you component to be imported at runtime, well, this is possible for sure in web env (you can do it also with react-create-app, with dev server turned on and no prod static build).
For Android and IOS you'll need an additional build and subscribe your app for the review before going up again to the store (AppStore and Google Play)
My objective is to add new UI screens based on React JS on an existing (JSP based) J2EE application running on local tomcat server. Yes, the ask is to add new screens using modern javascript/clientside technologies, but to retain the existing screens as it is.
I downloaded individual react.js and react-dom.js, added them to my J2EE project content, referenced them to the html page. In this way(Without having to install node JS or setup react dev environment), i'm able to achieve my objective, but i could use only plain javascript React.createElement to create the UI components.
But, i would also need to use the JSX syntax to speed up my developments. Now, to use JSX features, i learned that i had to do setup of Node JS, Babel, etc and have to build the application. This will not fit to my objective, as i don't need a standalone React application, but only need to create additional screens based on react to existing J2EE application.
So, I need experts recommendations to accomplish this. My questions are
If i setup the react+babel development environment and build an app, can i get the transcompiled JS files easily, so that i can take them and deploy to my tomcat server?
If so, is this the only way to achieve my objective OR is there a better alternative for quicker development?
You don't need expert recommendations its easy.
1) You can use create react app from create react app boiler plate from Facebook which gives everything from out of box.
https://github.com/facebook/create-react-app
2) React app needs a div to load js.
Keep generated js bundle from above step in J2EE application and load script on JSP page using script tags.
<script src="/reactbundle.js"></script>
<div id="root"> </div> // create this div in existing J2EE application in HTML or JSP file.
ReactDOM.render(<App />,document.getElementById('root')
);
I have really big concern on my web project architecture which will have separate mobile and desktop web app.
I already finished to develop web version based on "create-react-app" project template and for mobile version, I want to reuse my exists web version component as much as possible.
We will serve these with separate url "www" for desktop and "m" for mobile.
I am thinking of two possible ways.
Just build another create-react-app project for mobile and share the common code.
In exists web client create-react-app project src folder, make mobile version codes like component.js component.web.js component.mobile.js. But in this case I am worrying about the size of bundle js file.
I also thought about the responsive web design, but we have totally different layout and components.
Rendering two different layout within a component by the size of viewport or url(www/m) might be another possible way but it is highly possible for me to use server-side-rendering...
What would be the good approach to solve this problem....
I would approach this as follows:-
Move all business logic to a common package and use it in both mobile and web. This would make your logic common.
Move all the common components/config/colors etc. to a common package and use them in both the apps.
Handle view part for both the apps separately.
I also thought about the responsive web design, but we have totally
different layout and components.
If you have totally different layout and components I would suggest to keep mobile and web segregated. Its not only about the bundle size, you can get around it by lazy loading, but your code complexity can increase.
You can use the same code and build mobile application using Cordova Framework
as your web code will be the one to generate application.
As well you can create for multiple platforms.
Go through official website.
https://cordova.apache.org/docs/en/latest/guide/cli/index.html