<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! ;)
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'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 !
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
I want to download and use react on a network that has no Internet connectivity. I downloaed the zipped source code file at bottom of this page. https://github.com/facebook/react/releases/tag/v16.8.6
It does not seem as straight forward as when you download jquery.js and simply point to it like <script src="jquery.js"></script>. What is the correct way to utilize react on offline network and how should I be pointing to the correct js "src" files? Thank you.
You need to DONWLOAD and include all of the following
react : https://unpkg.com/react#16/umd/react.production.min.js
react-dom : https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
babel : https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js
Include these inside your html file
<script src="react.production.min.js" />
<script src="react-dom.production.min.js" />
<script src="babel.min.js" />
<!-- Your react scripts that you will be coding in -->
<script src="my-script.js" />
Then set up a div with some id in your same html file .
<div id="root" />
In your my-script.js code add some react and render it to the div like this
function MyFirstReactComponent(){
return <div> My First React Component ! </div>
}
ReactDOM.render(
<MyFirstReactComponent />,
document.getElementById('root')
);
This should work for you!
The key hear is the addition of Babel which
transforms your react code(JSX) to browser understandable Javascript. Also
important, the 'ReactDOM' lib which is react's way of interacting with the browser's DOM API.
Include these inside your html file
<script src="../babel.min.js"></script>
<script src="../react.development.js"></scriptt>
<script src="../react-dom.development.js"></script>
<script type="text/babel src="Your js file source">
I am new to React.js and TypeScript and am trying to get a simple Hello World sample working. I added react-d.ts, react-dom.d.ts to my Typings folder. When I run the site in debug mode I get "require is not defined" on line 1 of the typescript file. How do I define this?
--------- index.html file: --------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript Test</title>
<!-- References. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1>Before React Output</h1>
<div id="content"></div>
<script src="Test.js" type="text/javascript"></script>
</body>
</html>
----------- Test.tsx file: -----------------
import React = require('react');
import ReactDOM = require('react-dom');
interface MyProps {
name: string;
}
class HelloWorld extends React.Component<MyProps, {}> {
constructor(props: MyProps) {
super(props);
}
render() {
return (<div> Hello {this.props.name} </div>);
}
}
ReactDOM.render(<HelloWorld name="World" />, document.getElementById('content'));
Here are my TypeScript settings:
I was able to get this code to work by adding the react-globals.d.ts typescript definitions file to my VS project, but I also had to remove the two lines that did the "import React = 'react';". I guess the CommonJS import syntax is not required for external modules when I am not bundling everything into 1 javascript file.
I could also get the project to work if I created a bundle.js of all the javascript files using Gulp and Browserify. Maybe this is the better way since I don't have to use the script tags for React and it still works.
The problem with this method is that I don't know how to set break points in the individual typescript files. I can only set break points for debugging in the giant bundled javascript file. I finally gave up and logged a call with Microsoft to try and figure out how to make all this new technology work together. Good grief Charlie Brown!
Microsoft got back to me and said that TypeScript version 1.8 (in beta) will solve all of these bundling problems. I guess that means that Gulp and Browserify won't be needed in Visual Studio for bundling anymore.