I have started to build a demo project after learning React from some online tutorials.
Please consider the line of code below from a ReactComponent.
ReactDOM.render(<Home/>, document.getElementById('container'));
This renders the React component Home at the target DOM element container. All the tutorials online showed that this renders it in some index.html file. How does the code know, in which HTML(document) file to find the DOM element container. Below is the screenshot of the error I am getting.
Below is my index.html which is the default one from scaffolding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
With React, as all JavaScript, it's loaded into the file via an HTML file (i.e., the HTML file comes first). Your JavaScript is usually imported with a <script> tag. It's that HTML file currently open in the browser that it should look in.
So, you should have something like this for your HTML file, which you open in the browser:
<!DOCTYPE html>
<head>
<script src="./src/Home.js"></script>
<body>
<div id="container"></div>
Opening that, assuming the JS path is correct, should work fine.
Related
I am getting this error
TypeError: Cannot read properties of undefined (reading 'UDFCompatibleDatafeed')
Import these two script in index.html /public folder
<script src="%PUBLIC_URL%/datafeeds/udf/dist/polyfills.js"></script>
<script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js"></script>
i deleted my project and cloned their project and then i followed those mention steps then its run
i figured out the problem later
so in our on project i we missed two script in index.html then it will give this error on running so clone the project and then follow the mention step for your specific framework or library
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="%PUBLIC_URL%/datafeeds/udf/dist/polyfills.js"></script>
<script src="%PUBLIC_URL%/datafeeds/udf/dist/bundle.js"></script>
<title>Charting Library React Demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
I want to use javascript simple component in React.
for example wavesurfer.js
It is easy to use, if you don't use react.
<head>
<script src="https://unpkg.com/wavesurfer.js"></script>
</head>
<script>
let wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
</script>
<html>
<div id="waveform"></div>
</html>
It works well only this code.
So,I try to do the same thing in React.
I put <script src="https://unpkg.com/wavesurfer.js"></script>
in public/index.html
and then made class.
class Waveform extends Component {
componentDidMount(){
let wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});}
render() {
return (
<div id="waveform"></div>
);
}
};
However, it shows error
'WaveSurfer' is not defined no-undef
In my understanding, wavesurfer.js is read from CDN in head
Why WaveSurfer class is not found??
my 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" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<script src="https://unpkg.com/wavesurfer.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
I would advise you to do a var require instead :
var WaveSurfer = require('wavesurfer.js')
Maybe it could be more efficient than the unpkg script
Who must have crashed the extraction of the package and who could not load it.
It can only be an error coming from the loading of the library which could not be carried out.
You can use node js or yarn in particular to install this library.
npm install wavesurfer.js --save
# or
yarn add wavesurfer.js
Then simply import the library and use it as you see fit with the available variables :
import WaveSurfer from 'wavesurfer.js';
var WaveSurfer = require('wavesurfer.js');
define(['WaveSurfer'], function(WaveSurfer) {
// ... code
});
If that didn't really help you, please re-read the API site below, hoping it was a great help.
https://wavesurfer-js.org/api/
This looks like a typescript (possibly other linter error). You need to disable the no-undef rule for this line. There is no way the parser can know at design/compile-time that this will be a defined at runtime when the page renders.
That error is from an eslint rule. Add a comment above the relevant line: // eslint-disable-next-line no-undef, or add it to your globals in your eslint config. It's not breaking your app, just breaking the linting.
My recommendation to you is simple. Install the NPM package. Will save you a lot of time.
I'm learning React, and I was watching a tutorial in YT (https://youtu.be/7MmncixTZOo), the thing is that I'm just trying to print a text in my main file but doesn't work (the screen remains blank).
This is my package.json (to check versions, I think React syntax is updated, can be?)
I just deleted all the files in the "src" folder and created these two ("index.js" and "App.js").
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.querySelectorAll('#root'));
App.js
import React from 'react';
const App = () => {
return <div>App</div>
};
export default App;
I get this error:
(I know that the error gives it because there is not created the element ID "root", but if I believe it, my screen is blank and it doesn't print the text "App").
Can someone lend me a hand?
Thanks a lot of!!!
Cheers.
EDIT: This is my 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" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Inside your index.html file in your public folder you should have a code like this <div id='root'></div> where root targets your unique div element.
And in your index.js file you should not call a collection with document.querySelectorAll('#root') because it returns a collection even if only one occurence matches the selector.
Use instead document.querySelector('#root') to target the first selector that is found.
Technically speaking you can event change the id property name into mammy inside your index.html file like this <div id='mammy'></div>.As it mammy in your index.js it will be document.querySelector('#mammy').It just to help you understand how things really work
I hope that it helped
You have used
document.querySelectorAll
that will return a collection of elements not an element.
You need to use:
document.getElementById('root')
None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.
I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.