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?
Related
I'm creating a React application without having to use npm or yarn, just want it to work by opening page.html file.
I have this code in both files, cockpit.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.css" type="text/plain" rel="stylesheet">
<script src="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.js" type="text/plain"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js" type="text/plain" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" type="text/plain" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js" type="text/jsx"></script>
<title>Cockpit Test</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="cockpitTest.jsx"></script>
</body>
</html>
and cockpitTest.jsx:
"use strict";
const rootElement = document.getElementById('root')
class CockpitTest extends React.Component {
componentDidMount() {
console.log("asd")
}
render() {
return (
<div>
<h1>test</h1>
</div>
);
}
}
function App(){
return(
<div>
<CockpitTest name="Test"/>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('rootElement'))
but still I'm getting a blank screen when h1 text is expected. Console doesn't say anything either, it's just blank. Any help would be appreciated!
You have lots of problems
Content-Type
You've set type attributes on all your script and link elements to tell the browser that the CSS and scripts are in formats it doesn't understand. Don't do that.
Only the JSX file itself (in your last <script>) should have a type attribute.
Github is not a hosting service
You are trying to host the cockpit files on raw.github.com. This is not designed to be used as a CDN and returns data with the wrong Content-Type header. Use a real hosting service.
URL
You named the file cockpit.jsx but said src="cockpitTest.jsx"
Missing element
You said document.getElementById('rootElement') but also id="root". These do not match.
You are working without Node.js
The developer tools for React use Node.js to compile it for production-level performance. There's very little reason to not use them all the way through the development process.
First make it a javascript file .js
Then you can either:
Change:
rootElement = document.querySelector('#root'));
AND:
ReactDOM.render(<App />, rootElement)
OR:
ReactDOM.render(<App />, document.querySelector('#root'))
AND:
Delete your constant.
I even got React Router to work, but had problems when it came to separating components out into files for a tidy structure. Couldn't get imports to work inside app.js. Seems like Babel should have helped with imports and exports, but I couldn't get it to work.
Firstly - on your script type your using type "application/babel". This is not a valid media type, you probably want to use "application/javascript". This could be why nothing is displayed.
Secondly - the script you're using is not valid JS, you're using JSX which browsers cannot understand. JSX is what allows us to write html-like tags in JavaScript (the < /> for example). You would either have to write JS instead of JSX, or transpile your JSX using a transpiler such as babel. I would suggest running a compiler such as babel.
Read more about JSX here.
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 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
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/