I'm starting out with ReactJS & I want this simple image to appear on my practice web app but it isn't appearing. I thought my logic was correct but I guess not.
Here's my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
</head>
<body>
<div id="firstBar"></div>
<div id="body"></div>
<script type="text/babel" src="index.js"></script>
<script type="text/babel" src="body.js"></script>
</body>
</html>
Here's my body.js file:
import myPic from 'pictures/myPic.JPG' // myPic.JPG is in my pictures folder.
var Body = React.createClass({
render: function() {
return(
<img src={myPic}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
Error I'm getting is:
`Uncaught ReferenceError: require is not defined
at eval (eval at transform.run (browser.js:4613), <anonymous>:6:25)
at Function.transform.run (browser.js:4613)
at exec (browser.js:4649)
at browser.js:4661
at XMLHttpRequest.xhr.onreadystatechange (browser.js:4632)`
require/import might not be supported in the browser
Try this:
var Body = React.createClass({
render: function() {
return(
<img src={"./pictures/myPic.JPG"}></img>
);
}
});
ReactDOM.render(<Body />, document.getElementById('body'));
Related
Hi I am currently learning Vue.js and I have an issue with it, I am calling Vue using a CDN.
I have followed instructions but it does not seem to be recognising that Vue exists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
</html>
This is the simple js file It does not output the code from the Vue object.
Would really appreciate any help on this.
const app = vue.createApp({
data () {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
It should be Vue.createApp instead of vue.createApp.
Working Fiddle
const app = Vue.createApp({
data() {
return {
coarseGoal: 'This is the best',
};
}
});
app.mount('#user-goal');
<title>Vue Basics</title>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#3"></script>
<body>
<header>
<h1>Vue Course Goals</h1>
</header>
<section id="user-goal">
<h2>My Course Goal</h2>
<p>{{coarseGoal}}</p>
</section>
</body>
I bought html template. When I try to use it on react project, some of function not working. One of it owl carousel. owl.js template file dynamically adding divs and styling them. This section working on html page but not on react. I do not get any error from console.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aaa</title>
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/style.css" rel="stylesheet"/>
<link href="assets/css/responsive.css" rel="stylesheet"/>
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0">
</head>
<body>
<div id="root"></div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/jquery.fancybox.js"></script>
<script src="assets/js/owl.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/isotope.js"></script>
<script src="assets/js/mixitup.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/map-script.js"></script>
</body>
</html>
With React your public files, such as JavaScript files, should be in a folder called 'public' in your React app, then in the index.html this should be denoted by '%PUBLIC_URL%'.
So in other words, move your assets folder to a folder called public and add '%PUBLIC_URL%/' before the paths for your files.
After 4 hour i found solition for my problem. It is define script links on component instead of index.html. Hope this post helps more people
import '../assets/css/bootstrap.css';
import '../assets/css/style.css';
import '../assets/css/responsive.css';
import React,{ useEffect } from 'react';
import { Helmet } from 'react-helmet';
const useScript = (src) => {
useEffect(() => {
const tag = document.createElement('script');
tag.async = true;
tag.src = src;
document.body.appendChild(tag);
return () => {
document.body.removeChild(tag);
}
}, [src])
}
export function Home(){
useScript('./assets/js/jquery.js');
useScript('./assets/js/bootstrap.min.js');
useScript('./assets/js/popper.min.js');
useScript('./assets/js/jquery-ui.js');
useScript('./assets/js/jquery.fancybox.js');
return(
<div>
<Helmet>
<title>{model.Title}</title>
<meta name="description" content={model.Desc}/>
<meta name="keywords" content={model.Keys}/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-
scale=1.0, user-scalable=0"></meta>
</Helmet>
.......
</div>
)
}
I have my SVG embetted in HTML
<object onclick='showStreet()' id="svg-object" data="svg/hamburg.svg" type="image/svg+xml" style="width: 300px"></object>
I tried with JS and ended up with jQuery .ready to be sure, I load svg before executing JS on it. Also, I put my script in the beginning of the page, so it "loads" before svg does. But nothing helps ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zimmerangebote - 2live 2gether</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--FÜR SVG-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/*GOOGLE FONT*/
#import url('https://fonts.googleapis.com/css2?family=Oswald:wght#200;300;400;500&display=swap');
</style>
<script type="text/javascript">
$('#svg-object').ready(function(){
var street = $('path').get();
console.log(street);
});
function showStreet() {
swal("Angebot-ID: 8426 PLZ: 20146 teilmöbliertes Zimmer, 23 m2 Frei ab: 01.01.2020 Nebenkosten: 40 Euro");
}
</script>
</head>
console returns the following, no matter what I select: path , class or id.
I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!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"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!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" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.
I have very simple code
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
</head>
<body>
asdfasdf
{{1+2}}
</body>
</html>
and I'm pretty sure everything is pointing to the right directory. My app.js is:
( function () {
var app = angular.module( 'app' , [] );
}) ();
However, opening index.html on localhost all I can see is a blank page but when I delete the lines
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
I get a page that says "asdfasdf {{1+2}}" How can I get angular working? Is there a big mistake I'm making somewhere?
Script tags must have an end tag. They cannot be self-terminating.
<script type="text/javascript" src="assets/js/app.js"></script>