React 初探 [七] 使用React脚手架创建项目并实现评论功能

程序员文章站 2022-03-16 17:08:52

...

实践出真知！！！了解了React 一些基础之后，那么在实际开发中，React 框架是怎么使用的呢，和 VUE 一样，他们都有比较完善的生态系统，今天就先来探探react 脚手架的使用，并在项目中实现包含添加删除的评论功能。

React 脚手架安装使用

Create React App 值得一看

全局安装脚手架：npm install -g create-react-app

使用脚手架创建项目：create-react-app my-react

切换到项目目录: cd my-react

运行项目：npm start 具体什么命令要看package.json 中的配置

项目目录

React 初探 [七] 使用React脚手架创建项目并实现评论功能

node_modules -- 放置项目依赖的第三方包

public -- 公共文件

src -- 项目的主要源代码

package-lock.json -- 确定当前安装包的依赖，以便后续安装时生成相同的依赖（可以锁定安装包的版本）

package.json -- 应用包配置文件

README.md -- 项目说明文件

注意：

新创建的项目中有两个文件一定要有，就是不能修改名字，要不然react 找不到入口

public/index.html 项目主页面;
src/index.js js 代码的入口文件.

demo 实践

1、整体效果如下可以添加删除无评论时显示提示文本（请忽略布局的美观性）

React 初探 [七] 使用React脚手架创建项目并实现评论功能

2、需求分析

可以输入用户名及评论内容提交评价
评价后的内容在右侧评论列表动态显示
评论列表的评论支持删除
在没有评论时文字提示

3、开发思路

拆分组件：

最外围：APP 组件
添加评论组件 comment-add
评论列表组件 comment-list
Item 项组件 comment-item

实现静态组件：写静态页面创建组件并渲染

实现动态组件：初始化数据设置事件监听实现业务逻辑

4、主要代码

完整demo 代码已上传码云，之后练习demo同样写在该项目中 https://gitee.com/xiaozhidayu/my-react

根组件 App

// import React from 'react'
import React, { Component } from 'react'

import '../../App.css'
import CommentAdd from '../comment-add/commentAdd'
import CommentList from '../comment-list/commentList'
class App extends Component {
  // constructor(props) {
  //   super(props)
  //   let time = new Date().getTime()
  //   let time2 = Date.now()
  //   this.state = {
  //     comments: [
  //       { time: time, name: 'Jane', content: 'good' },
  //       { time: time, name: 'Jane', content: 'good' },
  //     ],
  //   }
  // }
  state = {
    comments: [
      { name: 'Jane', content: 'good' },
      { name: 'Jane', content: 'good' },
    ],
  }

  addComment = (comment) => {
    console.log('addComment')
    const { comments } = this.state
    comments.unshift(comment)
    this.setState(comments)
  }
  delComment = (index) => {
    console.log('delComment')
    const { comments } = this.state
    comments.splice(index, 1)
    this.setState(comments)
  }
  render() {
    const { comments } = this.state
    return (
      <div className="App">
        <header classNameName="site-header jumbotron">
          <div className="container">
            <div className="row">
              <div className="col-xs-12">
                <h1>请发表对React的评论</h1>
              </div>
            </div>
          </div>
        </header>
        <CommentAdd addComment={this.addComment} />
        <CommentList
          comments={this.state.comments}
          delComment={this.delComment}
        />
      </div>
    )
  }
}
// function App() {}

export default App

添加评论组件 comment-add:

/**
 * 静态组件
 * 创建 初始化数据  渲染
 *
 * 动态组件
 * 组件传值 更新数据状态
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class CommentAdd extends Component {
  proptypes = {
    addComment: PropTypes.func.isRequired,
  }
  state = {
    username: '',
    content: '',
  }
  add = () => {
    console.log('add')
    //获取到添加的评论 使用受控组件 和 非受控组件两种方式
    const comment = {
      username: this.state.username,
      content: this.refs.content.value,
    }

    // 添加评论
    this.props.addComment(comment)
    // 清空输入数据
    this.setState({ username: '' })
    this.refs.content.value = ''
  }
  changeName = (event) => {
    const username = event.target.value
    this.setState({ username })
  }
  render() {
    return (
      <div className="col-md-4">
        <form className="form-horizontal">
          <div className="form-group">
            <label>用户名</label>
            <input
              type="text"
              className="form-control"
              placeholder="用户名"
              value={this.state.username}
              onChange={this.changeName}
            ></input>
          </div>
          <div className="form-group">
            <label>评论内容</label>
            <textarea
              className="form-control"
              rows="6"
              placeholder="评论内容"
              ref="content"
            ></textarea>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <button
                type="button"
                className="btn btn-default pull-right"
                onClick={this.add}
              >
                提交
              </button>
            </div>
          </div>
        </form>
      </div>
    )
  }
}
export default CommentAdd

评论列表组件 comment-list:

/**
 * 评论列表模块
 */
import React, { Component } from 'react'
import CommentItem from '../comment-item/commentItem'
import PropTypes from 'prop-types'

class CommentList extends Component {
  // 给组件类指定属性
  static propTypes = {
    comments: PropTypes.array.isRequired,
    delComment: PropTypes.func.isRequired,
  }
  render() {
    const { comments, delComment } = this.props
    const display = comments.length === 0 ? 'block' : 'none'

    return (
      <div className="col-md-8">
        <h3 className="reply">评论回复：</h3>
        <h2 style={{ display: display }}>暂无评论，点击左侧添加评论！！！</h2>
        <ul className="list-group">
          {comments.map((comment, index) => {
            return (
              <CommentItem
                comment={comment}
                delComment={this.props.delComment}
                index={index}
              />
            )
          })}
        </ul>
      </div>
    )
  }
}
export default CommentList

Item 项组件 comment-item

/**
 * 评论Item项
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'

class CommentItem extends Component {
  static propTypes = {
    comment: PropTypes.object.isRequired,
    delComment: PropTypes.func.isRequired,
    index: PropTypes.number.isRequired,
  }

  delete = () => {
    const { comment, delComment, index } = this.props
    console.log('delete')
    if (window.confirm(`确认删除${comment.username}的评论吗？`)) {
      delComment(index)
    }
  }
  render() {
    const { comment } = this.props
    return (
      //   <div>
      //     <h3>CommentItem</h3>
      //   </div>
      <li className="list-group-item">
        <div className="handle">
          <a href="javascript:;" onClick={this.delete}>
            删除
          </a>
          <p className="user">
            <span>{comment.username}</span> <span>说：</span>
          </p>
          <p className="centence">{comment.content}</p>
        </div>
      </li>
    )
  }
}
export default CommentItem

收获

初步了解React 脚手架 react-create-app
了解脚手架创建项目目录及功能结构
理解React 项目中的组件化开发思想
了解React项目的架构及组件拆分
更加了解React组件传值及状态更新

如果被刚刚想了解的小伙伴看到有帮助的话记得点赞奥