We Keep Coding

Ionic3 import external web hosted javascript library

I am trying to create a iOS/Android app based on a client side html5 web project, (i.e. a site) I did.
I thought Ionic would be the ideal choice, that it would help me to port my web application as soon as possible.
In my site, I would use the 'script src="https:// ..."' tag to load the external lib, then calling it in another script
tag. However, I can't import and use it in Ionic3.
I tried many solutions tagged with 'ionic2' and nothing really seems to work.
It also seems no one knows a general solution for this, since each answer was case-specific.
Does anyone know a general way of importing external js file and using its objects and 'classes' in ionic3?
(I would prefer to load from the web, but I am also accepting to download and load it fro file. )
(If ionic isn't the best way of accomplishing my objective, I am open to suggestions)

I think you need to wait till release the Ionic 4 and Stencil.
What is all about Ionic 4 and Stencil?
The magical, reusable web component generator.
Stencil is a tool for building modern Web Components
Stencil combines some of the best features from traditional
frameworks, but outputs 100% standards-compliant Custom Elements, part
of the Web Component spec.
Stencil was created by the Ionic Framework team to build faster, more
powerful mobile and web apps. Stencil is the foundation for the next
generation of Ionic Framework, but is completely independent of Ionic
or any other UI framework.
Here you can see the official doc.
Nice video about the power of Ionic 4
Nice article about it

First of all have a look at this useful ionic resource, it explains how to add thirs party libraries using npm.
If you cannot use npm because of whatever reason you have to put the source .js file into your assets/js folder and import it in your index.html using a <script> tag. Then you have to tell typescript that your library exists. This is done like so: declar var <library-handle>. Where <library-handle> can be an exported function/class if the library already uses ES2015 or the object which exposes the functions using prototype. This is the tricky part where you may have to try a few things until you get it to work.
You can have a look at my answers here, here and here where I explained how to add different third party libraries to ionic projects.

jquery datatables from datatables builder into react component

I've been trying to get jQuery datatables to work in a react component. My app doesn't use bootstrap but I want to use it for my tables so I've scoped bootstrap to a class so i can use it in a div without affecting the rest of the application.
I read the following article Integrating React and Datatables — not as hard as advertised, but the article presents a use case that is more basic than I think many jQuery datatables users use. npm datatables doesn't give you access to extensions (search, scroller, button functions, etc), and everything that comes without the extensions is easy enough that you might as well use an existing react table like primereact, react-table, griddle, react-data-grid, reactabular, fixed-data-table, or react-virtualized.
These offer many options but when tested, had at least 1 or more problems that prevented it from being easily adopted and use all the features needed. Some have issues i think I could help fix after I'm more seasoned with react, but I'm not there yet. I've used jQuery datatables in many production environments without any problems. It's a major sticking point moving to react.
So after weeks of searching and testing and trying to work through bugs, I'm back to trying to bring jQuery datatables into my react app. I realize it's not the "react way" but based on the react docs it's possible and there's a proper way to approach it. I don't need it to react with anything outside of its container or div i place it in.
Using the builder is the recommended way to download datatables so you can get your customized components. I'm also downloading rather than using the CDN because this is a local app and needs to work when there is LAN but no WAN access. I'm using create-react-app and I tried to download datatables from here to a folder in my project and had the following problems:
hot-reload started taking forever (>1min)
the page itself was moving at a crawl
extensions didn't seem to be working (could have been locked up?)
How do you use jQuery datatables in a react app while still being able to use the datatables extensions and without killing the hot-reload for create-react-app? Can anyone provide a working example?
Update
Apparently jQuery datatables has made some major updates since the last time I tried to use their builder and now it includes a way to npm install the extensions too. I'll post a github of a working solution if i find one before someone else can update.
Update
Here is a github i made of a react version that is partially working and a basic html/js/css version that is fully working. The readme tells what is working and not working. Can anyone show me why this not working properly?

How to create a HTML5 Drag and Drop Editor?

feel like this is kind of weird question but still,
I want to create studio where people can create cards using different kind of contents, like Text, Images, Video, Audio, Links etc. and save them, so that I should be able to render them as they designed through some other view.
I am planning to built it with ReactJS Framework. I am new bee to ReactJS, just went through TODO tutorials. And done some work around to understand Drag and Drop features with ReactJS.
But I am still confused about How and Where to begin coding for my requirement. What should be the structure of my application. What all properties each components should have, totally got blocked.
I am not asking here exactly to give the structure for my application, I am looking for some resources/documents where it explains how to structure application for these kind of requirements.
Something like beefree.io is what I want to build.
Many Many Thanks for all your feedback.

I very recommend TinyMCE editor: https://www.tinymce.com/download/. This editor has a lot of features. I can also recommend http://hammerjs.github.io/, https://github.com/yabwe/medium-editor and http://premiumsoftware.net/cleditor/.
If you want to create standalone HTML5 editor, you should research GitHub sources of recommended editors and learn mainly jQuery and AngularJS.
Instructions how to create from basics HTML5 editor:
http://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://buildwithreact.com/

I recommend trying out Unroll.io's react-email-editor: https://github.com/unroll-io/react-email-editor
It has a lot of features that you are looking for and is super easy to use in your web app. Also good documentation is available.
This React component is focused towards emails but if you plan to use it for HTML pages instead of emails, you can easily create a similar React component and change displayMode to web as per Unroll.io docs.
I have seen this being used in production on EmailMonster's email editor.

Using jQuery widget in Dojo

My web app mainly uses Dojo and I'm trying to implement jQuery's select2 (https://select2.github.io/). I read this and I know that it's possible to mix the two together but in my case, everything's built on top of Dojo and it's already a rather large web app. So is it still possible to implement a single jQuery widget into my Dojo based web app?
If not, would I have to go through the source code for select2 and convert into Dojo form?

I don't see why it wouldn't work. As long as there aren't any conflicts, you can use other libraries in conjunction with dojo. Now it may not be built with the AMD like everything else in dojo but it will still work fine.

Using ScriptSharp to code YUI controls

I am in the process of choosing ScriptSharp for coding all my javascripts. I already use JQuery and it is great that there is built-in support for this.
But what about YUI? I need it in particular for the editor control..
How can I code the part for the editor control within Script# framework? Is there a place to enter custom javascript when a certain library is not supported or something similar?
Are there any future plans to add YUI to ScriptSharp?

It would be interesting to have YUI support, but there aren't specific plans to add support for it right now, at least not at the top of the priority list.
However, if folks in the community want to get it going and contribute, I can help with questions that come up.
The general idea is you create an import library (there is an Import Library project template when you install Script#), which defines a c# API corresponding to the OM that you program against. The C# API consists of classes and stub methods that define the signatures (think of this as a header file of sorts). There are a few metadata attributes to customize generation of script that references those APIs to get various transforms to happen ... so you can create a working, and often times more natural c# interface that then maps to runtime script constructs and APIs you are targeting.
When I see the sample at http://yuilibrary.com/ I see a bunch of parallels to jQuery, so I imagine building support for it is likely possible at a technical level.
The best way to understand how to do this would be to look at the sources of mscorlib.dll (represents the core script objects) Script.Web.dll (represents the DOM) and Script.jQuery.dll (represents core jQuery API). All of these are in the Script# repository on github ... https://github.com/nikhilk/scriptsharp ... if you haven't already seen them.

We are creating an import library for OpenLayers (http://openlayers.org) and I can say it is incredible easy to do. We started just doing what NikhilK says, inspecting the source code. The results are just great. YUI is a very well designed and documented api, so I think it would be stratightforward. You could just create the import clases you need for your project.