As per https://reactjs.org/docs/add-react-to-a-website.html, you need to add these two lines to your HTML file before importing your script:
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
I’m not sure that module loading is going to work the way you intend without using something like Create React App. You can remove the import statements and you can still reference React and ReactDOM in your script.
e.g.
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// Read the comment ID from a data-* attribute.
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
I Understand you want to create a simple application with React. I would recommend you to read this first https://kentcdodds.com/blog/how-to-react and then this one: https://reactjs.org/tutorial/tutorial.html
A react application can be created by importing script as you have started, but it is not the recommended way to build a react app.
Once you go through the above post, find a good tutorial of your choice on platforms of your choice be it blog or video based. I can name a few like udemy, frontend masters, pluralsight, and there are many more.
Take a look at ReactJS website.
You should create React app using Node package manager
npx create-react-app appName
or should link react scripts to your html
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
Also you can’t redefine document object. This references your web page and you can access to element or DOM (Document Object Model) using document object.
I am new to web development, This is just a simple code i created to test a new text editor I installed, I got this error while trying to import react because I was getting some other errors like; TypeError: Cannot read property ‘createElement’ of undefined
Please, how can i resolve this? is the import statement wrong?
import React, { Fragment } from 'react';
console.log("Testing");
var document;//made this declaration because I got a document undefined error
document.createElement("p"):
const p = document.createElement("p")
p.innerHTML = "This is to test the javascript";
const body = document.querySelector("body");
body.insertBefore(p,body.childNode[-1]);
<!DOCTYPE html>
<html>
<head>
<title>Testing vs code</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h1>Testing the vscode html preview package</h1>
<h2>Hello</h2>
<script type="module" src="js-prac.js"></script>
</body>
</html>
code is not understandable , you are using react js or you want to use simple javascript ?
