I am using React-Router-Dom-6. my public folder structures are:
I have some external javascript libraries for template design in the main public and my index.html is:
<!--=============== scripts ===============-->
<script src="%PUBLIC_URL%/assets/js/jquery.min.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/plugins.js" type="text/babel"></script>
<script src="%PUBLIC_URL%/assets/js/scripts.js" type="text/babel"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
above javascript files are working or loading on the first page when the application gets started. But these libraries are not working when redirecting to another page. at that time route changed but the js files are not loading. I tried many ways but couldn't get the solution. I am using react-router-dom v6 for routing.
You should make use of them in the App.js component, call them with useEffect hook before your render method... this process should work on every route changed
for example:
useEffect(() => {
const script = document.createElement("script");
script.src = "/path/to/jquery.js";
script.async = true;
document.body.appendChild(script);
},[])
or this link should do
https://betterprogramming.pub/4-ways-of-adding-external-js-files-in-reactjs-823f85de3668
Related
I've created an onClick handler in a very simple React function component:
export default function MyButton() {
return (
<button
onClick={() => {
console.log('test');
}}
>
Button
</button>
);
}
Now the weird part: no matter what browser I use, the event is not firing. I've created such a component hundreds of times and everything was good, until now.
For everyone else this code works, as it was intended.
I cannot share the whole project or an example repository. It's really nothing but a simple React app you see everywhere.
What could be the reason for why it's not working on my system?
EDIT:
The error was somehow within yarn. I called webpack-dev-server -d source-map --mode=development for development and I am using "webpack-dev-server": "^4.0.0-beta.0". I think the cache could've gotten corrupted somehow.
To fix it, I removed my output directory and started the script with npm instead of yarn. This way it worked, even when I use yarn again.
I really don't know why this happened. Would be happy to know why.
I also faced the same issue and the reason of the issue (in my case , probably yours ) is HtmlWebpackPlugin, HtmlWebpack Plugin is adding a addition script tag of bundle in head tag of index.html.
my html
<html>
<head>
<title>my-react-app</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
htmlwebpackplugin generated html
<html>
<head>
<title>my-react-app</title>
<script defer src="bundle.js"></script></head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
because of this additional script tag, there was a problem in react (i read a post on reddit regarding to this problem and he also have multiple script of same bundle and he was having the same problem), i solved it by deleting my script tag, but we can use copywebpack plugin to just copy html. Or other solution is to configure htmlwebpackplugin suck a way that it will not inject any addition tags
...
new HtmlWebpackPlugin({
name: "index.html",
inject: false,
template: path.resolve(__dirname, "public/index.html"),
}),
...
Use named function instead of anonymous function. Named functions are very useful for identifying what functions caused errors during development as well as when retrieving logs from your users.
import React from "react";
export default function MyButton() {
const handleChange = () => {
console.log("test");
};
return <button onClick={handleChange}>Button</button>;
}
It is a good practice to name-all-functions for a better developer debugging (and development) experience which anonymous function does not provide.
For more clarification between Named and Anonymous function Learn the benefits of Named vs Anonymous function here
Try typing your function as React.FC.
Create a typescript (tsx) file and use the upcoming code:
import React from "react";
export const MyButton: React.FC = () => {
return (
<button
onClick={() => {
console.log("test");
}}
>
Button
</button>
);
};
Note that using this code, you are typing the component making sure that your function is typed as React.FunctionComponent.
Did you import this in your file, if not then add this tine on top
import React from 'react';
I am working on React.js. I want to know how to integrate tableau with React JS code. If you have any reference let me know
Thanks for Advance
If you want to integrate your Tableau dashboard in your ReactJS application, you can either use the Tableau JavaScript API
Add this inside your Index.html : <script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
and create one component to render the dashboard as per the instructions
here.
OR
use the Tableau-React library.
Add:
<script type="text/javascript" src="https://<tableauurl>/javascripts/api/tableau-2.min.js"></script>
then add:
const { tableau } = window;
const url = "https://<tableau-dashboard-url>/views/testing/map";
const ref = useRef(null)
console.log(ref);
function initViz(){
new tableau.Viz(ref.current, url);
}
useEffect(() => {
initViz();
},[])
And inside return, add below line:
<div ref={ref}></div>
It will work for sure :)
I have an angularjs (version 5) app running in laravels public folder.
angularjs should serve the ui aka frontend. whilst laravels "only" route is the backend api access to the data(base) serving the ui at /api/....
How do I marry both?
My angularjs app resides in /public/ui/ so I currently just have a route in laravel like so:
Route::get('/', function () {
return Redirect::to('/ui/dist');
});
This works partially. It works from within the angularjs app like expected. But when I call anuglarjs routes they will fail to display because of course they don't exist in laravel.
Going with the angularjs tutorial for example:
If I call /ui/dist/heroes it will display a 404 instead of the angularjs app.
Note: Laravels public folder is symlinked to the webroot.
Edit:
I redirect to /ui/dist as I use angulars builder to build its files and these are reflected in the index.html also generated with the builder.
The index.html looks like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ui</title>
<base href="./">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.5cf98968a6d57e778c48.bundle.css" rel="stylesheet"/><!-- the hash changes on every build -->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.2379cc013d19d70a8003.bundle.js"></script> <!-- the hash changes on every build -->
<script type="text/javascript" src="polyfills.ad37cd45a71cb38eee76.bundle.js"></script> <!-- the hash changes on every build -->
<script type="text/javascript" src="main.99c0191843a51dda5d54.bundle.js"></script> <!-- the hash changes on every build -->
</body>
</html>
Here is how you can integrate laravel and angular routing.
In your routes.php, add this route:
Route::get('{slug}', function () {
return view('index');
}); // this will ensure all routes will serve index.php file
Route::get('/', function () {
return view('index');
});
In your index.php of laravel view, add all necessary angular js config and controller like normally you do with angular projects.
Note: for each $http request urls you have to define it in laravel route file.
Now when any url is hit, it will serve the index.php file and then angular routing will serve the correct file.
In order to make the routing systems of Angular (7+) and Laravel (5.8) coexist effectively is to redirect all the 404 errors that Laravel intercepts to the Angular router.
You have to edit the render function in app/Exceptions/Handler.php:
public function render($request, Exception $e)
{
// handle Angular routes
if ($e instanceof \Symfony\Component\HttpKernel\Exception\NotFoundHttpException) {
$url = parse_url($request->url());
$angular_url = $url['scheme'] . '://' . $url['host'] . '/#' . $url['path'];
return response()->redirectTo($angular_url);
}
return parent::render($request, $e);
}
Now, let's say that you want to show a login form using angular navigating to /auth/login. When you hit that route Laravel will kick in, and not recognising the route will then pass the control to the Exception Handler. What we're doing in the render() function is simply tell Laravel to rewrite the URL and redirect to /#/auth/login.
Then, you have to enable to enable HashLocationStrategy in your Angular application, like so:
RouterModule.forRoot(routes, {useHash: true})
Is there default way to apply localization packet globaly to all Application from /extjs/locale/ in ExtJS 4.1 MVC?
Maybe some Ext.Application or Ext.Loader metods/properties?
I don't think so.
You have to load the appropriate file in extjs/locale/
For example(tomcat server),
in index.jsp
You can do something like
<script type="text/javascript" src="extjs/locale/ext-lang-<%=language %>.js"></script>
(You can also load locale file dynamically via JS)
To localizate Built-in Ext JS component, add the following code your app.js:
launch: function() {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "extjs/locale/ext-lang-" + navigator.language;
head.appendChild(script);
}
To localizate custom Ext JS component, use Locale.js.
We have used it in two Ext JS projects. Pretty simple.
I use a lot of script in an application, some of them are not required to load the application, I want to load them just before their use if possible, knowing that my application is coded in ExtJS, and uses many ajax calls
You could look at using LABjs which is a script loader.
Old and busted:
<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script src="init.js"></script>
New hotness:
<script>
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js").wait();
</script>
Update:
If you want to load jQuery you could do something like this from this blog post.
<script type="text/javascript" src="LAB.js">
if (typeof window.jQuery === "undefined") {
$LAB.script("/local/jquery-1.4.min.js");
}
You can load an external file using javascript only when/where you need it:
function LoadJs(url){
var js = document.createElement('script');
js.type = "text/javascript";
js.src = url;
document.body.appendChild(js);
}
LoadJs("/path/to/your/file.js");
Here's a great post on the topic with a proposed solution you might want to check out: http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/