Develop Reference

How to import Javascript package in browser via script tag or similar

I know I'm a bit behind the times here, but how can I import from this library (uirouter/react-hybrid) for an existing Angularjs site using only tags to include libraries? I have tried a few things, including including from CDN via jsdelivr, also building from node locally and attempting to include the dependencies via webpack. I have also tried loading through require.js but not sure I did it correctly. No matter what, I either get an error for the import or I fail to see the library once imported. I am just not getting it, I feel like I'm missing something. Could someone please help me with a detailed process for how I can get this library to work in place of the existing angular ui-router loaded via tag?
I could definitely go into the reasons why I'm doing this in the first place if necessary, but I feel like this should be pretty simple and I'm just struggling.
Thanks.

How to add React to an already built website?

I already have a built website with Express and I wanted to use React just in some pages. How is the best way to add it having all the resources that I have using the create-react-app?
I know I can add each script to the HTML file, but that is kind of error prone and laborious. I just wanted to be able to do all the import and manage the files the same way I do with an application using create-react-app.

If you only want to use React in some already existing pages, I would suggest you to go through importing the script as React documentation talks about here. It gives you a nice and short example on how to do add react components to existing html pages. You only need to import the react and react-dom dependencies once in your html entry-point (probably index.html), then in each page you only import the required components.
The other alternative is to follow the idea in this guide, to build the app using both create-react-app and express. You would want to move all the html code into React components and handle everything from React, and you will be able to manage all the project structure like you wish. But I believe this is more error prone and a lot of effort, if you only want to add React to build some componentes in just some pages.

import external js file in meteor project

I have a meteor project where I want to include the conversational form framework.
There is a npm package, however it is not properly imported (probably due to some kind of bug). According to the github issue, this:
import cf from 'conversational-form'
does not work, because the export function exports cf.ConversationalForm, not cf (but cf is needed for existing declarations). The form is created and styled, but cannot be addressed in the js.
I was already able to use the framework in a normal html/js/css project, so now I wanted to just include the external script as a workaround.
However, downloading + importing in client/main.js did not work for me.
I've tried:
import '/imports/api/conversational-form.min.js
as well as:
$.getScript
in Meteor.startup.
Do I need to write specific exports in the external .js? I'm far from a professional, so I'm a little hesitant to dissect the external .js.
Any tips on how to simply mimic the html-script-inclusion? Or other ideas on how to get the framework running?
Sincerely, desperate.

Well Meteor allows you many ways to do that, the first ideas that come to my mind are:
Depending on your project structure you can create your own meteor package as a wrapper and internally load the library.
Hardcoding the script tag in you entry point.(Im not sure if this would work to be honest but you can try).

I ended up downloading the script, modifying it to set my options and including it via \imports.
VERY hacky solution, but well, it works...

Meteor allow you to load external library and scope them in all the client
via the /compatibility folder.
Just put the file in there, and it will be scoped automaticaly.

Integrate React app created with create-react-app into an external application

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.

How to dynamically load & render react components?

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.