I want to use a 3rd library only for my homepage in a React application. The problem is : the library is developed with Jquery : www.npmjs.com/package/fullview
I need to import : Jquery, js file and css file.
so far, I haven't found any way to import this type of library into a functionnal component. Only class components.
Can I import these files directly in index.html with or i need to import them in my component with import ... from "..."
Thank you !
You can add jquery CDN in your public/index.html like this:
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
crossorigin="anonymous"
></script>
</body>
</html>
no need to import jquery in component or something else now jquery is avalible golobally.
Related
I am trying to display a simple form using react but I get the error "Target container is not a DOM element" despite the fact that the root element is definitely a DOM element as I have check using console.
edit : Importing form 'react-dom' and using 'render' works fine but I cannot seem to get it work other wise
Here is the form component
import React from 'react';
export default function StudentForm()
{
return (
<form>
//some stuff
</form>
)
}
My index file
import ReactDOM from 'react-dom/client';
import './index.css';
import StudentForm from './App';
const root = document.getElementById('root');
ReactDOM.createRoot(<StudentForm/>,root);
Here is my index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I guess you don't have a element with id root in your index.html, please add the following tag in your index.html,
<div id="root" />
try this:
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<StudentForm />
</React.StrictMode>
)
You need to add your main or index script to HTML.
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
I am using Ionic React Project. I need to run my built project by just tapping the index.html file after project build. I built my project by ionic build command and then i tried to run my project by tapping index.html file, getting the given error
bootstrap:149 GET file:///D:/static/js/7.9625986e.chunk.js net::ERR_FILE_NOT_FOUND.
screenshot of the errors got and my index.html file.
Here is my index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport"
content="viewport-fit=cover,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Ionic App" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="/static/css/4.672a8906.chunk.css" rel="stylesheet">
<link href="/static/css/main.c51b18ec.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="/static/js/runtime-main.22560124.js"></script>
<script src="/static/js/4.1beb7418.chunk.js"></script>
<script src="/static/js/main.eec4b2ea.chunk.js"></script>
</body>
</html>
I am a complete beginner and I would like to add a text box
-eventually I would have buttons with logic characters that would show up in the textbox as I click them).
Should this be a component?
Do I make it via index.html or index.js? None?
I am quite lost and all of my attempts have led to nothing. I assume the only useful code I can provide is my index.html, so here it is. This is basically the default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Kirk Logic Tool</title>
</head>
<h1>Kirk Logic Tool</h1>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Thank you for any responses, as a learner I really appreciate all who take the time to respond :)
You would create another JS file with a class that extends React.Component and use render(<MyComponent/>, document.getElementById('root')). Here's an example:
class MyComponent extends React.Component {
render() {
return <input type="text"/>
}
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('root')
);
i am creating a weather app in react which shows the weather forcast in a graph using the api but i am getting an error plotly is undefined although i have pasted cdn of plotly in my index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
plot.js
import React, { Component } from 'react'
export class Plot extends Component {
drawPlot = () => {
Plotly.newPlot('plot',[{
x:this.props.xData,
y:this.props.yData,
type: this.props.type
}],
Because it is undefined in your global scope, try to console Plotly object outside of the component.
If you're using Webpack for bundling try to install Plotly as an NPM package.
Then import it to your project with ES6 import
It is undefined in the global scope, install plotly by npm.
npm install plotly.js
And import it in your as
import Plotly from 'plotly.js';
GitHub Reference
Install "plotly.js-dist" package from npm npm install plotly.js-dist and than import Plotly from "plotly.js-dist"; in Plot.js component
Installed node_modules and added faceapp.js as a dependency. Trying to use faceapp.js but didn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/faceapp/bin/faceapp.js"></script>
<script src="assets/js/script.js"></script>
</head>
<body>
<h1 class="text-center">Faceapp</h1>
</body>
</html>
Javascript
const faceapp = require('faceapp');
let image = await faceapp.process('assets/images/ajith.jpg', 'smile_2');
Seems like you're trying to add an npm module to a static web. You'll need to bundle the script and required modules that you're using first and include the bundled script to your static html.
I recommend looking at browserify or webpack on how to do so.