How to run ReactJS in my Local PC?
Olivia Zamora 
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.
3 Answers
Updated answer 2019
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.
Original Answer 2016
There are two quick approaches:
Use the Starter Kit
The official facebook documentation provides a Starter Kit that you can download and then all you have to do is:
- Unzip the starter kit
- Add a
helloworld.htmlfile in the root directory of the unzipped starter kit (the root directory is the one that contains the build and examples folders) - Edit that html file, remove the existing react component in the file, and then add any necessary bits of html from your fiddle
- Add a new folder in the root directory called
src - Add a new file in the src directory called
helloworld.js - Copy the js from your fiddle into that file
- Add a script tag pointing at your js file in your helloworld.html file:
<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=""></script> <script type="text/babel" src="src/helloworld.js"></script>
</head>
<body>
<div></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')
);View it in a browser
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
Use NPM
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.
First you'll need some type of IDE (e.g. Atom, Sublime, Cloud9, etc.); this is your code editor much like what JSFiddle provides. From there, the easiest way to get things running is to run a development server locally using nodejs. Here is a starter kit that has tons of great features for development:
Create-react-app will help you create a project with react shortly
npx create-react-app my-app
cd my-app
npm start
