React is a JavaScript library for building composable user interfaces. It’s the V in MVC. React is used by many of the big names in tech and it’s heavily used by it’s creator Facebook, in it’s own products. You can learn more about React and it’s getting started guides here. Trust me, it’s worth the effort ;)
My todo app is live for demo at https://abdulhannanali.github.io/todo-react/ . Hope you try :)
Getting started with React
The best way to get started with anything is to jump right in it, as quickly as possible, and React team has made it very simple to downlaod the Starter Kit of the latest version of the react. It contains react source files and also some little nice examples to play with.
After downloading this, I also followed the React tutorial on Thinking in React and it was quite comprehensive and made me able to think my Todo App UI the React way.
After a little practice with React, writing simple little programs, I was able to divide my Todo App UI into different components. The UI was divided into the following components for the purposes of modularity.
- TodoList Component (Main TodoList Component holds everything together)
- TodoForm Component (Form Comonent for the addition of todos)
- Todos Component
- Todo Component
Build System with gulp
I upped my game by moving from the browser based babel and react, to the way pros write their React code. Yes, they write it in node using browserify. I choose gulp cos it’s actually the best build system. Writing a build file was actually a no easy thing though. This let me use all the ES6, Babel, React and all the Node goodness for my browser. After the references from many tutorials and some documentation scrolling, I was able to put together a gulpfile. You can see the source code of my gulpfile.js here.
Starting the real code
I took a mixed top down approach for writing the code, it’s just the way how the functionality I thought was designed. The major source files for my ReactTodo App were in src folder. I didn’t worry about managing states at all and the first version of my react app was static built using dummy data and it was quite beneficial. At some point I just shifted from using React.createClass to ES6 Classes because of the less code clutter.
The components layouts were made sophisticated after each iteration till the final product which is now demoed on the site.
Managing states in React application
Most of the application state was managed in the TodoListComponent since it was a common component between TodoForm and Todos. The todos data was a state of TodoListComponent and was passed as a property to Todos for display. If you are not familiar with how properties are passed in React, this is one of the way to do it:
<Todos todos={todosData} />
Here, I am passing todosData to Todos so it can do something with it.
Inverse data flow for events
React goes from top to bottom and that means properties passed to a Component can’t be mutated, so in order to change state of a Parent from a child, a function is passed as a reference which is then called with data, when the state is to be changed. An example of this,
updateTodo: function () {I implemented inverse
// some todo update logic
},
render: function () {
<Todo updateTodo={this.updateTodo}/>
}
In this way, inverse data flow was implemented at many places in my app.
The eventing in my app was done using inverse data flow. You can see source code for more information on how I actually implemented them.
Rendering in the ReactDOM
Final rendering was a really simple process and it was done in src/index.js. Here, TodoListComponent was required and then rendered within the DOM element with id “divContainer” using ReactDOM.render function
IT WAS AWESOME
My experience with React was awesome, It’s simplicity and Composition has made me love the client side development. In the near future, I am going to do something really nice with React and also using it in combination with other goodies from Facebook such as Flux and Relay.
OpenSource and Contribution
The code of my todo list is open source and you can view it here. Please feel to contribute. :)
Google CodeIn
This blog post was written as part of a task in Google CodeIn with FOSSASIA organization. FOSSASIA is playing a major role in promoting open source culture and development in the Asia and all over the world. Learn more about FOSSASIA here