Hi There I am new to react,
I am trying to run this trivial snippet but it's not working:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script type="text/babel">
var Hello = React.createClass({
render: function() {
return(
<div>Hello World!</div>
);
}
});
ReactDOM.render(<Hello />, document.getElementById("app_root"));
</script>
</body>
console do not show any error messages and I do not get any output after running the script
As alluded to in the other answers, it's because JSX needs babel. In your case it is simply a matter of including babel and not just the browser-polyfill:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script type="text/babel">
var Hello = React.createClass({
render: function() {
return(
<div>Hello World!</div>
);
}
});
ReactDOM.render(<Hello />, document.getElementById("app_root"));
</script>
</body>
If you do not want to use JSX, Babel ... you have to replace the JSX definition <Hello /> by React.createElement(Hello, null, null)
I did not test the following code but in my eyes this should be correct:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script>
var Hello = React.createClass({
render: function() {
return React.createElement('div', null, `Hello World`);
}
});
ReactDOM.render(React.createElement(Hello, null, null),
document.getElementById("app_root"));
</script>
</body>
Codepen version works fine: https://codepen.io/svitch/pen/ypPLwN
That means your problem is Babel script. I agree with #bmceldowney - polyfill version is not enough, just include the regular version from cdnjs.
Also you can write simple "Hello World" without Babel:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
</head>
<body>
<div id="app_root"></div>
<script>
var element = React.createElement(
'div',
null,
'Hello World'
)
ReactDOM.render(
element,
document.getElementById('app_root')
);
</script>
</body>
</html>
Related
Please I am trying to run react app using external CDN, and having issues on the html file saying:
Uncaught ReferenceError: require is not defined index.html:3
This is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="styles/style.css">
<script src='https://unpkg.com/react#16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom#16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router-dom#5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
import Todo from 'component/Todo.js';
const App = () =>(
<div>
<h1>My Todos</h1>
<Todo />
</div>
)
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
And this the JavaScript code
function Todo (){
return (<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>);
}
export default Todo;
you can import external scripts from another server like this :
componentDidMount() {
const script = document.createElement("script");
script.src = "/static/libs/your_script.js";
script.async = true;
script.onload = () => this.scriptLoaded();
document.body.appendChild(script);
}
Then to make sure your file is loaded :
scriptLoaded() {
// your stuff to do!
}
Another way is using react Helmet:
first install it using :
npm install --save react-helmet
then use it like this
<Helmet>
<script src="www.test.ts" />
</Helmet>
note that in this way your script will load in the <head>
I am trying to run the html file below and i cannot understand why it wont work. I pretty sure I have all the components. The only thing that gets displayed is the "Single Page Application" h1. I cannot display the Hello world h1.
<html>
<head>
<title>Lab 5 To Do list</title>
<!--For React -->
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Single Page Application</h1>
<div id = "MyContainer"></div>
</body>
<script type = "text/Babel">
const hello = <h1>Hello world</h1>;
ReactDOM.render( {hello} , document.getElementById('MyContainer') );
</script>
</html>
Try to implement a simple functional component:
const hello = props => <h1>Hello world</h1>;
There are a few problems with your code. For one thing,
const hello = <h1>Hello world</h1>;
is not a valid React component. Components are case sensitive (Hello), and for this case, must be designed as a function.
Additionally, when you are calling ReactDOM.render(), you need to treat your component as if it were an html element, i.e. <Hello />.
This code is correct:
<html>
<head>
<title>Lab 5 To Do list</title>
<!--For React -->
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Single Page Application</h1>
<div id = "MyContainer"></div>
</body>
<script type = "text/babel">
const Hello = props => (
<h1>Hello world</h1>
);
ReactDOM.render(
<Hello />,
document.getElementById('MyContainer')
);
</script>
</html>
You should check out the tutorial on the React homepage, it is very helpful.
When I am just typing this file, code works.
When using Beautify plugin for Atom, code doesn't work.
I am trying to compare those files, but anyway cannot find my mistake.
Where can be a problem? May be Beautify blocks transpiler or something?
//This is unstyled and working version.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<title>React components</title>
</head>
<body>
<div id='react-container'></div>
<script type="text/babel">
var MyComponent = React.createClass({
render() {
return <div>
<h1>{this.props.text}</h1>
<p>{this.props.children}</p>
</div>
}
})
ReactDOM.render(<div>
<MyComponent text ="Hello World">My</MyComponent>
<MyComponent text ="Hello World">Name is</MyComponent>
<MyComponent text ="Hello World">Anatoly</MyComponent></div>,
document.getElementById('react-container'))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<title>React components</title>
</head>
<body>
<div id='react-container'></div>
<script type="text/babel">
var MyComponent = React.createClass({ render() { return
<div>
<h1>{this.props.text}</h1>
<p>{this.props.children}</p>
</div>
} }) ReactDOM.render(
<div>
<MyComponent text="Hello World">My</MyComponent>
<MyComponent text="Hello World">Name is</MyComponent>
<MyComponent text="Hello World">Anatoly</MyComponent>
</div>, document.getElementById('react-container'))
</script>
</body>
</html>
Gist to that files
<script type="text/babel">
var MyComponent = React.createClass({ render() { return <div>
<h1>{this.props.text}</h1>
<p>{this.props.children}</p>
</div>
} })
ReactDOM.render(<div>
<MyComponent text="Hello World">My</MyComponent>
<MyComponent text="Hello World">Name is</MyComponent>
<MyComponent text="Hello World">Anatoly</MyComponent>
</div>, document.getElementById('react-container'))
</script>
In the second snippet, put ReactDOM.render onto a new line.
My react code does not seem to be working. I have the following html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="example"></div>
<form id="frm1" action="form_action.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit" class="btn-primary">
</form>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script type="text/babel" src="helloworld.js"></script>
</body>
</html>
and the following react code
helloworld.js:
var Comment = React.createClass({
render: function(){
return(
<div>
<div className="commentText">Some Comment</div>
<button onClick="">Edit</button>
<button onClick="">Remove</button>
</div>
);
}
});
function myFunction() {
alert("hello world");
}
ReactDOM.render(
<Comment />,document.getElementById('example')
);
But it does neither spit out the comment in the example div, nor does it call the function for the input field. I suspect there is something wrong with my React setup in general, which is why I post both things here at the same time. However, the build folder and the referenced files do all exist.
It works, check this link out.
var Comment = React.createClass({
render: function(){
return(
<div>
<div className="commentText">Some Comment</div>
<button onClick="">Edit</button>
<button onClick="">Remove</button>
</div>
);
}
});
function myFunction() {
alert("hello world");
}
ReactDOM.render(
<Comment />,document.getElementById('example')
);
Make use of webpack to transpile your code since babel-browser has been removed.see this Also react onClick event function can be defined in the react component itself in helloworld.js like
var Comment = React.createClass({
handleClick: function() {
alert("hello world");
}
render: function(){
return(
<div>
<div className="commentText">Some Comment</div>
<button onClick={this.handleClick()}>Edit</button>
<button onClick="">Remove</button>
</div>
);
}
});
function myFunction() {
alert("hello world");
}
ReactDOM.render(
<Comment />,document.getElementById('example')
);
To set up webpack follow this link. Its easy to follow
I am writing first program in EmberJs as "Hello World" printing, but getting errors. Can someone help me out?
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember.min.js"></script>
<script>
App = Ember.Application.create();
App.Router.map(function() {
this.resource('index', { path: '/' }, function() {});
this.resource('hi', { path: '/hi' }, function() {});
});
</script>
<script type="text/x-handlebars" data-template-name='index'>
<p>index!</p>
<p>{{#linkTo hi}}hi{{/linkTo}}</p>
</script>
<script type="text/x-handlebars" data-template-name='hi'>
hello world!
</script>
</head>
<body>
</body>
</html>
ERROR
You need to include ember-template-compiler instead of handlebars:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.7.0/ember-template-compiler.js"></script>
You also can't use linkTo helper because it's deprecated and that's why you get another error. Here's working fiddle.