my company wants to implement a third party widget into a React app. The third party company gives us a pre ES6 script to embed in 'the footer of your html file.' So
<script>// iife function here // </script>
The widget should show up on every page no matter the route or React re-render of the DOM. In other words, at the highest point of the React app structure. Of course if I try to put the script in App.tsx, there are a million errors because it's pre-ES6 and not typed. Where should something like this go in the app? Is it in index.jsx? Create a module to be imported?
Third party script // iife function here // should be placed on the public folder index.html file. That will load the script globally to all the pages.
Define a typescript module and type it manually if you want, type it as any otherwise
https://www.typescriptlang.org/docs/handbook/modules.html
If the external module exposed by the iife is not relevant to your react project. Feel free to code inside <script> tag in index.html
Related
I am trying to figure out how to add external JS to a React app without adding it to the HTML file in a script tag. The reason for this is that I have one component that needs access to an external script, but I can only access it as a global variable by adding /*global <variabe name>*/ at the top of the component that needs it (as far as I know), which is not ideal.
I'm basically looking for an equivalent to
const someScript = <script type="text/javascript" src="some url"></script>
but in a way that actually works 😀
This script is not needed when the app initially loads and could come in async.
You have to install react script
Use npm install react-script-tag
And Add import which is
‘import ScriptTag from 'react-script-tag';’
And then you can use it
I had a template, that I wanted to convert to React JS components, and I successfully did that. As all of us know, that there are bunch of libraries used in a template. What I first did is, I inserted the .css and .js libraries into the react app through the index.html file, in the public folder of the create-react-app boiler plate. It successfully used the styles and scripts from the inserted .js and .css files. But the problem occurred when I added routing to the react app.
When, I navigate to another route through a link, the component loads, but the required styles and scripts doesn't loads. I don't know what the problem is. I tried to import the scripts and styles to the parent component which is home.js. The styles worked properly, but the libraries used in template are :
bootstrap.min.js,
eva.min.js,
feather.min.js,
jquery.min.js,
jquery-slim.min.js, and
popper.min.js.
On each import of the above libraries, it shows different errors. But as an example, for jquery.min.js it shows the following error :
In public folder add the following code in of the index.html page.
<base href="/">
I've started using webpack in quite a large code base and have been using ES6's import statement to load the required dependencies for each module.
My file structure aims to be component based, with all the pieces specific to a component inside that component's folder. For example, the component file itself, and then templates, stylesheets, services, filters, etc, also specific to that component. Then we may have a generic service folder inside that module for services that are not specific to a particular component. eg:
- my-module
- component-a
- component_a.component.js
- component_a.component.spec.js
- component_a.html
- component_a.scss
- services
- some_service.service.js
main.module.js
main.run.js
main.config.js
My problem is that the main.module.js file is becoming unmaintainable, as I manually import all the required dependencies into this file and then register them into the angular world as required. eg:
import componentA from './component-a/component_a.component';
import someService from './services/some_service.service;
angular
.module('myModule', [])
.component('componentA', componentA)
.service('someService', someService);
You can imagine what this starts to look like when you have 10+ components. I've struggled to find a good solution for this problem, does anyone have any suggestions? Is there a best practice approach here?
I guess, every component/controller/service etc. can connect itself to the app in their own file.
Like you have got a file ome_service.service.js and inside you write:
myApp.service('omeService', function(){
var app = this;
// service stuff
});
So the registration is not in your main.module.js but in every file itself.
Although, you need to expose your app variable to be globally available. With a bundler like webpack this is easily handled. Gene Conroy-Jones wrote a nice post about how to make it possible via webpack here: https://medium.com/#drgenejones/using-webpack-with-legacy-angular-spas-automating-imports-using-require-context-58e0e9cc6e9c
With this approach, every new component would handle its registration on their own, and the central app would not have to carry all those imports.
I am working on a React project. I have a file script.js which I want to use in every component of my application. This script.js has multiple plugins and codes in it. For example, there is a plugin code for portlet (a jquery plugin) in it. Each part of scripts code is used by some components. I want declare this script.js globally and then each component should refer to this script if there is some code relevant to that component.
I have included this script.js in my index.jade file.
script(src="/public/scripts.js")
How should I include it in every component or how should every component refer to it?
At the top of each file you need the methods in, declare each method you need
import {functionName, functionName1, functionName2} from '../folder/filename.jsx'
Then you can use the functions anywhere in that file like this
var number = functionName();
I am trying to build and app using Angular 2 which has several tabs. I want one of these tabs to be as the already created angular 1.3.17 app. More specifically, I want to embed Netflix Vector into one of my tabs. My Angular 2 app is uploaded here (at the moment does nothing) here. Would this be possible?
I don't intend to have any interaction between the Angular 2 components and Angular 1.x. I simply want to embed it.
I also tried the following:
The way to run Netflix Vector is simply doing a gulp build and then running a simple server inside the dist directory.
So, to ease the way of embedding such a large application, I tried to put the dist directory inside my angular 2 component directory and then just modifying the index.html to remove the inclusion of scripts and css. I loaded those scripts and css through my main index.html.
Then I loaded index.html through my angular 2 component. I have made sure that the angular libraries and all other js files are loaded. However, it doesnt seem to work just by providing a ng-app directive inside index.html