I was watching tutorials on React and tried copying an example, but for some reason nothing that I attempt is working. Here's the simple code:
index.html:
!DOCTYPE html>
<head>
<title>React Stuff</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="index.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>, document.getElementById('root'));
I installed react using npm install react react-dom and attempted to open the .html file, but nothing appears on the screen. I also tried moving the script to the or even putting it inside the <script>, but none of that worked.
Some of the features here rely on build tools to precompile the code as they are not natively supported.
For example jsx (HTML like syntax directly in JavaScript) would be compiled with Babel .
node_module package imports import React from 'react' without needing to reference the full url import React from '/node_modules/react/index.js' needs to be compiled with webpack (or a similar tool).
create-react-app is a great way to get started with all the required setup.
ReactDOM.render(<ul>
<li>Hello!</li>
<li>This is a</li>
<li>React practice!</li>
</ul>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
This works here. Can you reproduce your error in your question?
Does your project have a package.json?
If so does it have scripts, specifically a start script?
Then you need enter 'npm run start' in your console to compile the code and it should launch on localhost:3000.
Try following create-react-app
Related
getting unexpected token error while running react code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<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>
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<h1>Hello, world!</h1>);
</script>
</body>
</html>
[React official website][1]
I am trying to run react code from the official react website but getting unexpected token error,
You need Babel to use JSX. Just add this tag to your page:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Now you can use JSX in any tag by adding type="text/babel" attribute to it.
This approach is fine for learning and creating simple demos. However, it makes your website slow and isn’t suitable for production. For production you should install Babel using NPM:
Go to your project folder in the terminal, and paste these two commands:
Step 1: Run npm init -y
Step 2: Run npm install babel-cli#6 babel-preset-react-app#3
The only requirement is to have Node.js installed on your computer.
I am developing a web app using the React CDN. In a .js file that defines a React component using JSX, I am trying to use the JSX <img> element to render an image from a local image file. Unfortunately, the image is not displaying.
In the <body> of my index.html, I have the following:
<div id="coursesModeTab"></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="scripts/coursesMode.js" type="text/babel"
data-plugins="transform-modules-umd"
data-presets="react" data-type="module">
Then, in coursesMode.js, I have the following:
import ssLogo from "./images/sslogo2.png";
function Logo() {
return <img className="mode-page-icon" src={ssLogo} alt="SpeedScore logo"/>
}
const coursesDiv = ReactDOM.createRoot(document.getElementById('coursesModeTab'));
coursesDiv.render(<Logo />);
Thanks to this related StackOverflow post, I was able to eliminate all console errors related to not being able to use import statements in my coursesMode.js file. However, the image still does not display! Instead, I see
when the app attempts to render the image. I can confirm that images/sslogo2.png exists in my project. I have also tried putting sslogo2.png in a public/ directory and at the root of my project, but neither worked.
How can I make the image render properly?
<script>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
<div id="root">
</div>
I am running the html snippet but getting a console error message , this code is from https://reactjs.org/docs/hello-world.html ,it runs fine on codepen but not my local browser, please help as i am new to react.js
That snippet won't run in your browser's console as-is. In the code pen go to settings > JS > Add External Scripts/Pens. You'll see react and react-dom are dependencies for the code to run.
This tutorial for create-react-app will help you get everything installed correctly so you can try the hello world example - https://create-react-app.dev/docs/getting-started/
Here's the full setup in order for this example code to run:
<!-- INCLUDE REACT LIB -->
<script src="https://unpkg.com/react#18/umd/react.production.min.js" crossorigin></script>
<!-- INCLUDE REACTDOM LIB -->
<script src="https://unpkg.com/react-dom#18/umd/react-dom.production.min.js" crossorigin></script>
<!-- INCLUDE BABEL COMPILER LIB FOR JSX -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<div id="root"></div>
<!-- Change the type to text/babel in order for the Babel compiler to detect and compile the JSX syntax -->
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);
</script>
You can find the CDN links used in this example for the React, ReactDOM and Babel libraries on the link that #abo mentioned above.
Happy Hacking and welcome to the wonderful world of React! ;)
I'm a beginner in React and has been working with the CDN links so far, I decided to remove these links and install the dependencies as it is better to work with, so I have tried to install the dependencies as instructed in the official website with npm install, and did so in my project repository, and after importing from react and react-dom the JS script doesn't work at all, and the console shows no errors, I tried a lot of fixes (including changing the source from index.js to index.pack.js), I also tried installing react using package control of Sublime Text, but nothing worked.
I don't think it's a code problem, but here are the index.html and index.js files :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script src="js/index.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
//import React from 'react'
//import ReactDOM from 'react-dom'
const React = require("react");
const ReactDOM = require("react-dom");
const element = <h1 className="header">This is JSX</h1>
console.log(element)
ReactDOM.render(
element,
document.getElementById("root")
)
The css folder and files are all in the correct place and so is the index.js so it's not a path error, I think it's most likely a dependency error but it can be something else, does anyone have an idea on how to fix this, thanks in advance!
Sorry for the late reply as I have kinda solved the problem on the spot :D, indeed Create React App was the way to go, it builds the application nicely and it manages dependecies as well. Thanks for your answers !
When debugging my React Application using Chrome / React Developer Tools, I see two instances of my Application. Has anyone experienced this? Is it actually rendering two instances or is it just a developer bug?
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
Is my entire App.js, with App having a single export.
I ran into the same issue when setting my react application up from scratch with babel and webpack.
I viewed page source from the browser and it turned out I included two script tags in the index.html file. I think that was because I included the first script tag manually referencing '/bundle.js'. When you run webpack dev server, it automatically includes it for you.
<!doctype html>
<head>
<meta charset="utf-8"/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
so make sure your index.html looks this way before you run webpack-dev-server