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.
Related
I am creating a simple voting_app in React while learning from a book.I have an index.html file,all the css files are in respective folders,app1.js file,I've put all those files below.
The issue is when i call a component app1.js through ReactDOM.render() method ,it doesn't show in the browser.
app-1.js
class ProductList extends React.Component {
render() {
return (<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>);
}}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
Index.html
<html>
<head>
<meta charset="utf-8">
<title>Project One</title>
<link rel="stylesheet" href="./semantic.css"/>
<link rel="stylesheet" href="./style.css"/>
<script src="vendor/babel-standalone.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
Your first React Web Application14
</head>
<body>
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="content"></div>
</div>
<script type="text/babel"
data-plugins="transform-class-properties"
src="./js/app.js"></script><!--Delete the script tag below to get started.-->
<script src="vendor/react.js"></script>
</body>
</html>
The problem might comes from the babel transpilation, try to use the following script declaration (also note that your script file is named app-1.js not app.js)
<script type="text/babel" src="js/app-1.js" data-presets="es2015,react"></script>
As you can see below, your component is displayed correctly
class ProductList extends React.Component {
render() {
return (
<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>
);
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
<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>
<div id="content"></div>
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>
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.
I am new to react js..
When i run it i am getting syntax near tag i don't know why.. :(
<script type="text/babel">
var movie = react.createClass({
render:function(){
return{
<div>
<h1>{this.props.movietitle}</h1>
<h3>{this.props.moviegenre}</h3>
</div>
};
}
});
ReactDOM.render(
<div>
<movie movietitle="Avatar" moviegenre="Action" />
</div>,document.getElementById('takevalue'));
</script>
Your should have () for wrapping the return. Not the {}. And React components must be capitalized(<Movie/>)
<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>
<div id="takevalue"></div>
<script type="text/babel">
var Movie = React.createClass({
render:function(){
return(
<div>
<h1>{this.props.movietitle}</h1>
<h3>{this.props.moviegenre}</h3>
</div>
)
}
})
ReactDOM.render(
<div>
<Movie movietitle="Avatar" moviegenre="Action" />
</div>,document.getElementById('takevalue'));
</script>
You need Babel to convert jsx into js.
Hope this helps!
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