React does not render - javascript

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

Related

Simple React Snippet Not Working

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>

Atom Beautify plugin breaks my React html

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.

How to update different component textbox value in React js..?

Environment
OS : Windows 7 - 64 bit
Framework : CodeIgniter PHP MVC
JS: React Js
I am having two different components LeftComponent and RightComponent which is merged by MergeLeftRightComponent.
MainApp which is responsible for rendering.
Having textbox in LeftComponent and RightComponent. While changing value in left textbox, i need to update value in right textbox and vice-versa.
How to achieve this..?
Framed this app from the basics of codeofaninja tutorial.
My app sample view
Codes
view.php
<!DOCTYPE html>
<head>
<title>React page</title>
</head>
<body>
<div class='task-container' id='task-container'>
</div>
<!-- react js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<!-- react components -->
<script type="text/babel" src="<?php echo base_url('assets/js/components/right.component.js');?>"></script>
<script type="text/babel" src="<?php echo base_url('assets/js/components/left.component.js');?>"></script>
<script type="text/babel" src="<?php echo base_url('assets/js/components/merge.component.js');?>"></script>
<script type="text/babel" src="<?php echo base_url('assets/js/components/main.component.js');?>"></script>
<!-- jQuery library required by bootsrap js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
main.component.js
var MainApp = React.createClass({
render: function(){
var modeComponent = <MergeLeftRightComponent changeAppMode={this.changeAppMode} />;
return modeComponent;
}
});
ReactDOM.render(<MainApp />,document.getElementById('task-container'));
merge.component.js
window.MergeLeftRightComponent = React.createClass({
getInitialState: function() {
return {
inputVal:"",
};
},
changeinputVal: function(e) {
this.setState({
inputVal: e.target.value,
});
},
render: function() {
return (
<div className='task-container'>
<LeftComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
<RightComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
</div>
);
}
});
left.component.js
window.LeftComponent = React.createClass({
getInitialState: function(){
return {
task_name:"Mountain task"
};
},
handleChange: function(e){
this.setState({
inputVal:e.target.value
});
},
render: function() {
return(
<div className="left-box">
<div className="info-container">
<input type="text" className="task-name form-control" value={this.props.task_name} onChange={this.handleChange}/>
</div>
</div>
);
}
});
right.component.js
window.RightComponent = React.createClass({
getInitialState: function(){
return {
task_name:"Mountain task"
};
},
handleChange: function(e){
this.setState({
inputVal:e.target.value
});
},
render: function() {
return(
<div className="right-box">
<div className="info-container">
<input type="text" className="task-name form-control" value={this.props.task_name} onChange={this.handleChange}/>
</div>
</div>
);
}
});
Help me to achieve this.
Thanks in Advance..
in the merge.component.js file you need to bind changeinputVal function
In left.component.js call changeinputVal function at your input function
handleChange: function(e){
this.setState({
inputVal:e.target.value
});
this.props.onChange(e);
},
merge.component.js file
class MergeLeftRightComponent extends React.Component {
constructor(props) {
super(props);
this.changeinputVal = this.changeinputVal().bind(this);
}
getInitialState() {
return {
inputVal: ""
};
}
changeinputVal(e) {
this.setState({
inputVal: e.target.value
});
}
render() {
return (
<div className='task-container'>
<LeftComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
<RightComponent inputVal={this.state.inputVal} onChange={this.changeinputVal}/>
</div>
);

Getting error near div tag

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!

React tutorial raising type error

I am trying to learn React from official tutorial. I am getting the following error.
TypeError: Constructor Comment requires 'new' react.js:5970
I don't know what I am doing wrong. My source code is given below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js">
</script>
<script type="text/babel">
// tutorial8.js
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
</div>);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
// Always the last step.
ReactDOM.render(
<CommentBox data={data} />,
document.getElementById('content'));
</script>
The solution to your problem is actually quite simple.
All you're missing is the code to create the Comment component. You may want it to look something like this based on how you've set up your CommentBox.
var Comment = React.createClass({
render: function() {
return (
<div className="commentContainer">
<div className='commentAuthor'>{this.props.author}</div>
<div className='commentText'>{this.props.children}</div>
</div>);
}
});
You need to make a React component for every component you use, you do not have one for Comment here. If you look at tutorial 4 you see that they make it there.
Each 'tutorial' here isnt a standalone example.

Categories