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();
Related
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
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'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 want to do some conditional operations inside my angularjs application for different versions of my app. How do I import the version property of my bower/package.json file from my Angular app locally.
I seem to get module not founderror when trying to import the json file (actually anything that's not .ts file). I am not planning to use $http.get(..) to read the json file asynchronously nor installing node/express packages to use require module.
I want to simply use the ES6 or SystemJS module loader for doing this task. Thank you :)
Solution in AngularJS Controller:
var appVersion = require('electron').remote.app.getVersion();
I now, use angularJS, requireJS, bootstrap to structure my project.Just like the title.Because of all router configured in app.js can make this file be so large and difficult to maintain in the future.So is existing some solution to solve it?Thanks.
Yes, definitely. We actually have a routing config file in each section of our site. It keeps it a lot more organized.
In the JS file you want to configure it you will just need to get a reference to your angular module and chain your config file off it. This is done by simply writing our your module as you would without the dependency brackets like this:
angular.module('myApp').config('configForThisRoute',function($stateProvider){
//define your states as usual
}
You can add your angularjs configuration in any .js file or you can give any name of file, but this file must be included first in html.