What do I need to make the following work?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
import React from 'react';
</script>
</body>
</html>
In its current form it produces an error:
Inline Babel script:2 Uncaught ReferenceError: require is not defined
at <anonymous>:3:14
at run (babel.js:61531)
at check (babel.js:61597)
at loadScripts (babel.js:61638)
at runScripts (babel.js:61668)
at transformScriptTags (babel.js:336)
at babel.js:327
This form does not work too:
import React from 'react.production.min';
If you are building a React application with client-side babel: You don't use import.
import React from 'react'; is replaced by the first two <script> elements you have in your HTML document.
If you want to use modules with React, you'd be better off taking "Setup Option 2" in the React tutorial and putting together a local development environment that uses babel at build time instead of at run time.
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 think I have some misunderstanding of 'import and export'.
There are many modules, eg: React, react-router-dom, etc...
However, I'd like to talk about the simple project, only html, css and Javascript, without nodeJs/ React.
If I spilt my js file in 5 parts...
Method 1: link js directly
<script src="javascript1.js"></script>
<script src="javascript2.js"></script>
<script src="javascript3.js"></script>
<script src="javascript4.js"></script>
<script src="javascript5.js"></script>
Method 2:
Import function from js 2,3,4,5
<script type="module" src="Main.js"></script>
<script src="javascript2.js"></script>
<script src="javascript3.js"></script>
<script src="javascript4.js"></script>
<script src="javascript5.js"></script>
I tried the method 2 and I found it's break.
As there are many global variables in my project...
Finally, it shows error / some variable not found during import the function from other js.
Is there any pros of using 'import and export' for a simple project?
or
just use method 1, link the js file directly.
In index.html I have:
<div class="header-content-inner" id="example">
...
</div>
And then:
<script src="js/react-dom.js"></script>
<script src="js/react.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="js/segui-info.jsx"></script>
This "segui-info" is the external js file with react code in it:
import React from 'react';
import ReactDOM from 'react-dom';
var ex = <h1>It worked!</h1>;
ReactDOM.render(ex, document.getElementById("example"));
As you can guess, the "ex" is not being appended / rendered to that div. I'm a beginner to react and I'm failing to understand why it's not working. In simple examples just like this one they use react code inside a <script> tag. I don't want to use all the react code inside a .html file. What am I doing wrong?
EDIT: This is what I get on the console:
Just remove import statements from code.
In your script first add 'react' and then add 'react-dom'. It will definitely work!
Below is the simple working example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#latest/babel.min.js"></script>
<script type="text/babel" src="ext.jsx"></script>
</head>
<body>
<div id="example"/>
</body>
</html>
In ext.jsx will have
var ex = <h1>It worked!</h1>;
ReactDOM.render(ex, document.getElementById('example'));
You can run the same code snippet on
jsfiddle
In react you use functions to return JSX, in your example var ex = <h1>It worked!</h1>; is probably typecasting to just a string, rather you need to make it a function that returns the code you want. Try this below:
import React from 'react';
import ReactDOM from 'react-dom';
const ex = () => (
<h1>It worked!</h1>;
);
ReactDOM.render(ex, document.getElementById("example"));
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.
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