Is it possible to do a lazy loading of CSS files which would be loaded on demand?
For example I have dummy article component and when I try to load that article from API, I also get information that there is a CSS file linked with this object and I need to somehow import it to this component or place it globally. Right now I don't take care about redundancy (I will solve it later).
But I cannot find any information about such logic.
Thanks for any proposed solutions or correction of my workflow
Related
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";
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'm not really sure how to word this so it's making it hard to search but if I have a big application and each component is in it's own js file, then it doesn't make sense to load ALL component files in index.html. The user might never even see a large number of these components as they are navigating through the app.
So the question would be, how can we load components as they are needed in a view that houses them vs all at once?
In a perfect world, as a page is routed it would know the components on the view and know if it's already registered that component and if not, go get the js file to do so and register it automatically for us before running the view. This would require some kind of configuration that says this string component name is this js file on the server.
Does anything like this exist?
Looks like it's called lazy loading of scripts. There seems to be a really easy angular module for this!
https://oclazyload.readme.io/
Very cool and close to what I was hoping for. Ideally I'd love for config of components and then dynamic loading of components when the view uses then but this is close enough. Perhaps I can enhance this to pre-read the view html looking for components that aren't registered with angular already and then search the config to get them if not.
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.
I found interesting link on how to organize my files and load files using require.js http://backbonetutorials.com/organizing-backbone-using-modules/ , the only issue I have with that example is that they load everything in the beginning even asynchronously. I was wondering if it is possible load .js files only when they needed... For example if I click on Project List ( http://backbonetutorials.com/examples/modular-backbone/#/projects ), it checks on which url we are currently located, and load projects.js and list.js after that....
For small apps it would be ok, but for big apps with big classes it might take a while, before all classes will be loaded to the browser, for all routers.
I think creator of that example answered this question more accurately. Here is his answer: http://backbonetutorials.com/organizing-backbone-using-modules/#IDComment-CommentText210764496 , see the reply
First of all, you would really need a big application in order to need that. The files of a normal application, minified and gzipped, are not a significant load. And then you can use caching to load them only once in each browser.
If you really want to, of course you can do partial loading, in the same way you do it for the application in the example (in the router, the projects route will first ensure the project-related js files are loaded, and only then do the fetching/view initialization etc)