I Wrote A Peace Of Code Which If Works Expected To Get Profile Pic And User Name From GitHub API According To User Input. Console Also Not Showing Any Error.Can Any One Help Me Correct This Thanks In Advance .
This I What I Tried So Far
var Main = React.createClass({
getInitialState:function(){
return({
user:[]
});
},
addUser: function(loginToAdd) {
this.setState({user: this.state.logins.concat(loginToAdd)});
},
render: function() {
var abc = this.state.user.map(function(user){
return(
<Display user={user} key={user}/>
);
});
return (
<div>
<Form addUser={this.addUser}/>
{abc}
<hr />
</div>
)
}
});
var Form = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addUser(loginInput.value);
loginInput.value = '';
},
render:function(){
return (
<div onSubmit={this.handleSubmit}>
<input type="text" placeholder="github login" ref="login"/>
<button>Add</button>
</div>
)
}
});
var Display = React.createClass({
getInitialState:function(){
return{};
},
componentDidMount:function(){
var component = this;
$.get("https://api.github.com/users/"+this.props.user,function(data){
component.setState(data);
});
},
render: function() {
return (
<div>
<img src={this.state.avatar_url} width="80"/>
<h1>{this.state.name}</h1>
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/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>
</body>
</html>
JSBin Link
div do not have an onSubmit event form do however, fix that and you should be ok
Related
how to create a page with two reusable components and third "controller" component that will provide two-way communication with the first two.
Component 1 & 2 will be simple text boxes that will show the text value character count next to them. Component 3 will be a read-only textbox that will show the sum of the counts of 1&2.
Below is the code for the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="app.jsx"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<input type="text" id="Final" name="finaltextbox"/>
<script type="text/babel">
var max_chars = 0;
var App =
React.createClass({
render: function() {
return (
<div> <TwitterInput /> </div>
);
}
});
var TwitterInput =
React.createClass({
getInitialState:
function() {
return {
chars_left: max_chars
};
},
handleChange(event) {
var input = event.target.value;
this.setState({
chars_left: input.length
});
},
render: function() {
return (
<div>
<textarea onChange={this.handleChange.bind(this)}></textarea>
<p> {this.state.chars_left}</p>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('container')
);
ReactDOM.render(
<App />,
document.getElementById('container2')
);
</script>
</body>
</html>
Basically im Creating A Markdown Previewer In Reactjs As Of Now Im Getting Error like Uncaught TypeError: value.replace is not a function and Had No Idea What Causing It Any Help Here if I Remove this.format from here dangerouslySetInnerHTML={this.format((this.rawMarkup()))} /> works fine but while typing on input box if i press enter it is not taking me to next line
var App =React.createClass({
getInitialState:function(){
return{
value:"My Value"
}
},
updateValue:function(modifiedValue){
this.setState({
value:modifiedValue
})
},
format: function (value) {
return { __html: value.replace(/\r?\n/g, '<br>') };
},
rawMarkup: function() {
var rawMarkup = marked(this.state.value.toString(), {sanitize: true});
return { __html: rawMarkup };
},
render:function(){
return(
<div className="inputBox container-fluid">
<h1 className="text-center text-primary">Hello Coders !!!</h1>
<div className="row">
<div className="col-md-6 col-md-offset-1">
<InputBox value={this.state.value} updateValue={this.updateValue}/>
</div>
<div
className="outputBox col-md-6 col-md-offset-1"
dangerouslySetInnerHTML={this.format((this.rawMarkup()))} />
</div>
</div>
);
}
});
var InputBox =React.createClass({
update: function() {
var modifiedValue = this.refs.initialValue.value;
this.props.updateValue(modifiedValue);
},
render:function(){
return(
<textarea type="text" value={this.props.value} onChange={this.update} ref="initialValue">
</textarea>
);
}
});
ReactDOM.render(<App />,
document.querySelector("#app")
);
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>React Tutorial</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.outputBox,textarea{
width: 400px;
border: 5px solid gray;
margin: 0;
height: 500px;
}
</style>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/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.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>
As you are using markdown you don't need replace \n to <br>, you can just set breaks option to true
rawMarkup: function() {
return { __html: marked(this.state.value, { sanitize: true, breaks: true }) };
},
Example
I admit that I am a newbie in ReactJS but I am encountering a very weird issue. I am doing the first part of animations tutorial of react here https://facebook.github.io/react/docs/animation.html and I am always having a "Uncaught ReferenceError: require is not defined". Please help below is my whole code:
<html>
<head>
<meta charset="utf-8" />
<title>Django React Personal Project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/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.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1);
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
</div>
);
}
});
ReactDOM.render(
<TodoList />,
document.getElementById('content')
);
</script>
</body>
</html>
Use the react-with-addons bundle if you want to use the addons via <script> tags.
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
I am trying to call xml2json from react. I tried this code http://plnkr.co/edit/ETYguAH2ZS3ePkiGndyD?p=preview. I basically want to call the getVersion function from the xml2json file. I know I am doing something wrong, and I won't pretend I know what I'm doing. So which is the right way?
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="xml2json.js"></script>
<body>
<div id="root"></div>
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script type="text/jsx">
var Card = React.createClass({
getInitialState: function() {
return {};
},
componentDidMount: function() {
var component = this;
$.get("http://www.w3schools.com/xml/note.xml", function(data){
component.setState(data);
})
},
render: function() {
return (
<div>
...
<h3>{this.getVersion()}</h3>
<hr/>
</div>
);
}
});
var Main = React.createClass({
render: function() {
return (
<div>
<Card login="andreicvasniuc27"/>
</div>
)
}
})
React.render(<Main />, document.getElementById("root"));
</script>
Thanks
Your render function should look more like this. In xm2json.js you declare a global variable var x2js = new X2JS();. You can access this object and its methods from your render function.
render: function() {
return (
<div>
...
<h3>{x2js.getVersion()}</h3>
<hr/>
</div>
);
}
http://plnkr.co/edit/B70pQakkRCkzvGty7PLh?p=preview
Currently, I try to integrate an AngularJS app with React.
I use the following library https://github.com/davidchang/ngReact
By using watch-depth, I expect React component will re-render itself, when AngularJS's scope data is changing.
My code looks like this
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="build/commentbox.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', ['react']);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
setTimeout(function() {
alert('assign data! how to trigger react component?');
$scope.data = {data : [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
]};
}, 5000);
});
app.value('CommentBox', CommentBox);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<react-component name="CommentBox" props="data" watch-depth="reference"/>
</div>
</body>
</html>
commentbox.js
// tutorial4.js
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
// tutorial10.js
var CommentList = React.createClass({
render: function() {
console.log("DEBUG");
console.log(this.props);
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
</div>
);
}
});
There's no difference, whether I'm using watch-depth="reference" or watch-depth="value". React component won't render itself, when value is assigned to $scope.data
Is there anything I had missed out?
Use $scope.data.push() to add new data and watch-depth="value"
It will re-render.