I have to include a third party widget into my React+TS app.
The widget is shipped in a minified js file and according to their documentation it can be included in a script tag or through e.g. requireJS.
What I cannot wrap my head around is that - as far as I understand - both methods above include the widget at runtime as window.Widget. However, I would like to interact with the widget from my TypeScript code as it exposed different methods.
Is that at all possible? Obviously, I could include my own logic outside TS/React, but I'd prefer to keep it inside.
If that's not possible, is there another way I could communicate with the widget other than maybe through my server?
Apologies if this is a stupid question, I'm a bit stuck right now!
Ok, so I feel pretty stupid. It turns out, I can download the minified js file and just import it into my project. It doesn't have any types, but it works.
import * as Widget from "../lib/widget.min";
Related
We are rewriting an AngularJS app with svelte components and using Vite for building it.
It works great for the svelte components, but changes made to AngularJS code files requires the whole application to reload.
Has anyone solved that problem or and pointers that would help us construct the angularjs app differently in order to achieve that?
We changing pieces of it to Typescript, and import every file required. But the imports are not all referenced. Since AngularJS apps use injection.
Definitely not. AngularJS module unloading isn't a thing as it was never designed for that.
More information in this similar post: https://stackoverflow.com/a/23000380/4096074
I'm a complete beginner in ReactJS. I'm currently designing a website using it and currently working through localhost.
My main page is on localhost:3000 and I want to navigate to localhost:3000\University(I have designed a separate file University.js for this).
On navigating to the content of this file, it overlaps with the existing content (ie that of localhost:3000). Is there any way to show the new content without overlapping as well as with separate CSS. Any help would be really appreciated.
Actually, I'm not getting what you mean by "overlapping content"! For the css part maybe you are looking for something like "local stylesheets" aka "css modules".
This answer has an example of using local stylesheet for each component. Also, there are various libraries, as mentioned in this post, which can come handy for you.
Go through this article, and pay attention at method 4 there. CSS modules is one of the best solutions in case you are experiencing CSS overlapping.
PS: react-native and react-js are two different tags!
You can understand react routing here, if you have some doubt over it. (Mentioning this because of tag!)
I want to download one of the free bootstrap templates and add said template to my react app. I tried reading some of the documents but I can't find any documentation on integrating these free templates with react.
I did an npm install for the template I liked but I'm not sure what to do next. I just have the template in my node_modules directory.
I took what was in the body of the html file in the template and threw it in the return for my app.js. Added the css and vendor folder. Then I tried to import the templates css file to my app.js as well as change what was needed in my index.html file. Some of it worked. Other parts didn't.
Just looking to properly integrate these nice looking templates into my react projects.
Any help would be greatly appreciated!
The issue is these templates are built with Bootstrap in mind not React. These templates were created using regular HTML, CSS, JS, jQuery, etc.. and won't work out of the box for a React application. So in order to get one of these templates to work, within the context of React, one will have make manual changes to numerous parts of said template.
For example, in addition to grabbing the pieces of the template desired for your React application one will have to change numerous attributes listed within the HTML pages provided by the template. This is because in React you can't use keywords reserved for JavaScript in JSX.
So what does this mean?
You'll have to change the class attributes in the HTML to className for your CSS style rules to take effect from the template. onchange becomes onChange, onsubmit becomes onSubmit, etc...
The standard is to camelCase reserved JavaScript keywords in JSX.
You can definitely get this template to work in React it will just involve some manual tweaking on your end. However, if you want a template to work out of the box for React I would look into a free template built with React in mind.
Hopefully that helps!
I've been into the styled-components package and I think the developer-friendliness is awesome!
However, I'm worried about 1 thing: Flash Of Unstyled Content.
Since in production, as well as in development, the styles get packaged with the javascript chunks; When a component is loaded, the styles are generated and appended (at the bottom of) the <head>.
This is inherently the same as how CSS Modules work.
Referring to a post of surviveJS I learned to use ExtractTextPlugin to create separate stylesheets (css files) during the production build step.
However, in styled-components CSS is just JS, so we can't use that technique (at least, I couldn't get it to work).
So before I start building my next project with styled-components, can someone take my worries away?
If you don't want to have your UI flash - you need to send your styles from the server instead of rendering using JS. Fortunately, styled-componnets library supports server rendering API, even though it is not public at this moment.
You can pre-render your styles on a server, and inject into your initial html you send from the server, so it will contain CSS and UI won't flash.
As I mentioned, API is not public yet, but you can use it. There are multiple discussions about this on a Github, please, check: this, this and more issues. I guess public API should be ready in a v2 release.
So basically there are should be no issues with using styled-components to prevent flashing.
SSR is coming in v2 which you can start using today. Here is an example of how to do it.
https://github.com/styled-components/styled-components/blob/v2/example/ssr.js
With ES5, I realize that most people include all their components with HTML tags like <script src="app/listCtrl.js"></script> and attach the component in the same file it is declared.
This is not so straightforward with ES6 imports because imports are hoisted and that causes the Angular module to be undefined when a imported file is trying to attach the component.
What I have done that works is to import the components and attach them components in main module file.
import sidebarDirective from 'app/sidebar/sidebarDirective.js';
angular.module('courseSelector')
.directive('sidebar', sidebarDirective)
...
However, this is no better than just using HTML, if I have a "feature" that is multiple components, such as in John Papa's example:
Is there a more elegant solution, which allows me to not have to attach all the components with one file?
been struggling for a while. Thanks
UPDATE
John Papa does tend to lean towards fewer Angular modules in this seed. The image above is from the blog post, Angular Structure: Refactoring for growth. However, in that post, he also writes
When i see common functionality that can be extracted and re-used, I like to break that out into its own module. In the structure by feature notice that I have a common folder. In there I have another module named common that contains logging, progress bars, and other common features. Sometimes I break this out such that the modules are the first folder under the app folder.
What I did was to create for each component an own angular module, so that they are really decoupled and dependencies are handled on module level between components.
I made two little example components hello and main in my boilerplate project: https://github.com/FlorianTopf/angular-seed/tree/master/src.
Have a look into these demo components and the main application module.