How import and export files html? - javascript

I have a system where I am using html, css and javascript, it is a simple website. I wanted to know if there is a way to speed up my process: I have several html pages, on them I do several library imports, is there any way for me to do all the imports in a single file and import it to my pages, as if it were a react component, but without the react part?

Related

How do I import JS file as text in React native?

In React Native we can inject JS into a WebView. The JS to be injected must be a String.
How can I create a separate JS file and import it as plain text so that I can inject it into the WebView?
Even better would be to be able to write TypeScript code and import it, but then it would need to be converted into JS.

How do I use/import JavaScript file correctly in React project correctly?

I am trying to add/import js file in my React project, in a functional component to be exact. I know that there are some answers for this question (sort of this question) out there on stackoverflow but I am not able to use any of the solution or may be I just didn't find correct one yet. What I am trying to do is that I have a js file which I want to keep in src folder and not public if possible. So the myAnimation.js file is in src/assets/js/ folder. Now how can I import and run this file in my React project's functional component?
Basically I want to add this animation in my app : https://codepen.io/jasperlachance/pen/QNMwBg
So there are three js file in the codepen which I want to download and save it in my project instead of using the CDN links that this codepen has. So what would be best approach to have the three js files downloaded in my project and run it on a specific component lets say MyComponent which I import on route MyRoute. Also, I am using TypeScript. So how can I import js files and make them run one after another once the component is loaded/mounted and it has mounted/created html elements?
Thank you for your time in advance.

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.

Why is CSS imported into JSX files instead of being loaded separately?

I'm not asking how to import CSS into JSX code - there are many guides. I'm asking why. For context I'm learning React; I'm new to React and still fairly new to Javascript and the whole area of web development. I'm sure this will turn out to be a naive question, but I can't find the answer.
All the React tutorials I've looked at use JSX (understandably) and all seem to install a library such as css-loader and then include an import statement such as import "./index.css" in the JSX file itself.
I would assume it's also possible just to load the index.css file, old-school, directly into the HTML and still have it apply the exact same styling based on classnames and IDs I add to my JSX components. What's the advantage, if any, to importing the CSS into the Javascript or JSX file itself? It seems to be a universal practice.

How to load polymer?

I'm new to polymer and am trying to understand how to load it. I'm reading this
https://www.polymer-project.org/2.0/start/quick-tour
In their first simple example, they load a polyfill
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
which I understand the reason. But the next part, they load a html file, which appears to load the main polymer app.
They load it with a html import to here
https://polygit.org/components/polymer/polymer-element.html
Which this appears to load a bunch of html files which all have script tags in it.
Then finally to use polymer, you just make a class that extends Polymer.Element.
This seems really strange, to why they chose to import a ton of html files. Why did they not just stuff all that js into 1 javascript polymer library file, like jquery. Or is there a javascript file for polymer like that?
Thanks.
There isn't a Polymer js file.
As you noticed, Polymer is distributed as HTML files which are consumed with HTML Import links.
A single component would import polymer/polymer-element.html while an app which uses that element would import polymer/polymer.html. Both of them include all the JS code they require.
Why HTML and not JS files? Because HTML import spec prevents a given file to be loaded multiple times unlike the <script> tag.
you only need to import their script file and the declare the class which extends the Ploymer.Element.
and then use the custom tag.
Or you can use the CLI tool they provided to create a project directory

Categories

Resources