I am trying to run a separate file with React.js code.
But when I am trying to run the file it does not work. The page is just a blank. If I do every in the HTML file in-line scripting it works just fine.
I want to have my html file like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React - Projekt</title>
<script src="../../js/react.min.js"></script>
<script src="../../js/react-dom.min.js"></script>
<script src="../../js/browser.min.js"></script>
<script src="../../js/albums.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel" src="script.js"></script>
</body>
</html>
and my js file:
var Albums = React.createClass({
render: function() {
return (
<div className="albums">
{this.state.albums.map(function(album, index) {
return (
<Album
album={album}
onClick={this.removeAlbum.bind(this, index)}
/>
)
}, this)}
</div>
)
}
});
// Rendera the shit innehåll
ReactDOM.render(
<Albums />,
document.getElementById("container")
);
Is there a way to make this work?
You need to load babel core Browser to load your script.js as text/babel
It will read your script.js and transform to JSX. Insert this after react-dom
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
Related
I'm learning React. I added them to my website with html script tag:
My 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">
<title>MyWebsitewithReact</title>
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#2e2e2e">
</head>
<body>
<div class="navbar">
Home
Plugins
</div>
<div id="root"></div>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
My index.js:
'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
This is the error I get :
Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
I have tried to visit and the error is:
createRoot(...): Target container is not a DOM element
I checked the documentation and everything seems fine
EDIT:
first in your file index.js you need to add in first line:
import React from 'react';
import ReactDOM from 'react-dom/client';
because without imported these library you can't use elements of React and ReactDOOM.
and in your index.html you need to replace this:
<script src="js/index.js"></script>
to this:
<script src="js/index.js" type="text/babel" data-type="module"></script>
I wish I solved your problem.
I want JSX Intellisense in Visual Studio Code in HTML files, right inside the <script> tag. Currently, I can't figure out a way to do so.
Here's my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working with forms - Project 2</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
function App() {
return <React.Fragment>
<h1>Working with forms - Project 2</h1>
</React.Fragment>
}
ReactDOM.render(<App/>, document.getElementById('root'));
</script>
</body>
</html>
I can't see why my page isn't loading what's in the <h1> tag in my index.js file. I'm trying to make a practice app with ReactJS but it won't even let me get started. I've tried many things to rectify this but fell short every single time hence why I'm here.
Here's my index.html
<!DOCTYPE html>
<html>
<title>Lamda</title>
<marquee>Welcome to Lamda!</marquee>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable = yes">
<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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
</head>
<body>
<div id="LamdaPage"></div>
</body>
<script type="text/babel" src="index.js"></script>
</html>
Here's my index.js
var LamdaPage = React.createClass({
render: function () {
<div>
<h1>Why won't this show?</h1>
</div>
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
You should note that a function must return value. In this case, render function must return value as HTML which you are putting as body of function
var LamdaPage = React.createClass({
render: function () {
return (<div>
<h1>Why won't this show?</h1>
</div>);
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
I'm connected to my server via npm install -g http-server on Terminal, that's working fine. I just want to see if my h1 tag works so I can proceed to making a practice website. I feel like my mainPage.html may be a little off.
Here's my mainPage.html file:
<!DOCTYPE html>
<html>
<head>
<title>Testing</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">
<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>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" src="mainPage.js"></script>
</script>
</html>
Here's my mainPage.js file:
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
You need to import babel.js, react and reactDOM
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
Include the reference of react, react-dom and babel, Check this working code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" >
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var GoodbyeWorld = React.createClass({
render: function() {
return (
<div>
GoodBye World
</div>
);
}
});
var HelloWorld = React.createClass({
render: function() {
return (
<div>
Hello World
<GoodbyeWorld />
</div>);
}
});
ReactDOM.render(
<HelloWorld />,
document.getElementById('example')
);
</script>
</body>
</html>
Output:
Hello World
GoodBye world
When I cut and paste my var GoodbyeWorld into an external javascript file(saved in the same folder called goodbye.js) and change my code to the following, I do not get the desired output:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script src="goodbye.js" type="text/babel"></script>
<script type="text/babel>
var HelloWorld = React.createClass({
render: function () {
return (
<div>
Hello World
<GoodbyeWorld />
</div>);
}
});
ReactDOM.render(<HelloWorld />, document.getElementById('example'));
</script>
</body>
</html>
Is there another way for my inline script that has react code to know that the code it has to call is in a external javascript?
Thank you
You have to expose the GoodbyeWorld var in the end of the goodbye.js file:
window.GoodbyeWorld = GoodbyeWorld;
It happens because browser babel transpiler uses the "use strict;", which enforces private scoping.
Anyway, babel browser and text/babel are just for testing purposes. I suggest using webpack with babel transpiler (to compile and bundle your js files before deploying or in the fly with "hot" reload) and the import/require pattern for modularity.