Develop Reference

How to import JS in React.js

I downloaded a template and put all the CSS in a folder and imported it into the App.js file, and now I want to import the JavaScript files, but it gives an error, I even used / * global jQuery * / and put it in the index.js file. but it still gives an error
Is it possible to import JS file at all? If so, thank you for your reply
Error image:Error Text
UPDATE
in App.js
import './App.css';
import './dist/css/adminlte.min.css';
import './dist/css/bootstrap-rtl.min.css';
import './dist/css/custom-style.css';
import './plugins/font-awesome/css/font-awesome.min.css';
import 'jquery';
import jQuery from 'jquery';
import $ from 'jquery';
import './dist/js/adminlte.js';

You can generally just import your JS Files like any other React Component.
JS: export function myfunc(){return "Your JS stuff here")
React: import {myfunc} from "wherever"

Why the order of webpacker compiled pack is not mantained? And so the function is not defined

I've a Rails app with webpacker for js & css
I have my admin.js file
import Rails from 'rails-ujs';
import Turbolinks from 'turbolinks';
import 'jquery';
Rails.start();
Turbolinks.start();
import '../admin/styles/app.scss';
// load all images
import '../admin/images/init.js.erb';
// load all fonts
import 'typeface-roboto';
import 'typeface-poppins';
// Theme Vendors
import 'bootstrap/dist/js/bootstrap';
import 'sticky-js/dist/sticky.min';
// init global theme javascript
import '../src/admin/framework/lib/util.js';
import '../src/admin/framework/lib/app.js';
// init global user javascript
import '../admin/global/init';
// init page specific javascript
import '../admin/page_specific/admin_home_index';
import '../admin/page_specific/admin_users_index';
import '../admin/page_specific/admin_products_index';
I need to load Sticky-js before the app init, but in console I have
app.js:130 Uncaught ReferenceError: Sticky is not defined
at _initSticky (app.js:130)
If I open the javascript compiled by webpacker my Sticky JS vendor script is at the end of the file, and I cannot understand why. I can move it on every position but is is always at the end.
Why?

Automatically import modules with the same file suffix

I am currently setting up my Redux store and importing many different reducer files. This is beginning to look messy and wanted to know if there was a way to import all modules with the same file suffix. So currently...
import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;
Is there a way that I can import all 'reducer.js' files instead of manually import each module separately when each of the file paths is different?

As written in the duplicate question:
If you create an extra file reducers.js, with this definition:
import reducerOne from '../fileOne/one.reducer.js;
import reducerTwo from '../fileTwo/two.reducer.js;
import reducerThree from '../pathThree/fileThree/three.reducer.js;
import reducerFour from '../four.reducer.js;
import reducerFive from './five.reducer.js;
import reducerSix from '../longPathSix/pathSix/fileSix/six.reducer.js;
import reducerSeven from '../pathSeven/seven.reducer.js;
export {
reducerOne,
reducerTwo,
reducerThree,
reducerFour,
reducerFive,
reducerSix,
reducerSeven
};
Then you can use this in your main file:
import { reducerOne, reducerTwo, reducerThree, reducerFour, reducerFive, reducerSix, reducerSeven } from '../reducers.js';
You basically 'bundle' all your reducers into one file with only one path. And since it's very few syntax, automating it to create such a file is trivial.

How to get values from a JSP and inject them into the Angular 5 component (main.ts)

In a specific project framework, we use WCM Jahia to integrate our Angular 5 modules to display them in the various pages of the site.
The WCM jahia properties that we must recover to integrate them and use them in our modules Angular 5, it consists in recovering a list of key/value of some data.
We managed to code this solution for the moment, and it works (Except on IE9):
file_name.jsp
<script type="text/javascript" src="...../dist/polyfills.bundle.js"> </script>
<script type="text/javascript" src="...../dist/vendor.bundle.js"> </script>
<script type="text/javascript" src="...../dist/main.bundle.js"> </script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var myProperties = {
//For example
codes: "codes",
labels: "labels"
};
window.run(myProperties);
});
</script>
<app-myApp></app-myApp>
main.ts
window['run'] = (myProperties) => {
platformBrowserDynamic([
{
provide: 'myProperties',
useValue: myProperties
},
...
])
.bootstrapModule(AppModule)
.catch(err => console.log(err));
};
The problem is that this solution does not work if we use IE9 (We don't get to bootstrap the Angular 5 application) because of window['run']...
The question is, is there another way to retrieve a list of variable/value form a JAHIA Jsp and inject it into the provide before bootstrapModule Angular?

After some research and a few drops of sweat, the solution is finally found.
This consists of just uncommenting a part of the polyfills.ts file that relates to the IE9, IE10 and IE11 browsers.
polyfills.ts
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
I hope this can help someone in the same case.

react-create-app how to import external jquery and bootstrap?

I created a react app using react-create-app. Now I am not able to import external js and bootstrap files.
index.js
import './assets/css/style.css';
import './assets/css/bootstrap-social.css';
import './assets/css/bootstrap.css';
import './assets/css/responsive.css';
import './assets/css/theme-default.css';
import './assets/css/jquery-ui.css';
import './assets/css/main.css';
import './assets/css/font-awesome.css';
// const $ = require('./assets/js/jquery.min.js');
// global.jQuery = $
// const app = require('./assets/js/bootstrap.min.js');
I have purchased s theme. Not I want to install external jquery and bootstrap. Note: css import working fine.