I'm using create-react-app-typescript to create a react application. What I'm trying to do is to build the application, then include the resulting js and CSS files into another application (which is a very old application that doesn't know anything about React or any new JavaScript features)
My problem: I want to be able to pass information to my React application; for example, I want to specify an array to be used to display information, but the issue is that as soon as I add a <script> tag to React's js file, it will try to create the application under the target div element.
Not sure if it's a good idea, but I try to avoid ejecting my React application as much as possible so that I wouldn't need to maintain everything myself.
One solution that I thought of was to create an item in localStorage and then read it from my React app, and this somehow solves the issue, but is this a good way to do it?
And then there's another issue: I want to be able to pass a callback from the external application to be called from my React app to cause something to happen in my external application, and this cannot be done using localStorage
Any help or tip is deeply appreciated,
Thank you
You don't have to eject the project at all. One possible solution (maybe not the best) is just to change your index.js to expose your application. Thus instead of directly "rendering" the app do something like following
// needed imports
window.startFromOutside = function(element, callback) {
ReactDOM.render(<ReactApp cb={callback} />, element)
}
That way you can bootstrap your react application from outside passing any properties you want.
Related
We have a React application created/deployed using CreateReactApp.
This application is able to display some widgets. We've predefined types of widgets deployed with our own application. We'd like the end-users of our application to be able to develop their own type of widgets - using a dev tool like Webstorm/VisualStudio - and deploy them into our application.
Our application needs to provide a public API and a plugin dev library
We want the plugins to be able to use the libraries our application is using (e.g. React, material-ui…)
We need a way to "load" end-user code that is registering new widget types using our public API.
Can we do that using CreateReactApp or do we need to eject?
What are the best practices for doing this?
I have more a suggestion than an answer, a best practice for that can depend on the structure of your current project, so I don't think there's a right answer. I wrote a small proof-of-concept, feel free to fork and use that, if it helps: https://github.com/anderick/react-dynamic-components.
Our application needs to provide a public API and a plugin dev library
To solve this you can create a folder structure to let users upload their component projects.
You need a name or id to link this new uploaded project so you can load it later.
We want the plugins to be able to use the libraries our application is using (e.g. React, material-ui…)
If the use is only allowed to use the libraries you already have, you don't need to worry about their package.json.
In case you want to allow users to use their own libs, it adds some complexity on how to process this during runtime.
We need a way to "load" end-user code that is registering new widget types using our public API.
You can use create-react-app in this approach, but you may need a good definition of an entry point (in my example project, I'm using Index.js as the file I'll use as the main component of the project), or some kind of descriptor(maybe extending package.json) so you can read from your application to understand how to load the component. I'd go with the first approach, convention over configuration is more simple, and you can expand from that with a descriptor later.
by ejecting you can customize anything you want but you've to configure and maintain it by yourself, I think going through CreateReactApp also a good idea based on your criteria. I hope this article may help you out.
Thank You!
MSS-
I want to generate a react app in the browser based on certain variables that can be set in the site that would generate the react app. I looked around and haven't really found such a use case. The only solution I can think of is to generate it from a template without JSX so I can avoid the need of compiling it. Ideally I'd like to be able to download a "development" and a "build" version as well. Even directions where I should look are appreciated.
I'm currently working in a React web app and to save time, a work collegue helped me with the landing page. He did it using vanilla HTML, CSS and vanilla JS.
My question is, can I use that landing without having to adapt it to react? I know I could wrap all the code in a div and go on. But the JS librarys that he used, have to ve adapted.
I tried doing a npm build, create a index.html and place the build folder under it in a folder called "trade". I was trying to create a structure like: "http://ip-server/" is the index.html that I created. And "http://ip-server/trade/" is the react app. I used Docker with Nginx for it. But it didn't seem to work. All I could reach was the index.html, never the build folder.
Am I missing something? Or is it better to adapt the landing?
I would use the "div" technique to adapt the landing page. For that you'd could use "dangerouslySetInnerHTML" as pointed out here: https://reactjs.org/docs/dom-elements.html
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
And then you'll need to research how to make the third party javascript from that landing page work in React in case per case basis. This will be useful for you also for future cases if you can afford to invest the time now. I hope this helps!
I recently built a React site using the static site generator Gatsby.JS and was wondering if there was an easy way for me to convert it to a dynamic site? I'm not sure what's best, extract the Gatsby, deploy as dynamic?
You can continue to use Gatsby and still make the site dynamic. It depends what you mean by "dynamic" exactly.
When a user visits your site, Gatsby will boot React as normal. So if you want to fetch some data, show the user something special if they have already logged in, etc, this is all possible.
There are some special rules to consider with Gatsby. Make sure that the first version of your page is the same as what Gatsby sees. So you can add logic into onComponentDidMount to change the UI only after React has loaded.
Otherwise, if you want to simply remove Gatsby altogether, you take your existing React components and move them all to a new project. I'd recommend starting with a blank create-react-app project and copying the components over. The refactoring required should be minimal.
I need to be able to dynamically include react components into my project, because I want to setup a plugin system and not every user has the same plugins/components enabled. Also they are/might get too big to submit all of them to every user. I tried to find out how to do that, but it seems that React might not support that use-case.
TLDR: How do I load React components from server when needed? Do I have to switch to Angular because react has no templateUrl equivalent?
React components are defined in JavaScript files, so you can load components in just as you’d load in any other JavaScript file. If you’re not using any sort of module mechanism like RequireJS, that might be as simple as injecting a script tag into the document. If you’re using something like RequireJS, you would just tell the loader that you want an extra module loaded.