I'm trying to get React.js to work client side on my LAMP stack web application. I want to implement the following slider on my website: https://github.com/airbnb/rheostat. I have managed to get react.js to work using the following guide: https://gist.github.com/jineshshah36/4a0326abb191781184e9.
The following code works:
<div id="app"></div>
<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 type="text/babel">
var HelloComponent = React.createClass({
render: function() {
return (
<h1>Hello, World!</h1>
)
}
})
ReactDOM.render(<HelloComponent />, document.querySelector('#app'))
</script>
I tried to use the rheostat slider by changing the above to the following.
<div id="slider-root"></div>
<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://raw.githubusercontent.com/airbnb/rheostat/master/src/Slider.jsx"></script>
<link href="https://raw.githubusercontent.com/airbnb/rheostat/master/css/slider.css" rel="stylesheet" type="text/css">
<script type="text/babel">
import Rheostat from 'rheostat';
ReactDOM.render(<Rheostat />, document.getElementById('slider-root'));
</script>
Am I importing the files wrong? Do I need to process the jsx file before it can be executed by the browser? If yes, how do I do that?
Do I need to process the jsx file before it can be executed by the browser?
Yes, precisely. jsx is essentially a syntax extension primarily for working with React, and you will need to compile/transpile first. If you don't want to do that, you can simply leave jsx out altogether and just use:
ReactDOM.render(React.createElement(Rheostat), document.getElementById('slider-root'));
If you are interested in jsx, consider the following:
<div>
<span>Text here</span>
</div>
This is not valid JavaScript, the browser will barf up all sorts of syntax errors restlessly. This code first has to be compiled, or transpiled into valid JavaScript. When using React, the above is to be compiled into:
React.createElement(
"div",
null,
React.createElement(
"span",
null,
"Text here"
)
);
One of the most common tools for this is Babel. TypeScript also has built-in support for typed jsx, dubbed tsx.
Related
i need help for integrate frontend ReactJS on my site. currently i avoid to use nodeJS or NPM for implement my reactJS. but i'm using ReactJS CDN. so i not run npm start when develop the reactJS. i just want to use the frontend.
Hope this will understand from the start. so i have a question, how do i able to get another component and place it on single file.
I Created file App.js. I plan that this file will become a centralize for other components.
let me share what i'm doing right now.
here is my file structure
this is my code on index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Buynow Project</title>
<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>
<script type="text/babel" src="buynow/index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
this is my code on index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'
ReactDOM.render(<App />, document.getElementById('root'));
this is my code on App.js
import React from 'react';
import Navbar from './components/Navbar.js'
function App(props){
return (
<div>
<Navbar/>
Hello App
</div>
);
}
export default App;
this is my code on Navbar.js
import React from 'react';
function NavBar(props) {
return (
<div>
<Navbar/>
Hi NavBar
</div>
);
}
export default NavBar;
but i got this error, and pointed on file index.js line:1
Uncaught ReferenceError: require is not defined
this is error
I confuse how to solve this. I start with the simple code just for testing if it can work or not.
please help.
https://reactjs.org/docs/react-without-jsx.html
JSX is not a requirement for using React. Using React without JSX is
especially convenient when you don’t want to set up compilation in
your build environment.
So you can't use JSX/TSX directly in your browser (need compilation). Also, you can't use import outside a module (so basically now, you can already use your function components by adding the import of all your files in the index.html).
In my experience I suggest that you use the benefits of JSX / TSX and compile your code with NPM to be more comfortable (everything is way more intuitive with jsx).
In any case, in the link that I have included, you will find how to do the equivalent of JSX with pure javascript. That's what you need. (as you can see in my small snippet)
If you want keep using react from CDN and without compiling, your code, should be something like this:
// For the Snippet i have all of your js here
// But you could just import in your index.html every separate component file you have (without any import/export syntax)
function NavBar(props) {
return React.createElement('span', null,props.title);
}
function App(props){
return React.createElement('span', null, React.createElement(NavBar, {title: 'Header'}, null),
React.createElement('span', null,'Hello App'));
}
ReactDOM.render(React.createElement(App, {}, null), document.getElementById('root'));
<html>
<head>
<meta charset="UTF-8" />
<title>Buynow Project</title>
<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>
</head>
<body>
<div id="root"></div>
</body>
</html>
Anyway, as you see, the code is not so readable this way...
EDIT
I made the same snippet on stackblitz with separated files
https://stackblitz.com/edit/web-platform-4ruju9?file=index.html
Ps. Also, don't put NavBar inside NavBar or you'll get a render loop
You have to enable module support in script tag
<script type="text/babel" data-type="module" src="./index.js"></script>
Remove React import statements as they can be directly used.
I'm trying to figure out why my browser can't parse JSX, and how to configure my script tags so that it can.
The context: I'm creating a webpage that incorporates a Swagger-UI display, and using their documentation for embedding within html and adding custom plugins, I've got the following html, including a renderer script of type text-babel:
<div id="swagger-ui"></div>
<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/babel.min.js"></script>
<script type="text/javascript" src="js/swagger-ui-bundle.js" charset="UTF-8"></script>
</script>
<script id="swagger-ui-renderer" type="text/babel">
window.onload = function() {
const MyOperationsPlugin = function(system) {
return {
wrapComponents: {
OperationTag: (Original, system) => (props) => {
props.tag = "MyValue"
return <Original {...props}/>
}
}
}
}
const ui = SwaggerUIBundle({
url: "www.example-swagger.com",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
MyOperationsPlugin
],
})
window.ui = ui
}
</script>
This works great. Here's the problem: as I add more custom functionality, I want plugins to be in their own scripts. However, when I move myOperationsPlugin into its own file, myOperationsPlugin.js, and import it below my existing script tags...
<script type="text/javascript" src="js/myOperationsPlugin.js" charset="UTF-8"> </script>
...my browser complains about Unexpected token '<' when trying to parse <Original {...props}/>. Could someone suggest a way of structuring my JS and HTML such that I can write JSX in external files and import them?
Importing the script with type="text/babel" doesn't fix the problem, unfortunately.
You cannot use JSX tags in plain JavaScript.
Since there's just one JSX tag in your code
return <Original {...props}/>
you can replace it with non-JSX equivalent:
return system.React.createElement(Original, props)
In case of more complex code, there are other options but all of them involve converting JSX into the corresponding plain JS/HTML. You could also package your JSX-based plugin as an npm module like done here and load the compiled version through npm.
I am learning reactjs through a tutorial and ran into this error. That says "Cannot read property 'keys' of undefined" My code is very minimal so I assume that it has to do with the structure of the language. Does anyone know the problem and a possible solution?
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<title>ReactJs</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var HelloWorld = ReactDOM.createClass({
render: function() {
return
<div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
}
});
ReactDOM.render(
<HelloWorld />, document.getElementById('app'));
</script>
</body>
</html>
Edit: oddly, after our comments above, I checked to see if it was indeed the babel core version, I am using this one in my fiddle:
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
The second I switch to your version above I get this:
Uncaught TypeError: Cannot read property 'keys' of undefined
Use React.createClass not ReactDOM.createClass and wrap multiple lines of html in parenthesis like so:
Working Example: https://jsfiddle.net/69z2wepo/38998/
var Hello = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text</p>
</div>
)
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
Just to be clear, as the other answers are a bit convoluted. The problem was using "babel-core" instead of "babel-standalone". Just look up for a cdn for babel-standalone instead.
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js
Today is my first day with React, and I've faced this issue when I tried to use Babel to transpile the JSX!
The issue is the version you are trying to use, please use this one instead:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
Don't forget to write type="text/babel" in the <script> tag which you will write the JSX in to let Babel transpile it for you, if you don't, you will find this error (As I have faced it too! :D):
Uncaught SyntaxError: Unexpected token <
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
This is the version of babel-core which isn't giving me the error as shown below:
If you want to use the latest version, You can use the latest standalone version. (as per 22-Nov-2018)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
But this gives the following warning :
"You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/"
I haven't worked with React before, but there are a few things that I see that may be causing your issues. First, React.createClass instead of ReactDOM.createClass. Second, you need to wrap your html in parentheses:
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
);
}
});
This should get it working
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>);
}
});
I'm trying to get my head around React, Reflux and JSX. I have a simple file I'd like to try and get working.
<html>
<body>
<div id="counter"></div>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/reflux/dist/reflux.js"></script>
<script src="bower_components/react-dom/react-dom.js"></script>
<script type="text/jsx">
var CounterComponent = React.createClass({
render: function() {
return (
<div>Hello, world</div>
);
}
});
React.render(<CounterComponent />, document.getElementById("counter"));
</script>
</body>
</html>
I've setup my actions, store and component. But React.render() doesn't actually create anything in my div. I've commented out much of the code to try and isolate why it's not rendering. I get no errors, so I assume it's something to do with the jsx not being seen...
Any ideas why this is failing to render my 'hello world'?
The JSX Transformer is available in Babel. Got this working by installing babel with bower, adding the following:
<script src="bower_components/babel/browser.js"></script>
and changing "text/jsx" to "text/babel"
After this the component rendered correctly.