The company I work for is currently experimenting with a newer version of their frontend. One piece of functionality is a self-contained React app that feeds off Rails APIs. We'd like to for one part of the app (the React part) use the react router instead of the rails router.
Is there any way for us to be able to embed the react app as its own section of the app whilst still maintaining sessions and being able to use the rails router for the rails components and the react router for the react components.
Yes this is a very common thing to do especially when migrating into more modern client heavy applications.
Like you said you will use rails to handle session management through cookies and routing will be the tricky part. You may however choose for rails to serve a single page and have react-router handle the rest. That is depending on things like auth see.
Once an html page has been rendered the javascript will load and react-router will handle the rest of the routing. This means that you will not be able to notify rails of client side route changes. It is difficult for me to address if that will be a problem without knowing more about your application design.
Also see this gem.
// Add react in existing app with yarn
yarn install
yarn add https://github.com/rails/webpacker.git
yarn add react
yarn add axios
resolved_paths: ['app/assets'] // Add it in webpacker to get access for assets file
Related
I am kinda new to front web development, but there is one interesting question for me.
I got a simple vanila html+css+js website, in which I want to integrate a few actions (profile page, custom e-commerce, checkout, etc) using React.
As I followed this tutorial (Add React in One Minute),
I had successfully "inserted" react component into the webpage. But the normal reactjs applications are able to use installed libraries, use props to pass data.
So, basically, the question is how to run this webpage the way that react will be able to handle libraries installation (common npm i example) in order to be able to import them and work like with normal react application created by npx create-react-app my-app
You could use libraries via a CDN link, the same way you added React via a script-tag to your site. Ultimately i think you're looking for the developer experience one gets while using JSX-syntax and this would require you to rewrite your exitsing app, achieved trough setting up a node project with your mentioned command npx create-react-app <app-name>.
JSX must be compiled to regular JavaScript so that browsers can interpret them correctly, much like you would compile a C++ program to a binary file.
When Node js and react are used in a project at the same time, does server side rendering happen? I'm new to this. that is, pages such as (about, contact) are created with react and then the server is written by node js and when the request is received, pages such as about, contact are directed to the user, so this is the process when using react with node?
When Node js and react are used in a project at the same time, does server side rendering happen?
Maybe, but not necessarily.
If you have a React project with SSR then you almost certainly will be using Node.js (probably with the Next.js framework) to perform the SSR.
However, you could have an application without SRR that used Node.js at runtime (e.g. to provide a webservice) and any React application is likely to use Node.js at build-time (e.g. to run Babel and Webpack to prepare the application for deployment).
When Nodejs server and React are running at same time,
If there are 2 pages About.js and Contact.js
About page
About page is accessed through REACT-ROUTER-DOM and likewise Contact page is also through REACT-ROUTER-DOM.
About.js
React main page for routing and continuation part(react routing continuation)
THIS IS THE NODEJS SERVER BELOW
By getting
Nodejs generate about contact
Nodejs code link
So after that we will place this local application programming interface in react components by given below
react code link
So in this page I have used AXIOS to fetch the data from the application programming interface
NPM INSTALL AXIOS in react and it would be blocked by CORS Policy to avoid that we can install NPM INSTALL CORS and require it in NODEJS server.
Now I am running the server together and using react hooks I am able to get the data passed from application programming interface
About page and contact page.
I am tasked with building a new section in an old web app. The app is built with an old version of React (0.14.9). [edit: It is also deployed as a mobile app using Cordova] Rather than having to try and update, change, or work within the original app too much, I'd like to be build a separate app with Preact and have it as submodule of the original app.
Ideally, I could then link to this new app through the React-router in the original app, so it could be accessed at "originalapp.com/new" I would also like to gradually migrate and update code from the old app into this new repository.
So far I have set up the new repo as a submodule of the original repo, but I cannot integrate it into the router. I'm not sure how to use the react-router for anything other than react components, or fully external link.
If I want to build this as a new app, is using git submodules a viable approach? Or should I look for another solution?
I am trying to create an android application using react native. In a general scenario, the MainActivity invokes the main component from index.js. We specify the main component to be registered in this index.js by importing any JS component form the file tree. The android application accesses the index file through a local port using http://localhost:8081/index.js
For my use-case, I want to host all the JS components on a remote server so that my android application fetches the main component from index.js on the remote server every time the app is initialized. This would enable me to make any changes to the functioning of the app on the server itself without having to roll out updates and user needing to download them.
I am still very new to react native and I do not have any code to post since I am still researching. I just have a sample application from which I cannot figure out how the android application knows to read index.js. I also cannot figure out how would I configure my application to hit the index.js file on my remote server URL.
If anyone knows how to do this or has some documentation references kindly help. I would imagine this is a very general use-case still I cannot find some solid instructions regarding this.
Use React Native with Expo. Your app will fetch JS bundles and assets over the air. See here: Configuring OTA in Expo.
Instant Updating: All Expo apps can be updated in seconds by just clicking Publish in Expo Dev Tools. You don't have to set anything up; it just works this way. If you aren't using Expo, you'd either use Microsoft Code Push or roll your own solution for this problem. Source
...but be aware of the downsides: Why not Expo?
I am trying to build a simple website with nodejs, express and vuejs.
In tutorials i saw people recommending having the frontend and the backend communicate through an API by using the vue-cli. (example). 1. Do People use this method in production as well?
I also saw that you can build the vue cli files into a /dist folder and move this folder into the backend. Then you can use the backend to serve the generated index.html (example)
2. After doing this, is vue.js still communicating with the backend through the api i wrote with the vue cli for development?
3. Do i have to change code in the backend to deploy the website this way, other than statically serve the index.html file that was build by the vue-cli? and lastly 3.Can i just npm install vue and use the provided vue.min.js in a scripttag and just lose some usablillity while developing?
I hope my question is understandable and i appreciate every answer.
The backend typically serves the frontend via REST API.
Your Vue app is completely separate from your backend. Most applications keep business logic in the backend and use the frontend as a view. For smaller projects, you can keep the logic in the browser.
To answer your question directly: No, the Vue CLI is not used for that. It's purpose is to enhance your development process.
Relevant topics you should learn about: Representational state transfer (REST), Single page applications, Ajax
Advanced / less relevant topics: GraphQL, Server side rendering, HTTP, web sockets, MVC