I setup a standard HTML page and imported react and babel .js files in order to learn how to use the React framework. Unfortunately, I am unable to get the following example to work. I am not using grunt or another runner to compile the JSX code, so I imported the broswer.min.js file.
Can you see what I am doing wrong? I am not worried about performance and I just want to use this app for learning purposes, so I would prefer not to have local runners to compile the JSX code which will add setup complications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Test!</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>
<body>
React Test...
<hr>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, it works!</h1>, document.getElementById('example'));
</script>
</body>
</html>
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>
I am trying to make an "Hello World" program as suggest on react tutorial.
But I created helloworld.js under src and helloworld.html in root. When I try to run my helloworld.html nothing happens (at all). And when I try to run helloworld.js error described below comes.
Is it some issue with babel?
Your first question, why helloworld.html returns nothing at all:
You should not need to add src="src/helloworld.js" in the tag. Otherwise the will try to load your helloworld.js (which causes your second question). I have created a plunker - it works without the src="src/helloworld.js"
html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>test</div>,
document.getElementById('example')
);
</script>
</body>
</html>
Demo:
http://plnkr.co/edit/ONtPtVkCsnEqNYYtDFAv?p=preview
For your second question. I guess you try to separate the script to a new file out from the helloworld.html. You do not need import because you add the react.js and react-dom.js in the html's head tag already. ReactDOM.render is already known when you load the src/helloworld.js from the script tag.
html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="src/helloworld.js">
</script>
</body>
</html>
src/helloworld.js
ReactDOM.render(
<h1>Hello, world</h1>,
document.getElementById('example')
);
Demo:
http://plnkr.co/edit/9uNkyaz65A4FMTHwdCtr?p=preview
Edit:
Click on the browser, for example, I clicked Chrome and got Hello World!:
I'm going through some starter React.js courses to become more familiar with React, and the ES6 format. Unfortunately, the courses were created during 0.13 when the JSX Transformer was available, and I do not want to setup a node.js environment with each and every exercise file. It also seems that babel-browser was discontinued, and babel-standalone needs much more than a type in the script properties to compile, so neither seems to be a solution (Unless I misunderstood standalone).
Is there anything out there that handle transforms as simply as the JSX Transformer once did?
Thanks in advance!
The react site tutorial (http://facebook.github.io/react/docs/tutorial.html) seems to use babel dynamically.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
I am very new to using sencha. I have simple application and I want to add debug js library to see errors and warning. Problem is when I add this js to my app I see just blank screen and errors in this library. My index.html look like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/options-toolbar.js"></script>
<script src="../../api-debug.js"></script>
<script src="app.js"></script>
<script src="ext-all-debug.js"></script>
</head>
<body></body>
</html>
when I remove ext-all-debug.js everything works.
So what I am doing wrong ?
You have added ExtJs twice. You don't need to add the JS file from their examples. You need to add ext-all-debug.js and the css file. Mine looks something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-debug.css"/>
<script src="ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>
You might also want to have a look at the Sencha CMD that can create the setup for you:
sencha -sdk /path/to/sdk generate app
More info here: http://docs.sencha.com/extjs/4.2.0/#!/guide/command
To use dynamic loading of classes add this to your code:
Ext.Loader.setConfig({
enabled : true,
paths : {
Ext : "ext/src" //path to ext
//add custom/yourown namespaces here and their paths
}
});
And replace ext-all-debug.js with ext.js or ext-dev.js
<script src="../common/js/Ext/ext-dev.js" type="text/javascript"></script>
Use require in your code to let the loader know which classes to use:
Ext.require("Ext.form.Panel);