I am pretty new to ReactJS and I am doing some experiment to learn it more properly. Currently, I am converting a html/css/javascript template into ReactJS. What I previously used to do is to simply put the external css and js files in the index.html file itself, like this:-
<head>
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/boxicons.css"/>
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/fontawesome.css"/>
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/admin-template/assets/vendor/fonts/flag-icons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
<script src="%PUBLIC_URL%/admin-template/assets/vendor/js/script1.js"></script>
<script src="%PUBLIC_URL%/admin-template/assets/vendor/js/script2.js"></script>
</body>
But then I realize two things:-
- It is not the right thing to do.
- If I have to use multiple templates, like one for the admin panel
and one for the front end side, I can simply put all the css, js,
etc. in the index.html like this. Since ReactJS is a single page
application, there is a high chance that putting all css, js, etc.
in the index.html file will cause a major clash/conflict among the
external files.
So I discovered this approach.
import { useEffect } from 'react';
function PreLoginHeaderScript() {
useEffect(() => {
var baseUrl = process.env.REACT_APP_PUBLIC_URL;
// CSS //
const cssBoxIcon = document.createElement('link');
cssBoxIcon.id = 'boxicon-css';
cssBoxIcon.href = baseUrl + 'admin-template/assets/vendor/fonts/boxicons.css';
cssBoxIcon.rel = 'stylesheet';
cssBoxIcon.type = 'text/css';
// Scripts //
const scriptHelper = document.createElement('script');
scriptHelper.id = 'helper-script';
scriptHelper.src = baseUrl + 'admin-template/assets/vendor/js/helpers.js';
scriptHelper.async = true;
if (!document.getElementById('boxicon-css')) {
// loading css in the head
document.head.appendChild(cssBoxIcon);
}
if (!document.getElementById('helper-script')) {
// loading script at the end of the body
document.body.appendChild(scriptHelper);
}
}, []);
}
export default PreLoginHeaderScript;
This approach is working like a charm. The result is like this:-
<head>
---------------------
---------------------
<link rel="stylesheet" type="text/css" href="http://localhost:5052/admin-template/assets/vendor/fonts/boxicons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
<script src="http://localhost:5052/admin-template/assets/vendor/js/helpers.js"></script>
</body>
However, I want to make it more refined by using the stack/push concept of Laravel in it. In laravel, one can declare stacks like this:-
<head>
---------------------
---------------------
<link rel="stylesheet" type="text/css" href="{{asset('admin-template/assets/vendor/fonts/boxicons.css')}}"/>
@stack('css')
</head>
<body>
---------------------
---------------------
---------------------
---------------------
<script src="{{asset('admin-template/assets/vendor/js/helpers.js')}}"></script>
@stack('script')
</body>
Now if someone wants to push external css files in the stack ‘css’, he just need to use the LOC like this:-
@push('css')
<link rel="stylesheet" type="text/css" href="{{asset('admin-template/assets/vendor/fonts/flagicons.css')}}"/>
@endpush
Similarly, to put external javascript file, one can do like this
@push('script')
<script src="{{asset('admin-template/assets/vendor/js/misc.js')}}"></script>
@endpush
As such, the resultant html comes like this:-
<head>
---------------------
---------------------
<link rel="stylesheet" type="text/css" href="http://localhost/test-laravel/admin-template/assets/vendor/fonts/boxicons.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/test-laravel/admin-template/assets/vendor/fonts/flagicons.css"/>
</head>
<body>
---------------------
---------------------
---------------------
---------------------
<script src="http://localhost/test-laravel/admin-template/assets/vendor/js/helpers.js"></script>
<script src="http://localhost/test-laravel/admin-template/assets/vendor/js/misc.js"></script>
</body>
The difference is that in document.head.appendChild(cssBoxIcon);
or document.body.appendChild(scriptHelper);
the css/scripts are appended just before the ending of the or tags. But the Laravel stack/push method allows one to push css or scripts at any position where the stack with the provided name has been defined.
How can I do this in ReactJS?