this is the first time i write on Stack Overflow.
I'm trying to use React locally using babel but when i try to execute it in the browser i got the cross-origin request blocked error.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test React</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" ></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js" ></script>
<script type ="text/babel" src="app.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
What i need to do ?
You should use Create react app to create a React Application
npx create-react-app my-app
cd my-app
npm start
It will fix all this errors
Related
Steps:
I have many custom components. Hence, I created standalone package.
I did it bundle using webpack.
Include that bundle file in HTML page using script tag.
Now, I just want to use it in HTML page like below example, but I cant access it.
<!DOCTYPE html />
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<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="build.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
ReactDOM.render(<CustomButton />, document.getElementById('root'));
</script>
</body>
</html>
Is it possible to access component once bundle ?
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.
I just moved my working AngularJS project into a spring-boot configuration. Spring is not the issue because I am able to locate the index.html file and display "Test test test" in the browser which is written in that file. However all my scripts are returning the following:
In my index.html file I set the base href:
<html lang="en" ng-app="SharpVision">
<head>
<base href="/PersonalSite/src/main/webapp/">
<meta charset="utf-8">
My body in index.html
<body>
Test Test test
<ng-include src="'app/views/structure/navigation.tpl.html'"></ng-include>
<ng-view autoscroll="true"></ng-view>
<ng-include src="'app/views/structure/footer.tpl.html'"></ng-include >
<!--Scripts-->
<!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script src="assets/libs/flexslider/jquery.flexslider.js"></script>
<script src="assets/libs/masonry/masonry.pkgd.min.js"></script>
<script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular/angular-route.min.js"></script>
<script src="assets/libs/angular/angular-sanitize.min.js"></script>
<script src="assets/libs/angular/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="assets/libs/angular-flexslider/angular-flexslider.js"></script>
<script src="assets/libs/angular-backstretch/ng-backstretch.min.js"></script>
<script src="assets/libs/angular-parallax/angular-parallax.js"></script>
<script src="assets/libs/angular-fitvids/angular-fitvids.js"></script>
<script src="assets/libs/angular-masonry/angular-masonry.min.js"></script>
<script src="assets/libs/momentjs/moment-with-locales.min.js"></script>
<script src="assets/libs/humanize-duration/humanize-duration.js"></script>
<script src="assets/libs/angular-timer/angular-timer.min.js"></script>
<script src="assets/libs/ng-progress/js/ngprogress.min.js"></script>
<script src="assets/libs/angular-gmaps/angular-google-maps.min.js"></script>
<script src="assets/libs/lodash/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="app/app.module.js"></script>
<script src="app/app.directives.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/app.controllers.js"></script>
</body>
In my app.js file I set a constant:
app.constant('ROOT', '/PersonalSite/src/main/webapp/');
Now everything was working fine until I brought in boot. However I just set up a InternalResourceViewResolver to render the index.html which it did so spring-boot is doing its job. For some reason Angularjs cannot find its scripts even though it is given the correct paths to find them.
Directory: