Menu
Can any tell me how can I run the ReactJS sample in my Local PC which I created in the JSFiddle ?
I am really new to ReactJS.
589
Things have moved in the three years since I wrote the original answer below.
Facebook now have a great example of adding React to an existing site which is probably the easiest way to get React up and running if you have some basic web experience.
There's also a frequently updated and very well maintained official Facebook React starter kit that's another excellent starting point.
There are two quick approaches:
The official facebook documentation provides a Starter Kit that you can download and then all you have to do is:
helloworld.html file in the root directory of the unzipped starter kit (the root directory is the one that contains the build and examples folders) src
helloworld.js
<script type="text/babel" src="src/helloworld.js"></script>
After you've done that your files should look like this:
helloworld.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="src/helloworld.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
var H = React.createClass({
getInitialState:function(){
return{count:0}
},
increment:function(){
this.setState({count:this.state.count+1});
},
render: function() {
return (
<button onClick={this.increment}>I have been clicked {this.state.count}times!</button>
);
}
});
ReactDOM.render(
<H />,
document.getElementById('container')
);
Then, open up the helloworld.html file in a browser. Internet Explorer wouldn't open it for me and the docs say Chrome may not like the separate js file, I had to use Firefox. I just right clicked the file and picked open with Firefox. The URL should look something like file:///C:/Users/Tom/Downloads/react-0.14.6/react-0.14.6/helloworld.html
Alternatively, if your comfy with node and npm then that page also gives all the instructions needed for getting React up and running from npm.
73
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
