--- id: tutorial title: Tutorial prev: getting-started.html next: thinking-in-react.html --- We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments. We'll provide: * A view of all of the comments * A form to submit a comment * Hooks for you to provide a custom backend It'll also have a few neat features: * **Optimistic commenting:** comments appear in the list before they're saved on the server so it feels fast. * **Live updates:** other users' comments are popped into the comment view in real time. * **Markdown formatting:** users can use Markdown to format their text. ### Want to skip all this and just see the source? [It's all on GitHub.](https://github.com/reactjs/react-tutorial) ### Running a server In order to start this tutorial, we're going to require a running server. This will serve purely as an API endpoint which we'll use for getting and saving data. In order to make this as easy as possible, we've created a simple server in a number of scripting languages that does exactly what we need it to do. **You can [view the source](https://github.com/reactjs/react-tutorial/) or [download a zip file](https://github.com/reactjs/react-tutorial/archive/master.zip) containing everything needed to get started.** For sake of simplicity, the server we will run uses a `JSON` file as a database. You would not run this in production but it makes it easy to simulate what you might do when consuming an API. Once you [start the server](https://github.com/reactjs/react-tutorial/#to-use), it will support our API endpoint and it will also serve the static pages we need. ### Getting started For this tutorial, we're going to make it as easy as possible. Included in the server package discussed above is an HTML file which we'll work in. Open up `public/index.html` in your favorite editor. It should look something like this: ```html React Tutorial
``` For the remainder of this tutorial, we'll be writing our JavaScript code in this script tag. We don't have any advanced live-reloading so you'll need to refresh your browser to see updates after saving. Follow your progress by opening `http://localhost:3000` in your browser (after starting the server). When you load this for the first time without any changes, you'll see the finished product of what we're going to build. When you're ready to start working, just delete the preceding `