I am trying to reference a jsx file from my html, but the render function is not showing anything, and there aren't any errors in the console.
*Note - I changed the fb CDN links below as SO wouldn't allow them. The CDN links are not the issue.
My code looks like this:
HTML
<html>
<head>
<script src="https://f*b.me/react-0.14.6.js"></script>
<script src="https://f*b.me/react-dom-0.14.6.js"></script>
<script src="http://f*b.me/JSXTransformer-0.12.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div id="loggedin"></div>
</div>
<script type="text/babel" src="js/script.jsx"></script>
</body>
</html>
JSX
var App = React.createClass({
render: function() {
return(
<h1>Hello</h1>
)
}
});
ReactDOM.render(<App />, document.getElementById('loggedin'));
React uses babel to convert your jsx to js. So, add babel instead of JSXTransformer and save the file as .js not .jsx
Add this to your script
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
Reference
Related
Is this possible to use JSX attributes, without bundler? (just using a HTML which is loading react in tag)
index.html file:
<html lang="en">
<body>
<div id="root"></div>
<script src="react.development.js" crossorigin></script>
<script src="react-dom.development.js" crossorigin></script>
<script src="index.js"></script>
</body>
</html>
index.js file:
class App extends React.Component {
render() {
return <div>Content</div>;
}
}
const e = React.createElement;
const domContainer = document.querySelector("#root");
ReactDOM.render(e(App), domContainer);
You need a transpiler, not a bundler. You can run one client-side, but shouldn't because it introduces performance problems (and can make it harder to debug your code).
This is covered in the documentation:
The quickest way to try JSX in your project is to add this <script>
tag to your page:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Now you can use JSX in any <script> tag by adding
type="text/babel" attribute to it. Here is an example HTML file with
JSX that you can download and play with.
This approach is fine for learning and creating simple demos. However,
it makes your website slow and isn’t suitable for production. When
you’re ready to move forward, remove this new <script> tag and the
type="text/babel" attributes you’ve added. Instead, in the next
section you will set up a JSX preprocessor to convert all your
<script> tags automatically.
How would I properly use React.js CDN in PHP file? With my code below, I can successfully display hey on the browser.
Here's my code:
<?php
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<script type="text/jsx">
class Temp extends React.Component {
render() {
return(
<div>
<h1>hey</h1>
</div>
);
}
}
ReactDOM.render(<Temp />, document.getElementById("app"));
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
But this time, I want this to be displayed via another js file: Temp.js. My attempt below isn't showing anything on the browser. I feel like I'm making a tiny mistake but can't spot it.
I'm totally aware on how create-react-app works, I'm just trying to dabble with the CDNs and see how it works.
What am I doing wrong and how can I fix it?
Here's Temp.js:
var Temp = React.createClass({
constructor(props) {
super(props);
this.state = {
term: 'test'
};
};
render() {
return(
<div>
<h1>{this.state.term}</h1>
</div>
);
}
});
ReactDOM.render(<Temp />, document.getElementById('app'));
Not familiar with importing react via cdn but I was able to get it working by replacing the CDN you had with
<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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
Source: React CDN based page not working with Babel 6.1.19
Probably something to do with using a dev version of react?
I am creating a simple react app to practice creating stuffs without dependencies provided by create-react-app (webpack - babel ....)
I am faced with two problems
this is the code:
HTML
<html>
<head><head>
<body>
<div id="App"> </div>
<script type="module" src="script.js" ></script>
<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>
</body>
</html>
JS
window.onload = () => {
class App extends React.Component {
render() {
return(
<div className="App">
<p>any paragraph</p>
</div>
)
}
}
ReactDom.render(App, document.getElementById('App'))
}
The first problem is:
Nothing is happening when adding the type attribute to the script tag and set its value to "module", nothing works at all, as if js engine could not access the script!!
The second problem:
After removing type="module", it works but with a console error Uncaught SyntaxError: Unexpected token <
So why these two problems happens and how to solve them??
Try loading script.js last. That is, after react-dom is loaded.
I cannot seem to figure out what I shall do to correct the issue:
I always got no display on the browser, where I expect to see "Hello React".
Here is the HelloWorld code:
ReactDOM.render(Hello, React!,document.getElementById('root'));
You can use following code base to understand basic of React JS (have been used latest version react-15.0.0) -
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
<!-- use this as script file "fb.me/react-15.0.0.js"
"fb.me/react-dom-15.0.0.js"
cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js" -->
</head>
<body>
<div id="greeting-div"></div>
<script type="text/babel">
var Greeting = React.createClass({
render: function() {
return ( <div>{this.props.children} </div>)
}
});
ReactDOM.render(
<div>
<Greeting>hello Aby</Greeting>
<h1>HELLO</h1>
</div>,
document.getElementById('greeting-div') );
</script>
</body>
</html>
check your example here, https://codesandbox.io/s/ElRmqWK5Y
what I will suggest download the react package and run your code there in the beginning, and what I think about your code is you should add react library first than react-dom.
there is a missing < body > in your code , try to add it and tell us if it works
So basically the problem is that you don't transpile your jsx. For your simple example what you can do if you don't want to configure transpiling 'explicitly' with some bundler you can add Babel library and change
<script type="text/jsx">
to
<script type="text/babel">
Let's have a look here, but please remember that jsfiddle uses babel behind (quite sure):
https://jsfiddle.net/69z2wepo/83023/
Also let me paste example from babel docs. Especially take a look for added babel lib + script type.
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
I am new to Reactjs. I have downloaded the latest bundle of JS files from: https://facebook.github.io/react/docs/getting-started.html
I set path for the JavaScript files in my HTML file and started working on it.
When I create a component in the same file and render the component in same JavaScript file it works fine. But when I create a component in one JavaScript file and render it in another JavaScript file by importing, it is giving me error.
Below is the sample code, which is working:
var FindEmp= React.createClass({
render:function(){
return(
<p>EMPID <input type='text'/></p>
);
}
});
React.render(<FindEmp/> , document.getElementById('content'))
and if write this in 2 files like below its not working
app.js
'use strict';
var React = require('react');
var React = require('react/addons');
var FindEmp= require('./components/FindEmp.react');
React.render(<FindEmp/> , document.getElementById('content')); //This Line is giving me error saying
FindEmp.react.js
var React = require('react');
var ReactPropTypes = React.PropTypes;
var FindEmp = React.createClass({
render:function(){
return(
<p>EMP ID <input type='text'/></p>
);
}
});
module.exports = FindEmp;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="lib/JSXTransformer.js"></script>
<script src="lib/react.js"></script>
<script src="lib/react-with-addons.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/marked.min.js"></script>
</head>
<body>
<script type="text/jsx" src="js/app.js"></script>
<script type="text/jsx">
</script>
</body>
</html>
You did missed
<div id="content"></div>
so
document.getElementById('content')
cant find anything.
And its important to put it above reference to your app.js.
For this sample I was using react.js file . Removed the js file and started using npm react tools and web pack. This solved my problem.
I have gone through the following site for a sample..
http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/