In this video we are going to learn, how to create Todo App in react.
So lets see how can we create Todo App.
So switch to the project.
This is the new project of react.
Now just open App.js.
Inside this there is a function component.
Now change this function component to class component.
For just write here.
import React , {Component} from 'react';
class App extends Component{
   render() {
    return(
        <div> Todo </div>
    )
  }
}
Now add here the state and create todo object array and inside this object array put some object.
 state = {
    todos:[
      {id:1,content:'buy pen'},
      {id:2,content:'buy pencil'}
    ]
}

Now create a new component lets say component name is Todos.js.
Now open it and here just write the following code.

import React from 'react';

const Todos=({todos})=>{
    const todoList = todos.length? (todos.map(todo =>{
        return(
            <div className=\"list-group\" key={todo.id}>
                <a herf=\"#\" onClick={()=>{deleteTodo(todo.id)}} className=\"list-group-item list-group-item-action list-group-item\">
                    {todo.content}
                </a>
            </div>
        )
    })):(<p>There is no any todo</p>);
    return(
        <div className=\"container\">
            <div className=\"row\">
                <div className=\"col-md-6 offset-md-3\">
                    {todoList}
                </div>
            </div>
        </div>
    )
}

export default Todos;

Alright now go to the getbootstrap.com.
and here just click on Get Started.
Now copy this botstrap.min.css cdn and paste inside the index.html which is in public folder.
Now copy bootstrap.min.js cdn and paste just before the closing body tag on index.html page.
Now lets create another new component.
Let say component name is AddTodo.js.
Now open this file and write the following code.

import React,{Component} from 'react';

class AddTodo extends Component{
    state = {
        content:''
    }

    handleChange=(e)=>{
        this.setState({
            content:e.target
        });
    }

    handleSubmit=(e)=>{
        e.preventDefault();
        this.props.AddTodo(this.state);
        this.setState({
            content:''
        });
    }
    render(){
        return(
            <div className=\"container\">
                <div className=\"row\">
                    <div className=\"col-md-6 offset-md-3\">
                        <form onSubmit={this.handleSubmit}>
                            <div className=\"form-group\">
                                <label>Add New Todo</label>
                                <input type=\"text\" className=\"form-control\" id=\"todo\" onChange={this.handleChange} value={this.state.content} />
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

export default AddTodo;

Now go to the App.js and here import Todos and AddTodo and use this as following.

import React, {Component} from 'react';

import Todos from './components/Todos';
import AddTodo from './components/AddTodo';

class App extends Component{
    state = {
        todos:[
            {id:1,content:'buy pen'},
            {id:2,content:'buy vegitables'}
        ]
    }

    addTodo=(todo)=>{
        todo.id = Math.random();
        let todos = [todo,...this.state.todos];
        this.setState({
            todos:todos
        });
    }

    deleteTodo =(id)=>{
        const todos = this.state.todos.filter(todo=>{
            return todo.id != id
        });
        this.setState({
            todos:todos
        });
    }

    render(){
        return(
            <div>
                <h3 className=\"text-center\">React App</h3>
                <AddTodo />
                <Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
            </div>
        )
    }
}

Now lets check so switch to the browser.
Now lets add some todo so enter todo in text box.
And after entering the enter key.
You will get the todo in list.
Now for deleting todo lets click on todo on list.
After click on list item will be removed.
So in this way you can create Todos App in React Js.