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')
);
Related
I am wondering how to add React into an existing ASP.NET Core MVC project in Visual Studio 2022 (no, I cannot use VS Code). I can see templates in VS2022 to create new React projects, but I have been unable to find any tutorials, videos, blogs or vlogs to show how to add React into an existing project, so I am wondering if it can be done.
I have added react.js and react-dom.js to the project and I am able to create pure javascript components using those (no JSX), but I would like to utilize more of what React has to offer.
=========================================
After the request to ask a more specific question, including the project in question . . .
I am currently on a small team working on an ASP.NET Core 6.0 MVC application. It is currently using jQuery and jQuery-UI components within the CSHTML views for the UI. There are some $.ajax calls to an API for data, but most data is loaded with the model of the view.
My boss has asked me to look into utilizing React and the reusable components on the next module that we will be working on, without replacing the entire app into a "new React application".
Every single example, video, tutorial that I have watched uses VS Code or some other IDE (other than Visual Studio) to run commands on the CLI to "Create New React App", but nothing on how to "Add React to an Existing App".
Before I go back to him and tell him that I do not think we will be able to do what he is asking, I thought I would see if anyone here could point me to anything that could show that it could be done.
Specific question: can React be added to an existing ASP.NET Core 6 MVC app in Visual Studio Professional 2022 in a way that will allow linting, testing and JSX for reusable React components?
I think I know what you are trying to achieve:
Replace what you used to do in jQuery with React and to do so without
having to move to the whole VSCode, Create-React-App (or Vite), "npm
run stuff" environment.
You can indeed do so: I have setup a .Net6 project which is the standard MVC stuff that you are already used to, stripped out jQuery that comes with it, added Bootstrap 5 (no jQuery) and then used this (https://beta.reactjs.org/learn/add-react-to-a-website) to actually add React just as a library - JSX included.
The final bit that is missing is the JSX babel warning I get. I just need to add something to my MSBuild that will minimise all my JavaScript and JSX components and I'm done.
Everything in Visual Studio too.
You can easily build components and I use a watcher on session storage to tell the state to render and it works pretty well.
The main reason I did it was so I didn't have to use NextJS because I don't see the point in learning/using NextJS and it's whole environment because its "Server Side Rendered" when that is what we have been doing for years in .Net MVC, Wordpress, and every framework/CMS you can think of.
Note, I am not against Next I am just at a point where I only use/learn tech if there is a benefit. I can clearly see the benefit of using React over jQuery.
My public facing app needs to be actual HTML coming from the server not a client side rendered page.
My private login area I build using Create-React-App (or maybe I'll switch to Vite - as I am rebuilding it) and I do all that in VSCode.
we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!
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?
When creating an app with create-react-app,there is only one index.html,does that means React can only handle one SPA at a time? What if I want to develop multiple pages? Should I create another SPA with create-react-app and then put them together after building each of them?
Update:
Parceljs can do that. here is docs.
You can use Parcel instead of Webpack (which being used in create-react-app) and it provide you zero config environment to develop web apps (using react or anything else).
Having multiple pages (instead of SPA) is not what most React environments had in mind [before - see update above].
You can have different page URL's using react-router or similar client side routing solutions.
If the concern is bundle size, there are solutions using webpack or parcel to lazy load each bundle whenever they needed or cache bundle (using service workers) and so on (Tree shaking, ...). (check Code Splitting in React Docs)
Other concern I might have in my brain is SEO, in this case you may find Isomorphic app (react server side rendering) useful which initialize first view of requested URL HTML and sends it to client, then client will load react and react will take control of UI. This will help Google (or other search engines) find your URLs fast and user experience in transitions between pages will remain seamless.
I have a NativeScript application which I would like to integrate, combine, or use with a new integrating app that I would like to build with Stoutem which is developed with Native Script and using it's own Cloud Storage. I would like to leverage the components, extensions or modules already built in Stoutem to use with my existing app.
Does anyone know how to achieve this or have tried it?
I am thinking of the routing or navigation. The data could be shared through API.
Update:
I got a suggestion on loading Stoutem Extensions in a frame under our NativeScript app.