Babel CDN link not working - javascript

Here is my code:
index.html
<!DOCTYPE html>
<html>
<body>
<div id="story-app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="components.js"></script>
</body>
</html>
My JS source resides in a file called components.js as below
class StoryBox extends React.Component {
render() {
return ( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('story-app')
);
The code is really simple and I am looking to only add a DIV to the main page but I am getting the following error in the console
babel.min.js:5 Uncaught SyntaxError: Invalid regular expression: /[ªµºÀ-ÖØ-öø-ˈ-Ë‘Ë -ˤˬˮͰ-ʹͶͷͺ-ͽͿΆΈ-ΊΌΎ-ΡΣ-ϵϷ-ÒÒŠ-Ô¯Ô±-Õ–Õ™Õ¡-Ö‡×-תװ-ײؠ-يٮٯٱ-Û“Û•Û¥Û¦Û®Û¯Ûº-Û¼Û¿ÜÜ’-ܯÝ-ޥޱߊ-ߪߴߵߺࠀ-ࠕࠚࠤࠨࡀ-ࡘࢠ-ࢴࢶ-ࢽऄ-हऽà¥à¥˜-ॡॱ-ঀঅ-ঌà¦à¦à¦“-নপ-রলশ-হঽৎড়à§à§Ÿ-ৡৰৱਅ-ਊà¨à¨à¨“-ਨਪ-ਰਲਲ਼ਵਸ਼ਸਹਖ਼-ੜਫ਼ੲ-ੴઅ-àªàª-ઑઓ-નપ-રલળવ-હઽà«à« à«¡à«¹à¬…-ଌà¬à¬à¬“-ନପ-ରଲଳଵ-ହଽଡ଼à­à­Ÿ-ୡୱஃஅ-ஊஎ-à®à®’-கஙசஜஞடணதந-பம-ஹà¯à°…-ఌఎ-à°à°’-నప-హఽౘ-ౚౠౡಀಅ-ಌಎ-à²à²’-ನಪ-ಳವ-ಹಽೞೠೡೱೲഅ-ഌഎ-à´à´’-ഺഽൎൔ-ൖൟ-ൡൺ-ൿඅ-ඖක-නඳ-රලව-à·†à¸-ะาำเ-
Am I using the wrong link to babel.min.js? I got it from https://babeljs.io/docs/setup/#installation from Section 3 Usage


Downloaded the js file from here and it worked https://github.com/babel/babel-standalone/releases

Related

Uncaught SyntaxError: Unexpected token < with React

I am very much new to React. The following is my first script.
But I am getting the following error.
Uncaught SyntaxError: Unexpected token <
I have even searched through google/SO. But I couldn't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const name = 'John doe'
const handle = '#john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>

To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.
From the babel docs:
When loaded in a browser, #babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx
Working code with just this change
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
const name = 'John doe'
const handle = '#john_doe'
function NameComponent (props){
return <h1>{props.name}</h1>;//The problem is here using JSX syntax
}
function HandleComponent(props){
return <h3>{props.handle}</h3>;
}
function App(){
return (
<div id="container">
<NameComponent name={name}/>
<HandleComponent handle={handle}/>
</div>
);
}
ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
Though this works, using create-react-app or codesandbox is generally much simpler for beginners.

In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm
Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.

Simply install babel using npm with this command:
npm install --save #babel/standalone
Also include this line in your HTML file:
<script type="text/babel" src="like_button.js"></script>
Example code:
<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>
<script type="text/babel" src="like_button.js"></script>

if you have script tag in your index.html give it a type="text/babel"
If that didn't fix it try:
Removing the homepage line entirely from the package.json in the react app directory fixed it somehow.

React is failing to render simple Hello World in MVC project

I got starting ASP.NET MVC project with the following resources added:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/require.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
#RenderSection("scripts", required: false)
Section scripts in Index.cshtml:
<div id="root"></div>
#section scripts
{
<script src="~/Scripts/ReactJS/Index.js" type="text/babel"></script>
}
And the file itself:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
The result is empty page with no errors.
I do not want to use Node.js, I do not want to use even require.js and babel.js, but it seems I have to.
What are the minimal dependencies of reactjs to work properly?

First, ensure ReactJS core files & Remarkable.js referenced properly as this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/[version]/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/[version]/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/[version]/remarkable.min.js"></script>
(more info: ReactJS MVC / ReactJS Core MVC)
Then, add JSX file in either <head> tag or Scripts section:
#section Scripts {
<script src="~/Scripts/ReactJS/Index.jsx"></script>
}
Assume in your <body> tag has this div container to bind...
<div id="root"></div>
Then, in JSX file the React script should be looks like this:
// Index.jsx
var Root = React.createClass({
render: function () {
return (
<h1>Hello, world!</h1>
);
}
});
ReactDOM.render(<Root />, document.getElementById('root'));
As the tutorial page said, BabelJS required if you want to use ES6 features such as arrow functions & concise methods, or use bundling mechanism (BabelBundle instead of plain ScriptBundle) to load JSX file.
Related issue:
ReactJS.NET MVC tutorial doesn't work?

Please use div before h1
var Root = React.createClass({
render: function () {
return (<div>
<h1>Hello, world!</h1> </div>);
}
});

How use React without web pack, node, nom etc

I'm trying to use React without webpack, node etc.
I want structure each component in separate file, this is what I'm doing:
index.html
<html>
<body>
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="js/demandAnalysis/app.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
App.js
import SimpleButton from './componets/Buttons/SimpleButton.js';
class App extends React.Component {
render() {
return (
<div>
<Button/>
</div>
);
}
}
SimpleButton.js
class SimpleButton extends React.Component {
render() {
return (
<div>
<button type="button">Click me!</button>
</div>
);
}
}
But give me this error in console:
Uncaught ReferenceError: require is not defined
I think is caused by the import, how can use this structure also without node or web pack?

import is an ES6 feature, which is currently not supported by many browsers. That is the reason why babel is used to transpile your code into ES5. This is also true for class, extends and JSX that you are using.
If you do not want to use a transpiler you should use require instead of import and React.createClass({ ... }) instead of class.
An example of require instead of import:
var SimpleButton = require('./componets/Buttons/SimpleButton.js');

Support for script type="text/babel" in Visual Studio Code

When I'm editing the below example HTML page in Visual Studio Code (borrowed from Facebook's React tutorial and slightly edited), if I write any Javascript code in the script block, it is not syntax highlighted. But if I change the script block type to "text/javascript" then the syntax highlighting works. But then any React-y/JSX code doesn't work as it is wired to work through Babel.
Is there any way to have the script tag "type" attribute set to "text/babel" and at the same time have proper syntax highlighting in Visual Studio Code?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
ReactDOM.render(
<div>Hello world!</div>,
document.getElementById('content')
);
</script>
</body>
</html>

I found a solution to this now.
Open up: (VS code home dir)\resources\app\extensions\html\syntaxes\html.json, and edit the regex for the script tag. That fixed the issue for me.

Well this is a workaround, probably will be better to change this in a post build process, but I found an easy way to do it with this new feature TagHelpers which will help to replace the javascript value by babel
So add a file TagHelpers/ScriptTagHelper.cs
[HtmlTargetElement("script", Attributes = "to_babel")]
public class ScriptTagHelper : TagHelper
{
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.Attributes.SetAttribute("type", "text/babel");
}
}
In your page Index.cshtml
<script type="text/javascript" to_babel>
And dont forget to import TagHelpers in _ViewImports.cshtml or in your Index.cshtml
#using app1
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, app1
And voila! this render as babel.

