ReactJS - Getting Started -2

In my previous post we discussed on creating a todo app and we have creates a list of todo where we passed data. Now let’s enhance the same todo app and see if we can add “edit” button. So we are going to make the list of todo as read only and once user click on edit button, the list should be editable.
By this example we will cover on how we can make different communicate with each other.
Initialization of app will not have any changes as such –
var _todos = [{id: 1, text: "This is one comment"},{id: 2, text: "This is *another* comment"}];
ReactDOM.render(,document.getElementById('todo'));
As there are 2 modes, editable and non editable, we will maintain a state to begin with.
Also we need to have a click handler for our edit button. In React, the data flows unidirectional and it is recommended to implement on the same line. In our code, todolist and edit button are 2 components loaded at same level(there is no parent child relation) so if we want to make communication between these components. We need to pass a handler from parent to child button. Once button is pressed, it will notify parent about this, and then parent can communicate this to child components via state change.
Edit button –
var EditButton = React.createClass({
    render:function(){
        return();
    }});
We created a html button and we have a prop associated with it – “onClick”. If you see carefully we have passed the handler in props from parent.so on click of the button we will be executing the handler passed.
TodoApp –
In toDoApp component, we modified the render function and have introduced “EditButton”. Also we introduced 2 functions – getInitialState and handleEdit.
getInitialState is function which sets the initial state of the component. We are require to put the default value of state that we are planning to use (else component will throw error).
handleEdit – this is the function we introduced so that we can handle the click of edit button in the parent. In this function we just modify the state of the component. Once the component’s state is modified, react will call the render function of component with new state. If we see that any child component need not to refresh, then we will have to explicitly stop its rendering.
var TodoApp = React.createClass({
    getInitialState: function() {
        return {
            editview: false            //by default read only view
        };
    },
    handleEdit:function(){
        this.setState({
            editview: true    // on click of edit, change state to editable.
        });      
    },
    render: function () {
        return (
           

                           

               
               
           
        );
}});
If you see above, we passed another prop as “editable” to ToDoList, which will make use this prop to set todo as editable or not.
There is not much change in the ToDoList, we are just passing new prop to Todo component.
var TodoList = React.createClass({  
    render: function(){
        var todos  = this.props.todos;
        var editable = this.props.editable;
        var todoNodes = todos.map(function(todo){return ();}            
    );
    return (

{todoNodes}

);
    }
});
In Todo component, we are just consuming this new field from prop and making the input as disable/enable.
var Todo = React.createClass({
    render: function(){
        var todo = this.props.current;
        var edit = this.props.edit === true;              
        if(!edit){
            return();      
        }
        return();      
    }});

ReactJS - Getting Started -1

This post is continuation on my previous post -

If you have not see it, i ll suggest to go over it first, that will give you basic understanding on React.

In this post we want to learn component structure and how component fit within each other. We will also cover how these component communicate with each other.

Let’s try to create a sample ToDo app which can render a list of ToDos. 

To begin with we will create a ToDoApp and will create child component within it and will render the todo.

Here is the structure of todo app – 

We need to create 3 components here- 

TodoApp

TodoList

Todo

Here is raw structure of each of them  - 

var TodoApp = React.createClass({

    render: function () { 

        return (

                     

        );

}});

var TodoList = React.createClass({    

    render: function(){        

        //render all todos ()

    );

});

var Todo = React.createClass({

    render: function(){

        return(

som items

);        

    }

});

This is how we will render the todo app – 

ReactDOM.render(,document.getElementById('todo')); // assuming there is a div with id “todo”

Lets try to fill all these components further and see if we can have working app. 

If we want to render something in our Todo app, we need to pass some data. In React we make use of props to pass any data from parent to child.

var _todos = [  {id: 1, text: "This is one comment"},  {id: 2, text: "This is *another* comment"}]; //Sample data

ReactDOM.render(,document.getElementById('todo')); // sample data passed as prop to TodoApp component.

Consume the props – 

We need to consume this data in TodoApp, so let’s modify our default implementation  - 

var TodoApp = React.createClass({

    render: function () { 

        return (

                     

        );

}});

If you see closely we consumed the todos pass using this.props.todos and passing it to TodoList as another prop “todos”.

let modify TodoList to consume this prop  - 

var TodoList = React.createClass({    

    render: function(){

        var todos  = this.props.todos; // Get list of todo from prop

        var todoNodes = todos.map(function(todo){return ();}); // loop over all items and create node for each

        return (

{todoNodes}

); // return the nodes 

    }});

If you see carefully we are looping over the todo list and then creating the node for each todo. We are passing the actual todo object as “current” prop in the todo component. Let have a look at modified code of ToDo - 

var Todo = React.createClass({

    render: function(){

        var todo = this.props.current;

        return(

{todo.id}- {todo.text}

);        

    }});

In the above component we are just displaying the id and text.