Extremely simple HTML and javascript set up for React.js not working. I followed exactly the instructions on the react website but it is not working. I would appreciate if anyone can see any error.
Below is the HTML code:
<!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">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="file1.js"></script>
</body>
</html>
Even the document.getElementById command is not working as shown in the error message on the screenshot below:
Windows 10 32bit, Visual Studio Code.
I hope this finds you well.
You better use any of the NPM react app creating commands, to create your react app. Like npx create-react-app and it will then have the NPM modules that require you to get that root ID you are trying to get using vanilla/backbone js document.getelementbyid while that is not how the root is called. Using the boiler plate that NPM gives you, you can import react and reactdom then to manipulate that single HTML that react renders to the client.
I hope this is the answer to your question.
Related
I'm starting to learn React from zero, locally without set properly all dependencies, the first thing that I did was to use CDNs in my html file, but now I want to know how can I set my machine to import React and ReactDOM and also how can I link CSS to the file.
when I try to run the .js file I got this:
SyntaxError: Cannot use import statement outside a module
When I was using the CDNs links *ReactDOM.render* was working properly
js file
import { React } from 'react'
import { ReactDOM } from 'react-dom'
function FirstComponent(){
return (<div>
<Header />
<Body1 />
<Footer />
</div>)
}
html file
<!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">
<script src="index.js" type="text/babel"></script>
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
my point is, how could I run a js file with JSX and ReactDOM.render without using CDNs link in html file
Yo could try to use create-react-app
https://create-react-app.dev/
It will setup your app for you.
Once your app is setup, you will be able to "build" your app. When you build your app, the React code becomes part of your JavaScript bundle in your application, so you don't need the CDN anymore.
I've a project builded in NodeJs and what im trying to do is running using pywebview library.
Pywebview allow us to create a server and run the project using a WindowForm..
Example:
index.html
<!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" type="image/x-icon" href="favicon.ico">
<title>Document</title>
</head>
<body>
<div id="tvchart"></div>
</body>
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<script src="index.js"></script>
</html>
app.py
import webview
webview.create_window('App', 'index.html', js_api=None, width=800, height=600, min_size=(200, 100))
webview.start(debug=True,http_server=True)
So, in this case using a simple HTML with some js and his dependecies running app.py, it works perfectly, create a windowform and then show the HTML with all the js function.
But if this project is builded in NodeJs i get some trouble.
Mainly i run a project NodeJs using the command line npm run dev. so the command create a server like localhost/80, but i dont know how to implement NodeJs and pywebview in the same project. Any suggestion?
Below is my reproduce step:
npm install vue#2.x.x
write below code in my main.js file
import Vue from 'vue' new Vue({
el: '#app',
data: {
msg: 'hello,word'
} })
use webpack build it, then it will build a file in dist folder
then I write index.html file
<!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">
<title>Document</title>
</head>
<body>
<div>
<div><span id="app">{{ msg }}</span></div>
</div>
<script src="./dist/main.js"></script>
</body>
</html>
then I open the index.html file in chrome, but it not display 'hello, word', I am a new beginner vue, I can not figure out what it wrong. thanks in advance.
And I alse found that vue delete my dom like above img.
At first, I thought it was because you weren't running the project properly but then I realized that the comment you've pointed to with the red arrow shows that the Webpack server is in fact running.
The problem you're having here it seems, is that you're using the runtime-only build of Vue when you need the runtime + compiler build to compile Vue components that have template blocks or swap the template blocks for render functions.
If you don't use the version with the compiler but your components have template blocks, then they won't compile properly (although normally an error is shown to advise of this).
For instructions on using the full build rather than the runtime-only version, see here.
I am working on a 3D viewer using express.
My problem is that I am trying to require the file system module in one (not the main one) of my JS files. When I try to load the browser, the console gives me the next message:
ReferenceError: require is not defined
My project structure is:
node_module
src
js
app.js // the problem is here
views
index.ejs
server.js
A short example of how to use importing with the browser:
Create index.html with next content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
Check script tag - we set type="module" - this instructs the browser that we are using module system
Create main.js script with:
import name from './name.js';
console.log(name);
Create name.js file:
const name = 'test';
export default name;
Now you need to run this app. The easiest way is to use WebServer For Chrome
Start the application and check the console. You should see that the 'test' is logged.
That's it. Please, keep in mind that this is just an example. We don't touch minification, caching and other important things.
I have a problem when loading jquery on electron.
The problem only exists when on main.js I put
mainWindow.loadURL('http://localhost:3000/menu');
and I send back the menu.html
however, when I use this method Jquery works fine
mainWindow.loadURL('ile://' + __dirname + '/menu.html');
I need it to work using localhost.
This is a known problem. It is because JQuery auto-senses the presence of node.js - Electron adds a node.js context to the browser so JQuery gets confused.
The best approach is to install JQuery via npm, use electron-rebuild then change your html file to look like:
<!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">
<title>My Electron App</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css">
<link href="./node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="helpers/context_menu.js"></script>
<script src="helpers/external_links.js"></script>
</head>
<body>
<div class="container">
<h1 id="greet"></h1>
<p class="subtitle">
Welcome to Electron app running on this magnificent <strong id="platform-info"></strong> machine.
</p>
<p class="subtitle">
You are in <strong id="env-name"></strong> environment.
</p>
<div class="jumbotron">
<h1>Bootstrap Test</h1>
<p>
Some content that should be in a Bootstrap "jumotron" box.
If it isn't, check your html code to make sure that the Bootstrap css is loaded.
Also check the dev console in the app to look for errors.
</p>
</div>
</div>
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="app.js"></script>
</body>
</html>
This is a standard boilerplate but with the special JQuery loader script and app.js loader moved to after that in case you are doing anything in your normal app script that requires jquery - for example, loading Twitter Bootstrap can now be done by using npm to install bootstrap, doing electron-rebuild, then using this in your app.js:
import bootstrap from 'bootstrap';