Hi guys I've been trying to learn React with their tutorial online. I copy and pasted the code into Visual Studio Code and when ever I run demo.html, the page is blank. I got to the console and find that their is a syntax error " Uncaught SyntaxError: expected expression, got '<' " How can this be if I've just done a copy and paste job? I don't know if it could be something to do with the javascript being in a separate file?
I get the concepts behind this code but I can't see to figure out why it's working.
Any help if much appreciated!
Here is the script called test.js
function Welcome(props) { return <h1> Hello {props.name} </h1>;
}
const element = <Welcome name="Sara" />;ReactDOM.render(
element,
document.getElementById('root')
);
And here is demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- We will put our React component inside this div. -->
<div id='root'></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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="test.js"></script>
</body>
</html>
If you are developing React project. It is always a best practice and recommended by React team to
use CLI and get rid of all these script tags inclusion. Read React docs
You have to set Babel also to compile JSX. For that, you have to include it
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
and add type attribute to the script tag
type="text/babel"
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<!-- We will put our React component inside this div. -->
<div id='root'></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<!-- Load our React component. -->
<script src="test.js" type="text/babel"></script>
</body>
</html>
React uses a special file type called JSX which allows you to include HTML like syntax in Javascript. In order to parse JSX files you need to setup a react project.
The simplest way to do so is to use the Javascript library Create React App.
To use that install NodeJS and then execute npx create-react-app my-app to get some boiler plate code.
You can then navigate into the newly created react project using cd my-app and start it using npm start. This will start a server on port 3000. You can then navigate to http://localhost:3000 to view your react application.
You can configure the react project to start and debug it through VSCode as outlined here Configure the debugger.
Related
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.
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 am trying to integrate Chess.js and Chessboard.js but I am having some problems along the process. I have downloaded successfully Chessboard.js, unzipped the folder and within it I created a file called index.html that looks like the following:
<html>
<head>
<title>Chess Match</title>
<link rel="stylesheet" href="css/chessboard-0.3.0.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/chessboard-0.3.0.min.js"></script>
</head>
<body>
<div id="board" style="width: 400px"></div>
<script type="text/javascript">
var board = ChessBoard('board');
</script>
</body>
</html>
This proves that the library is working properly. Now I would like to integrate the Chess.js library in order to play a random match as described in this integration page.
How can I do that?
First I need to install Chess.js so I download the repo and I put the chess.js and chess.min.js files inside the js folder, but I am not sure of how should I proceed from here. Do you have any idea?
Add
<script src="js/chess.js"></script> into your file.
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.
I've installed searchkit (https://github.com/searchkit/searchkit) and have been trying to just get a basic webpage to show something. I have very little experience with Javascript and web development in general and would appreciate some help and guidance.
I installed SearchKit via bower and then simply copied out the bundle.js and theme.css into my project, just to see it work.
I have the following directory structure:
appHome/
index.html
js/
searchkitbundle.js
bundle.js
css/
theme.css
I copied bundle.js and theme.css from the release directory of the bower installation. I copied searchkitbundle.js from the from the live editor on SearchKit's docs website (http://docs.searchkit.co/stable/docs/setup/project-setup.html).
Here is my index.html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/searchkit/0.10.0/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/searchkit/0.10.0/theme.css">
<title>JSP Page</title>
</head>
<body>
<script type="text/javascript" src="js/bundle.js"></script>
<div id="app">
<div class="search">
<div class="search__query">
<SearchBox/>
</div>
</div>
</div>
</body>
I have tried changing this in a variety of ways but can't get it to work. It worked once, but I can't seem to get it to do so again.
I don't see any errors, either in the browser or in my IDE. I'm deploying this locally as well as another copy of it within a Tomcat JSP application.
Can anyone see what I'm doing wrong here and get it to work?