Hi guys I'm trying to make a jigsaw website using react. I found a library called snapfit.js that can generate simple jigsaws from a png file. The problem is that I need to get this script working in a react component.
Currently I import the snapfit.js file in my index.html and when I open the console in chrome I can see that snapfit got added to the window (snapfit.window). I cant seem to find a way to make use of it in my react component though.
Currently I have:
import * as React from 'react'
import mole from '../assets/mole.png'
import {Helmet} from 'react-helmet'
import Button from 'react-bootstrap/Button'
export class PuzzelSnapfit extends React.Component {
render(){
return (
<div>
<h2>Demonstration</h2>
<div><img src={mole} onLoad={alert(this)} />
</div>
</div>
);
}
}
export default PuzzelSnapfit
I also tried using react-helmet like this:
<div><img src={mole} onLoad={window.snapfit.add(this)} />
When I try executing it that way I get a toUpperCase of undefined error, so it seems that this is undefined. I also tried loading the image into state but then I also get a undefined error.
Any help would be appreciated because I really dont know what else I could try except for maybe injecten a html file into my component but that also has its downsides.
You can import external scripts into your react js files by using the import statement.
example (your file where you want to use snapFitFunction1() and snapFitFunction2()):
import * as React from 'react'
import mole from '../assets/mole.png'
import {Helmet} from 'react-helmet'
import Button from 'react-bootstrap/Button'
import { snapFitFunction1, snapFitFunction2 } from './snapfit.js';
...
In your snapfit.js file, you should have a export statements for snapFitFunction1, and snapFitFunction2.
example (snapfit.js):
function snapFitFunction1() {
console.log('Foo');
}
function snapFitFunction2() {
console.log('Bar');
}
export snapFitFunction1;
export snapFitFunction2;
You may have to add exports for functions you want to use from the snapfit.js file.
You can call the external library in componentDidMount instead of React helmet like this:
const snapJs = (yourScriptPath) => {
const script = document.createElement("script");
script.src = yourScriptPath
script.async = true;
document.body.appendChild(script);
}
componentDidMount () {
snapJs("snapfit.js")
}
If you prefer using React Helmet then this would be the correct way:
import {Helmet} from "react-helmet";
const PuzzelSnapfit = props => (
<div>
<Helmet>
<script src="snapfit.js" type="text/javascript" />
</Helmet>
</div>
);
Related
I tried to install mavonEditor as markdown editor for my latest vue3.js app and also used vite for building vue.js apps.
First of all, I followed the document of mavonEditor, mavon component is not defined.
I installed mavon-editor(v2.10.4) using by npm.
And then, change the main.js like below.
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";
createApp(App).use(mavon).mount("#app");
and I tried to use editor component to App.vue like that.
<template>
<div>
<mavon-editor v-model="value" />
</div>
</template>
<script>
import { ref } from "#vue/reactivity";
export default {
setup() {
const value = ref("its my first mavon editor!");
return { value };
},
};
</script>
Open the browser(Chrome), but any items wasn't show.
Instead of editor, that error occurred in console.
Uncaught ReferenceError: mavon is not defined
I really want to know how to correctly use mavon-editor in Vue3.js.
Does anyone help me, please?
you can add this
app.use(mavonEditor)
and remove mavon from
createApp(App).use(mavon).mount("#app");
hope this help you solve the problem
Hope You are doing great and in good health.
I'm a beginner in React.js and doing my FYP project, I come to a problem where I'm not able to insert external JS or Jquery code inside the react,
I have tried many npm and mentioned processes in StackOverflow, but that not work?
What should I do? where I import these scripts ??
//import all libraries here
import React, { Component } from "react"; //importing react
import $ from "jquery"; // be sure to do npm install jquery
import some_library from "./path/to/some/library"; //importing directly from .js file
class App extends Component {
render() {
return (
...
);
}
}
export default App;
If you want to use, plain JavaScript/JSON to render its relevant DOM, I recommend to go with functional components.
import React from "react";
const example = () => {
return (
<div className="App">
<h1>Hello World</h1>
<h2>This is inside a function</h2>
</div>
);
};
export default function App() {
return example();
}
I have a typical website created with HTML, CSS, Javascript and I'm trying to convert it into react.
I can convert my HTML into JSX pretty easily with an online converter and my CSS is the same, I just have to import it differently.
But now I'm confused about how to link up my javascript files. Because my HTML is now JSX which is in a Javascript file as well.
Normally in html this is all I need to do to link my java script and everything works:
<script type="text/javascript" src="js/main.js"></script>
How would I do this in react such that my JSX will have the same functionality as did my HTML?
Right now whether I try to import it from file location:
import './javascript/main.js'
It doesn't do anything. I'm not getting any errors. My JSX and CSS works fine and all I have for my CSS is (this import works fine):
import './css/main.css'
If it should work, please let me know, it must mean there's an error elsewhere that I have to sort out.
Thanks in advance
I don't think you can import js code on a react app, probably you have to create react-app first, then create its components and add you javascript code within these components, it´s pretty easy, i recomment you to read the documentation of react and see how it works. Hope it helped you.
You can include JavaScript functions inside JSX itself :
import React from 'react';
const Something=()=>{
// Your javascript functions :
return(
<div>
Your Html here
</div>
)
}
export default Something
// Or if You are using Class Component :
import React, { Component } from 'react';
class Something extends Component {
state = { }
// Your Javascript Functions
render() {
return (
<div>
Your HTML goes here
</div>
);
}
}
export default Something;
and if you want to import js file from another location you have to include export in your function:
export const Name=()=> {
}
and import:
import {Name} from '/location';
I am trying to use a html and CSS template on create-react-app. I can convert all of the HTML to JSX without any issues and render the CSS just fine. I cant get the Script tags that home with the template to work though
I think you would write script tags in Reactjs the same way you would in HTML. Like this:
<script src="fooLink.js"></script>
(fooLink.js being any link.)
If you want to go further with React, try looking at this article:
https://reactjs.org/tutorial/tutorial.html
Or post the code you are having trouble with so we can help you.
I am not sure I understand but can't you add the script tags to your index.html file . The one where you have a div (usually) targeted by the render function of ReactDom (render( , document.getElementById('my target div'))
React works with classes (ES6) and functions which are called as
components. you can create one and import the created component in
your jsx (written inside the render() of the component)
//your first component(js)
import React, {Component} from 'react';
class ComponentOne extends React {
render() {
return <div>some text or {value}</div>
}
}
//your second component
import React, {Component} from 'react';
import ComponentOne from 'your path here';
class ComponentTwo extends React {
render() {
return <ComponentOne>;
}
You can learn more from https://reactjs.org/
npm install --save react-script-tag
then
import React, { Component } from 'react';
import ScriptTag from 'react-script-tag';
class Demo extends Component {
render() {
return (<ScriptTag isHydrating={true} type="text/javascript" src="some_script.js" />);
}
}
I am getting a "Can't find variable: React" error in my react native project. But, what baffles me is that I am not at all using React in that file, although, I am importing a custom component which uses it though. Here is a MCVE of my problem.
First up construction.js:
import React from 'react';
import { View, Text } from 'react-native';
class UnderConstruction extends React.Component {
render() {
return (
<View>
<Text style={{ padding: 75 }}>
This page is under construction :(
</Text>
</View>
);
}
}
export default UnderConstruction;
Next up, render.js:
import UnderConstruction from './construction';
export function render() {
return (
<UnderConstruction />
);
}
And lastly, index.ios.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import * as Factory from './render';
class Demo extends React.Component {
render() {
return Factory.render();
}
}
AppRegistry.registerComponent('Demo', () => Demo);
Running this app will cause the error Can't find variable: React on render.js line number 5, which is:
<UnderConstruction />
I found out the problem can be solved by just adding an import statement for React on render.js like:
import React from 'react';
import UnderConstruction from './construction';
...
I am curious as to why should I import React even though I am not using it in render.js, hence this question. So, what causes Can't find variable: React error in my render.js file?
To use render function you need to import React in your file because react creates your elements. I would suggest you go through your transpiled Javascript file once, you will understand what I mean.
I was myself facing this issue sometime back and when I saw the transpiled JS file and I then I saw how it works.
So in your transpiled file it would be something similar to this:-
(0, _reactDom.render)(_react2.default.createElement(_Root2.default, { store: store, history: history }), document.getElementById('app'));