basic JSPM React sample failing erroring on loading react-tools/vendor/fbtransform/visitors

Trying to get a very basic react/jspm example working over on plnkr.co but it is erroring out with a number of 404's. Most notably the following:
Uncaught (in promise) Error: XHR error (404 Not Found) loading https://npm.jspm.io/react-tools#0.13.3/vendor/fbtransform/visitors
Error loading https://npm.jspm.io/react-tools#0.13.3/vendor/fbtransform/visitors as "./vendor/fbtransform/visitors" from https://npm.jspm.io/react-tools#0.13.3/main.js
Error loading https://registry.jspm.io/js/app.jsx.js!https://registry.jspm.io/jsx.js
at r (https://jspm.io/system#0.18.17.js:5:11565)
at XMLHttpRequest.o.onreadystatechange (https://jspm.io/system#0.18.17.js:5:12090)
Any thoughts on how to get past these and get the sample to render?
--> problem plnkr.co sample here <--
The code was also copied in the following code snippet (which obviously will never work here as different JSX files are required) just for SO readers that doesn't want to go to plnkr.co.
// app.jsx
import React from 'react'
import Test from './test.jsx!'
React.render(
<Test />
, document.getElementById('main')
);
//------------------------------
// test.jsx
import React from 'react'
export default React.createClass({
displayName: 'Test'
, render: function () {
return (
<div>Awesome Test!</div>
)
}
})
//------------------------------
//config.js
System.config({
});
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="main"></div>
<script src="https://jspm.io/system#0.18.17.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('js/app.jsx!jsx')
</script>
</body>
</html>

You have these problems:
index.html: System.import('js/app.jsx!jsx') should have been System.import('./app')
app.jsx: import Test from './test.jsx!' should have been import Test from './test'
Missing map to your libraries in config.js:
System.config({
map: {
"react": "npm:react#0.13.3"
}
});
Here is the fixed plunker

Categories

Resources