I am using MacBook Pro.
I prefer to use ubuntu in a VM for web development.
I created a index.html inside my Macbook and then simply open it with Chrome.
The html was created following this video
and this is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>First Component</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
/** #jsx React.DOM */
var APP = React.createClass({
render: function() {
return (
<h1>Hello World</h1>
);
}
});
React.renderComponent(<APP />, document.body);
</script>
</body>
</html>
I got the following error:
When I expand on the error:
Please advise.
Update:
In the newer versions it is (documentation)
ReactDOM.render(reactElement, domContainerNode)
It is should be React.render and not React.renderComponent as per documentation
The video you mentioned uses 0.8 and you are using 0.13.
From 0.12 renderComponent has been replaced with render
Related
This is the code.
(I know that I must type here so many text to post my question, but please ignore this part in the parenthesis. It is due only to the rules of the site.)
I can not find the reason, but on screen only appears "{{adat}}".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> </title>
<script src="https://code.angularjs.org/1.8.2/angular.js">
</script>
<script type="text/javascript">
function todoc($scope) {
$scope.adat = "Szia!";
}
</script>
</head>
<body ng-app>
<div ng-controller="todoc">
<h1> {{adat}} </h1>
</div>
</body>
</html>
It turned out that this version of Angular works with a newer syntax.
For this syntax the appropriate version is 1.0.0
I have written a simple hello world code in ReactJS, but when I run the code, the browser displays nothing. There is not any error displayed on console. Please tell what can be the problem. I am using WebStrom compiler, Chrome as browser and Windows 8.1 is the OS.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First React App</title>
<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>
<script src="script.jsx" type="text/babel"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
script.js
var MyComponent = React.createClass({
render :function() {
return(
<h2>Heading 2</h2>
);
}
});
React.render(
<MyComponent/>, document.getElementById('content')
);
project directory
browser display
It could be that your script.js should be script.jsx?
It's a babel issue you're running into. Try replacing JSXTransformer with the official babel package:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
trying this react example after I start the server at port 3000 I get a blank page. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
So why I get blank page ?
I see there is an error in the console but I dont know if this is the problem or not. I am on windows 10
it seems last version of babel has a problem I switched to 5.8.23 and I get "Hello Ract" normally !!
I am trying to make an "Hello World" program as suggest on react tutorial.
But I created helloworld.js under src and helloworld.html in root. When I try to run my helloworld.html nothing happens (at all). And when I try to run helloworld.js error described below comes.
Is it some issue with babel?
Your first question, why helloworld.html returns nothing at all:
You should not need to add src="src/helloworld.js" in the tag. Otherwise the will try to load your helloworld.js (which causes your second question). I have created a plunker - it works without the src="src/helloworld.js"
html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>test</div>,
document.getElementById('example')
);
</script>
</body>
</html>
Demo:
http://plnkr.co/edit/ONtPtVkCsnEqNYYtDFAv?p=preview
For your second question. I guess you try to separate the script to a new file out from the helloworld.html. You do not need import because you add the react.js and react-dom.js in the html's head tag already. ReactDOM.render is already known when you load the src/helloworld.js from the script tag.
html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="src/helloworld.js">
</script>
</body>
</html>
src/helloworld.js
ReactDOM.render(
<h1>Hello, world</h1>,
document.getElementById('example')
);
Demo:
http://plnkr.co/edit/9uNkyaz65A4FMTHwdCtr?p=preview
Edit:
Click on the browser, for example, I clicked Chrome and got Hello World!:
I just started to explore react and trying to understand how do I use react-bootstrap if is installed over bower I just followed the getting started part but I do not really understand how does should work.
here I have my markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="styles/main.css" rel="stylesheet">
<script src="vendor/react/react.js"></script>
<script src="vendor/react-bootstrap/react-bootstrap.js"></script>
<script src="vendor/react/JSXTransformer.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script>
var Alert = ReactBootstrap.Alert;
console.log(Alert)
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
How do I generate bootsrap component with this package?
Update
I think I got it but I'm not sure if I use it right so in my markup
<script>
var Alert = ReactBootstrap.Alert;
</script>
<script src="components/Alert.js"></script>
Alert.js is the compiled jsx
const alertInstance = (
<Alert bsStyle='warning'>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>
);
React.render(alertInstance, document.body);
#dmasi mentioned it right in comments. This looks like a namespace issue and its missing from the examples mentioned on react-bootstrap website.
Here is an example of using Bootstrap's ButtonGroup via React-Bootstrap. You can adopt a similar approach for your code.
<h2>React-Bootstrap Testing</h2>
<div id="myBtn"></div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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/react-bootstrap/0.25.1/react-bootstrap.js"></script>
<script type="text/jsx">
var MyReactBootstrapButton = React.createClass({
render: function() {
var ButtonGroup = ReactBootstrap.ButtonGroup,
Button = ReactBootstrap.Button;
return (<div>
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
</div>);
}
});
React.render(<MyReactBootstrapButton />, document.getElementById("myBtn"));
</script>
Working Fiddle link: fiddle