React初学，制作一个简单的留言板demo

首先先简单认识一下React，它是目前前端三大主流框架之一，其次还有Vue、Angular。
                             React 是一个用于构建用户界面的 JavaScript 库


特点：
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
JSX：总的来说是可以把HTML直接写JS里
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
核心：组件        精髓：函数式编程
安装react脚手架： npm install create-react-app -g
创建：create-reacr-app 项目名
启动：npm star
============================================
接下来是demo
下载完react脚手架后会生成相对的项目结构

图片：项目结构.png

在此基础上新建一个文件夹，方便管理和编写

图片：文件夹.png

首先创建四个js文件夹，分别为Comment.js、CommentBox.js、CommentForm.js、CommentList.js
首先在index.js下，

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import CommentBox from './comments/CommentBox';
import * as serviceWorker from './serviceWorker';
let commitlist=[
  {name:'王',date:'2020-10-10',content:'哈哈哈'},
  {name:'吴',date:'2020-10-11',content:'嘿嘿嘿'},
  {name:'陈',date:'2020-10-12',content:'嘻嘻嘻'}
]
ReactDOM.render(
  <React.StrictMode>
    <CommentBox data={commitlist}/>
  </React.StrictMode>,
  document.getElementById('root')
);

然后是CommentBox.js

import React, {Component} from 'react';  //导入react
import CommentList from './CommentList';
import CommentForm from './CommentForm';
import './css/CommentBox.css'
//xxx 组件名
class CommentBox extends React.Component {
  //获取index.js传过来的值
  constructor(props){
    super(props);
    this.state = {
      data : this.props.data,
      editToggle:Array(this.props.data.length).fill(false)
    }
  };
  //表单提交
  handleCommentSubmit(comment){
    this.setState({
      data:this.state.data.concat([comment])
    })
  }
  //删除函数
  handleCommentDelete(index){
    const data = this.state.data.slice(0),
      editToggle = this.state.editToggle.slice(0);
    console.log(data);
    console.log(editToggle);
    data.splice(index,1);
    editToggle.splice(index,1);
    this.setState({
      data:data,
      editToggle:editToggle
    })
  }
//
//渲染
    render() {
        return (
            <div className='CommentBox'>
              <CommentList
                {...this.state}
                handleCommentDelete = {(index)=>this.handleCommentDelete(index)}
              />
              <CommentForm handleCommentSubmit={(comment)=> this.handleCommentSubmit(comment)}/>
            </div>
        )
    }
}
export {CommentBox as default}

将方法定义在最大的组件内然后再依次传递到子组件内

然后是CommentList.js

import React,{Component} from 'react';  //导入react
import Comment from './Comment';
import './css/CommentList.css'
//xxx 组件名
function CommentList (props){
//渲染
      console.log(props.data)
      let CommentList = props.data.map((item,index)=>{
        let {name,date,content}=item;
        item.index = index
        return   <Comment
          key={index}
          name={name}
          date={date}
          editToggle={props.editToggle[index]}
          handleCommentDelete={() => props.handleCommentDelete(index)}>
          {content}
        </Comment>
      });
        return (
            <div className="CommentList">
              {CommentList}
            </div>
        )
}
export default CommentList;

然后是CommentForm.js

import React, {Component} from 'react';  //导入react
import  './css/CommentForm.css';  //导入react
//xxx 组件名
class CommentForm extends React.Component {
  handleSubmit(e){
   e.preventDefault();
   let content = this.refs.content.value,
     name = this.refs.name.value,
     date = new Date().toLocaleString(),
     waring = this.refs.waring;
   if (!name){
     waring.innerHTML = "姓名不能为空";
     return null
   }else if (!content){
     waring.innerHTML = "评论不能为空";
     return null
   }else {
     waring.innerHTML = " ";
   }
   this.props.handleCommentSubmit({name,date,content})
  }
//渲染
    render() {
        return (
            <form className="CommentForm" onSubmit={(e)=>this.handleSubmit(e)}>
              <p className='waring' ref='waring'></p>
              <p><input type="text" placeholder='姓名' ref='name' className='sname'/></p>
              <p>
                <textarea name="" id="" cols="33" rows="5" placeholder='请输入...' ref='content'></textarea>
              </p>
              <p className='btn'>
                <button>发送</button>
              </p>
            </form>
        )
    }
}
export { CommentForm as default }

最后是Comment.js

import React,{Component} from 'react';  //导入react
import './css/Comment.css';  //导入react
//xxx 组件名
class Comment extends React.Component {
//渲染
    render() {
        return (
          <div className='Comment'>
            <p>
              <span>{this.props.name}</span>
              <span>{this.props.date}</span>
              <span onClick={this.props.handleCommentDelete} className='deletebtn'>删除</span>
            </p>
            <p>{this.props.children}</p>
          </div>
        )
    }
}
export { Comment as default }

效果图

图片：QQ图片20200627221743.png

输入

图片：QQ图片20200627221858.png

点击发送

图片：QQ图片20200627221909.png