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

迷南。 2022-11-27 08:49 250阅读 0赞

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

### React 脚手架安装使用 ###

### [Create React App 值得一看][Create React App] ###

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

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

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

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

### 项目目录 ###

![20200814162757823.PNG][]

> node\_modules -- 放置项目依赖的第三方包
> 
> public -- 公共文件
> 
> src -- 项目的主要源代码
> 
> package-lock.json -- 确定当前安装包的依赖 ，以便后续安装时生成相同的依赖（可以锁定安装包的版本）
> 
> package.json -- 应用包配置文件
> 
> README.md -- 项目说明文件

**注意：**

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

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

### demo 实践 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

2、需求分析

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

3、开发思路

拆分组件：

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

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

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

4、主要代码

完整demo 代码已上传码云，之后练习demo同样写在该项目中 [https://gitee.com/xiaozhidayu/my-react][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组件传值及状态更新

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

[Create React App]: https://create-react-app.dev/docs/folder-structure
[20200814162757823.PNG]: /images/20221124/b3f57e3d9f784ca1a1d0016bc48ed1e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221124/18451493d5364128b904bab807ec0df1.png
[https_gitee.com_xiaozhidayu_my-react]: https://gitee.com/xiaozhidayu/my-react