I'm trying to learn ReactJS. In this HelloWorld script
<!DOCTYPE html>
<html>
<head>
<title>React JS Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var data=[{name: "nthhtn", text: "Sample text"}];
var DataBlock = React.createClass({
render: function() {
var entry=this.props.data.map(function (entry){
return (
<h3 name={entry.name}>
{entry.text}
</h3>
);
});
return (
<div className="data" data={this.props.data}>
<h1>Sample data block</h1>
{entry}
</div>
);
}
});
React.render(
<DataBlock data={data}/>,
document.getElementById('content')
);
</script>
</body>
</html>
I don't know why when I run script in browser, the name field in data is not displayed, only the text field is
You pass the data to getInitialState() check this fiddle https://jsfiddle.net/bs65w2hs/
var data=[{name: "nthhtn", text: "Sample text"}];
var DataBlock = React.createClass({
getInitialState: function getInitialState() {
return {
reactdata: data[0]
};
},
render: function() {
var entrydata = this.state
return <div>
<ul>
<li>name: {entrydata.reactdata.name}</li>
<li>text: {entrydata.reactdata.text}</li>
</ul>
</div>
}
});
React.render(<DataBlock />, document.getElementById('container'));
This is because you are mixing things with same variable name "entry"
render: function() {
var entryBlock=this.props.data.map(function (entry){
return (
<h3 name={entry.name}>
{entry.text}
</h3>
);
});
return (
<div className="data" data={this.props.data}>
<h1>Sample data block</h1>
{entryBlock}
</div>
);
}
Change entry to entryBlock for example (see above code). If it's not that check that there is something in entry.text.
Hope it helps.
Related
This question already has answers here:
ReactJs CreateClass is not a function
(7 answers)
Closed 5 years ago.
I am trying to render a component from other component, but failing miserable, Can someone please help me with code and help me understand what i am doing wrong?
Also, using the following example, can someone help me understand when to use type=text/jsx or type=text/babel?
<body>
<div class="container">
<h1>Flask React</h1>
<br>
<div id="content"></div>
</div>
<!-- scripts -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script type="text/jsx">
/*** #jsx React.DOM */
var realPython = React.createClass({
render: function() {
return (<realPython1 />);
}
});
var realPython1 = React.createClass({
render: function() {
return (<h2>Greetings, from Real Python!</h2>);
}
});
ReactDOM.render(
React.createElement(realPython, null),
document.getElementById('content')
);
</script>
</body>
Hey man I did some refactoring on your code, maybe take a look at the react docs they are pretty awesome eitherway here's your code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- scripts -->
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var RealPython = React.createClass({
render: function() {
return <RealPython1 />
}
});
var RealPython1 = React.createClass({
render: function() {
return <h2>Greetings, from Real Python!</h2>;
}
});
ReactDOM.render(
React.createElement(RealPython),
document.getElementById('content')
);
</script>
</body>
First you probably don't want to be using jstransform any longer, it has been deprecated: https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
Instead you should use a transpiler like babel: https://babeljs.io/
Once you are transpiling your code then you just write javascript so you can just use script type "text/javascript" instead of either "text/jsx" or "text/babel".
Below is an example of how to render a component within a component.
class SubComponent extends React.Component {
render() {
return <div>
<h2>A cool sub-component</h2>
</div>;
}
}
class Application extends React.Component {
render() {
return <div>
<h2>Greetings, from Real Python!</h2>
<SubComponent />
</div>;
}
}
/*
* Render the above component into the div#app
*/
ReactDOM.render(<Application />, document.getElementById('app'));
<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="app"></app>
I've just started learning React.js and currently I'm working on simple "to do" app. I have encountered problem with onClick event on my submit button, it doesn't seem to work. I think I have got a problem with passing props to parent elements.
Here is my code:
var Application = React.createClass ({
getInitialState: function() {
return {
title: "Your to do list",
subTitle: "What do you have to do?",
tasks: [],
}
},
addTask: function(event) {
event.preventDefault();
alert("it works!");
},
removeTask: function() {
var taskList = this.state.tasks;
var currentTask = taskList.find(function(task) {
return task.key == event.target.key;
});
currentTask.remove();
event.preventDefault();
alert("it works!");
},
render: function() {
return (
<div className="app-container">
<Header title={this.state.title} />
<NewTaskForm subTitle={this.state.subTitle} onChange= {this.addTask} />
<TaskContainer tasks={this.state.tasks} />
</div>
);
}
});
function Header(props) {
return (
<div className="app-title">
<h1>{props.title}</h1>
</div>
);
}
function NewTaskForm(props) {
return (
<div className="new-task-area">
<form>
<label for="new-task">{props.subTitle}</label>
<input type="text" id="new-task" placeholder="Type in task" />
<button type="submit" onClick={function() {props.onChange;}}>Add task!</button>
</form>
</div>
);
}
NewTaskForm.propTypes = {
onChange: React.PropTypes.func.isRequired,
};
function TaskContainer(props) {
return (
<div className="new-task-container">
{props.tasks.map(function(task) {
return (
<p key={task.key}>{task.text}</p>
);
})}
</div>
);
}
ReactDOM.render(<Application />, document.getElementById("container"));
<!DOCTYPE html>
<html>
<head>
<title>React to do app!</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="js/react.js"></script>
<script type="text/javascript" src="js/react-dom.js"></script>
<script type="text/javascript" src="js/babel-browser.min.js"></script>
<script type="text/babel" src="js/app.jsx"></script>
</body>
</html>
I would really appreciate any help because I've been trying to solve this for some time now.
you didn't call the function:
<button type="submit" onClick={function() {props.onChange();}}>Add task!</button>
you can also write it like this:
<button type="submit" onClick={props.onChange}>Add task!</button>
I started in the React official tutorial but when I try to run the first example, it does not render or anything.
I'm running it in using Apache (Xampp htdocs). It doesn't show anything, even errors.
This question should've a duplicate but I can't find any. Also, I can't find any other tutorial that uses v0.14.3, I think, because those tutorials still imports JSXTransformer.js. I could be wrong.
So far this is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="../bower_components/react/react.js"></script>
<script src="../bower_components/react/react-dom.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
</body>
</html>
As you are using script type text/babel you should include babel to your app, you can include it for example from public cdn (add it after react-dom.js), like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
However better use tools like webpack or browserify
I have a object which contains name and id.I just want to do the autocomplete based on name.I have tried the code as shown below
//Js file
var app=angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
$scope.complete=function(){
$("#autocomp").autocomplete({
source: $scope.persons.Id
});
};
}]);
//Html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p.Name}}
</div>
<div class="ui-widget">
<input type="text" id="autocomp" ng-keyup="complete()">
</div>
</body>
</html>
The above code may have some errors .Its not getting output which i want to have .Can anyone help me out to solve this problem.
Try like this,
HTML:
<div ng-app = "myapp">
<div ng-controller="controller">
<div class="ui-widget">
<input type="text" id="autocomp" auto-complete>
</div>
</div>
</div>
Js:
var app = angular.module("myapp",[]);
app.controller("controller",function($scope){
$scope.availableTags = [
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
}).directive("autoComplete",function(){
return function(scope,element,attrs){
var names =$.map(scope.availableTags,function(value){ return value.Name;
});
element.autocomplete({
source: names
});
};
});
Working jsbin
This is how you should use any jQuery API's in an AngularJS project (i believe). Anytime you are doing DOM Manipulation or jQuery things, it should be placed inside the link: function() {} via directive.
Probably the main problem with your code was that the source: $scope.persons.Id is just a number. The source needs to be an array of Strings (at least as per the documentation). So I seperated all the names from your persons array and placed them in a new array peopleNames
<!doctype html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="vendors/angular.min.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p.Name}}
</div>
<div class="ui-widget">
<input type="text" id="tags" autocomplete-directive>
</div>
<script>
var app = angular.module("myapp",[]);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
// array of only strings autocomplete
$scope.peopleNames = [];
for(var i = 0, j = $scope.persons.length; i < j; i++) {
$scope.peopleNames.push($scope.persons[i].Name);
}
}]);
app.directive('autocompleteDirective', [function($scope) {
return {
link: function(scope, element, attrs) {
element.autocomplete({
source: scope.peopleNames
});
}
};
}]);
</script>
</body>
</html>
Thank For every one for suggesting me answer.I have also done in another way .It may help to others.
//html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Auto Complete based on name</title>
<script src="angularfiles/angular.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<script src="angularfiles/bootstrap-theme.css"></script>
<script src="Jsfiles/autocomp.js"></script>
</head>
<body ng-controller="controller">
<div ng-repeat="p in persons">{{p}}</div>
<div class="ui-widget">
<input type="text" ng-model="selected" typeahead="p.Name for p in persons | filter:$viewValue">
</div>
</body>
</html>
//js file
var app = angular.module("myapp",['ui.bootstrap']);
app.controller("controller",['$scope',function($scope){
$scope.persons=[
{
Name:"Bhavani",
Id:67
},
{
Name:"Mamata",
Id:66
},
{
Name:"Prasanna",
Id:65
},
{
Name:"Ramya",
Id:64
},
{
Name:"Navya",
Id:63
}
];
}]);
forgive me i've searched everywhere and I'm new in reactjs and trying out examples. I have an error
Uncaught ReferenceError: mountNode is not defined
I am following the example from here http://facebook.github.io/react/tips/initial-ajax.html
and my code looks like this
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/javascripts/reactjs/react.js"></script>
<script src="/javascripts/reactjs/JSXTransformer.js"></script>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<div id="example"></div>
<script src="/javascripts/reactjs/build/helloworld.js"></script>
<script type="text/jsx">
/** #jsx React.DOM */
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
React.renderComponent( <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode );
</script>
</body>
</html>
Thank you in advance!
You need to tell React where to mount the <UserGist /> component. You probably want to replace mountNode with document.getElementById('example') to refer to your <div id="example"></div> element:
React.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.getElementById('example')
);
Being the accepted answer done, I'd like to add one thing: Don't forget to include references to all necessaries js's libs in your html head section if you are testing this out of "kit examples folder"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://npmcdn.com/react#15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>