as suggested in aboutfunction I tried using an empty wrapper <>...</> wrapper but error is being thrown as Unexpected token for <> ..please help in error resolution
const rootx = ReactDOM.createRoot(document.getElementById('Abt'));
const element5 = <AboutPage />;
rootx.render(element5);
function AboutPage() {
return (
<>
<h1>About</h1>
<p>Hello there.<br />How do you do?</p>
</>
);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<!-- We will put our React component inside this div. -->
<link rel="icon" type="./x-icon" href="./favicon.ico">
<div id="Abt"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<!-- Load your React component. -->
<script type="module" src="lik.js"></script>
</body>
</html>
const root4 = ReactDOM.createRoot(document.getElementById('Abt'));
const element4 = <AboutPage />;
root4.render(element4);
function AboutPage() {
return (
<>
<h1>About</h1>
<p>Hello there.<br />How do you do?</p>
</>
);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Page-React</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<!-- We will put our React component inside this div. -->
<div id="root"></div>
<div id="tworoot"></div>
<link rel="icon" type="./x-icon" href="./favicon.ico">
<div id="Abt"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<!-- Load your React component. -->
<script type="module" src="lik.js"></script>
</body>
</html>
new version of babel can be updated via step 2 of babel version update
npm install #babel/cli#7 babel-preset-react-app#10
and updated new JSX preprocessor command :
npx babel --watch src --out-dir . --presets babel-preset-react-app/prod
this will allow the empty<>..</> to compile and render (attached screenshot)
Related
I'm working on a project, which has already a webserver. The webserver runs PHP and it is limited. Many software cannot be installed.
I understand that React does not require any installation but adding JSX to a project needs to run these commands:
Step 1: Run npm init -y
Step 2: Run npm install babel-cli#6 babel-preset-react-app#3
Unfortunately, I cannot add NodeJS to the webserver.
JSX coding syntax would be very useful for me using the JavaScript files.
Option for adding it to HTML
I understand that I could add JSX to an HTML file:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
But I would like to use in .js files.
Examples
I have 2 examples:
Example is working but it has no JSX.
Example has JSX but it is not working.
The HTML file is the same.
1. Example project: Unexpected token error with JSX
const myelement1 = <h1>JSX should work</h1>;
ReactDOM.render(
myelement1,
document.getElementById('reactRoot')
);
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My React example page</h1>
<div id="reactRoot"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
2. Example project: React is working without JSX
const myelement2=React.createElement('h1', {}, 'No JSX!');
ReactDOM.render( myelement2, document.getElementById('reactRoot'));
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My React example page</h1>
<div id="reactRoot"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
My Question
How could I fix 1. Example project, if no program installation is possible?
you have to set type attribute as text/babel, this way the problems will be resolved, e.g:
<html>
<body>
<div id="reactRoot"></div>
<script type="text/babel">
const myelement1 = <h1>JSX should work</h1>;
ReactDOM.render(
myelement1,
document.getElementById('reactRoot')
);
</script>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
My code is as below, but "hello world" is not displayed
is there problem with my code ?
please help
<html>
<head>
<script src="theme/public/js/react.production.min.js"></script>
<script src="theme/public/js/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
you also need to import babel
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
This is from the official docs which is using the development version docs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
To set up a production-ready React build environment, follow these instructions:
* https://reactjs.org/docs/add-react-to-a-new-app.html
* https://reactjs.org/docs/add-react-to-an-existing-app.html
You can also use React without JSX, in which case you can remove Babel:
* https://reactjs.org/docs/react-without-jsx.html
* https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>
I am using Plunker to produce my React Example.
The React Libraries are included by "Find and external libraries" provided by Plunker.
https://plnkr.co/edit/U3soXYgU2ek8j2IA22WE?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="react#*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/cjs/react.development.js"></script>
<script data-require="react#*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/cjs/react-dom.development.js"></script>
<script data-require="react-jsx#*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script data-require="react-jsx#*" data-semver="0.13.1" src="cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script src="script.js"></script>
</body>
</html>
script.jsx
class App extends React.Component {
render(){
return (<h1>Hello World!</h1>)
}
}
ReactDOM.render(
<App/>,
document.getElementById("app")
);
In the console, It throws the below exception
Uncaught ReferenceError: React is not defined
at VM26837 script.js:32
(anonymous) # script.js:32
However, This example works if I tried another react libraries such as that provided by unpkg.com.
<script src="https://unpkg.com/react#16.0.0-alpha.13/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.0.0-alpha.13/umd/react-dom.production.min.js"></script>
In your code type="text/jsx" is missing. Add type="text/jsx" to your script as <script type="text/jsx" src="script.jsx"></script> and try. And use umd build for development. See the working code below
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script type="text/jsx" src="script.jsx"></script>
</body>
</html>
cjs(commonjs2): User will use this format in a build tool, it excludes all modules in node_modules folder from bundled files.
umd: User will use this format directly in browser, all 3rd-party packages will be bundled within.
Hi i am very new to Reactjs. instead of setting up webpack and babel, i am executing examples with React cdn references.i also want to use react-datepicker component,when i included this through cdn it throughs some error,guys help me out how to get rid of this and make it work
<!DOCTYPE html>
<html>
<head>
<title> React Basic Example </title>
</head>
<body>
<div id="root"></div>
<!-- React Libraries -->
<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>
<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<!-- moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!-- React date picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.47.0/react-datepicker.min.js"></script>
<script type="text/babel">
var App = React.createClass({
render:function(){
return (
<h1> Hello this is an APP </h1>
);
}
});
ReactDOM.render(<App />,document.getElementById('root'));
</script>
</body>
</html>
and the error i am getting in the console is
This is my first project using React.js and I follow this steps for create a Hello World (https://facebook.github.io/react/docs/hello-world.html)
I import React.js in head tag but why my code doesn't works? index.html is just only blank page
index.html
<html>
<title>
My first project using React.js
</title>
<head>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
Because you forgot to give the reference of babel, use this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
And specify the type of the script also type=text/babel.
Check the working code:
<!DOCTYPE html>
<html>
<title>
My first project using React.js
</title>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
</head>
<body>
<div id="root"/>
<script type='text/jsx'>
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>