React Tutorial: Creating a Simple Application Using React JS and Flux Architecture. This React.js tutorial will teach you how to create a simple todo application using React JS and the Flux architecture.
React JS is making some waves in the community recently due to its alleged performance increases over other heavy favourites (like Angular JS), especially when it comes to writing out lists. As a result, I am interested in how to write an application that’s easy for the user to use while at the same time being quick to get off the ground. One of the big draws for React JS is the virtual DOM that sits behind the scenes for every view, and it’s the reason why React is said to perform so well.
When a view requires a rerender, the whole thing is rendered into a virtual copy of the DOM. Once that’s complete, React performs a diff between the virtual DOM and the actual DOM, and applies only the changes that the comparison the diff equation indicates. So, what are you hopefully going to learn by the end of this article? Tutorial. 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 commentsA form to submit a commentHooks 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. Running a server # In order to start this tutorial, we're going to require a running server.
In my last two tutorials, I covered the basics of React.js and form error handling in React.js.
In each case, I used hard-coded data. React is a front-end library, providing no easy way to save to, or read information from, a database or file. That is the part we will cover in this tutorial. React is a user interface library, so it is common to use a different library or framework to do all the back-end work. One of the most common pairings is React.js with Node.js. The main React Facebook tutorial does something similar to what we will be doing with this tutorial, and they also provide a Node server, as well as many other server examples within their download files.
Download the tutorial files You can download all the files used in this tutorial from here. Learn React online If you are keen to learn React from the ground-up feel free to check Learn and Understand React JS on Zenva Academy which covers all the basics + lots of bonus topics like React Router and Flux. Tutorial requirements.