将jquery转换为react组件或纯javascript

我有简单待办事项列表的示例jQuery代码。如何将其转换为纯javascript或react js组件

<div class="todo-list container">
  <ul class="list-your-todo">
    <li>
      <input type="text" name="name" class="form-control" placeholder="Name" value="" />
      <p class="deleteList">- Delete this</p>
    </li>
  </ul>
  <p class="addList">+ Add another</p>
</div>

$(function(){
  $('.addList').click(function(){
    var $liLength = $(".list-your-todo li").length;
    var list = $('.todo-list').find('.list-your-todo li:first').html();
    $('.todo-list ul').append('<li class="clearfix showIcon">' + list + '</li>');
  });  
  $(document).on('click', '.deleteList', function(){
    $(this).parent('li').remove();
  });
});

-删除此


+再添加一个
$（函数（）{
$（'.addList'）。单击（函数（）{
var$liLength=$（“.列出您的待办事项”）.length；
var list=$（'.todo list'）.find（'.list您的todo li:first'）.html（）；
$（'.todo list ul'）。追加（'
'+list+'
'）；
});  
$（文档）.on（'单击'，'.deleteList'，函数（）{
$（this.parent（'li'）.remove（）；
});
});

---

这是一个工作演示

到纯JavaScript的转换非常简单，尽管有点冗长，您需要再添加一个由jQuery自动执行的元素存在性检查

const addList=document.querySelector（'.addList'）；
addList.addEventListener（'单击'，事件=>{
const liLength=document.queryselectoral（'.list your todo li'）.length；
let list=document.querySelector（'.todo list li'）；
list？list=list.innerHTML:list=undefined；
const item=document.createElement（'li'）；
item.className='clearfix showIcon'；
item.innerHTML=列表；
document.querySelector（“.todo list ul”）.appendChild（项）；
});
document.body.addEventListener（'click'，event=>{
如果（event.target.className==='deleteList'）{
event.target.parentNode.remove（）；
}
});
.todo列表{
填充：50px 0px；
位置：相对位置；
宽度：500px
}
保险商实验室{
列表样式：无；
}
李{
边缘底部：40px；
线高：24px
}
输入{
边缘底部：10px；
}
.deleteList、.addList{
光标：指针；
位置：绝对位置；
字体大小：粗体；
字体大小：20px；
}
.deleteList{
右：0；
}
.地址列表{
左：0；
}



-删除此


+再添加一个
React.js入门。这是一个有用的教程，可以帮助您开始编写自己的React.js组件：