1. Create projects

The global download`npm i create-react-app -g `Create a new React project'create-react-app project name' 
    Tips: The project name cannot be capitalizedCopy the code

2. Determine the project directory structure and remove unnecessary files

Reactdemo - node_modules - public (public files, public templates, ICONS, etc.) - favicon.ico (logo loaded in the browser) - index.html (homepage template file) - SRC (source directory, Directories for main operations) - API (Web request code, utility class functions and related configurations) - Assets (font configuration and global styles) - Components (reusable UI components) - Pages (Page components) - CommentList - Commentitem-index.jsx - index.jsx - ContentComment - index.jsx - router for unified management - styles - utils -store -app.js (root component) -index.js (entry file) -gitignore (this is git's optional configuration file) -package-lock. json (lock version info) - package.json (NPM package configuration file, which defines the project's NPM dependencies)Copy the code

index.html

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="# 000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
Copy the code

App.js

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>)}export default App
Copy the code

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>.document.getElementById('root'))Copy the code

Enter the project directory and run NPM start on the terminal

The appearance of this interface proves that the basic project has been built

Add bootstrap. CSS to index.html

App.js

import ContentComment from './pages/ContentComment'
import CommentList from './pages/CommentList'
import { useState } from 'react'
function App() {
  const [comments, setComments] = useState([
    {
      id: 1.username: 'zs'.content: '666'}, {id: 2.username: 'ls'.content: '666777'}, {id: 3.username: 'ww'.content: '666888',}])const addComment = (username, content) = > {
    let newComments = [...comments]
    newComments.unshift({
      id: Date.now(),
      username,
      content,
    })
    setComments(newComments)
  }

  const delComment = (id) = > {
    let newComments = comments.filter((comment) = >comment.id ! == id) setComments(newComments) }return (
    <div className="App">
      <header className="site-header jumbotron">
        <div className="container">
          <div className="row">
            <div className="col-xs-12">
              <h1>Comment on React</h1>
            </div>
          </div>
        </div>
      </header>
      <div className="container">
        <ContentComment addComment={addComment}></ContentComment>
        <CommentList comments={comments} delComment={delComment}></CommentList>
      </div>
    </div>)}export default App

Copy the code

ContentComment–> index.jsx

import React, { useState } from 'react'

export default function ContentComment(props) {
  // console.log(props)
  const { addComment } = props
  const [username, setUsername] = useState(' ')
  const [content, setContent] = useState(' ')

  const changeUsername = (e) = > {
    setUsername(e.target.value)
  }
  const changeContent = (e) = > {
    setContent(e.target.value)
  }
  const add = (e) = > {
    e.preventDefault()
    console.log(username, content)
    addComment(username, content)
    setUsername(' ')
    setContent(' ')}return (
    <div className="col-md-4">
      <form className="form-horizontal">
        <div className="form-group">
          <label>The user name</label>
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            value={username}
            onChange={changeUsername}
          />
        </div>
        <div className="form-group">
          <label>Comment on the content</label>
          <textarea
            className="form-control"
            rows="6"
            placeholder="Comment content"
            value={content}
            onChange={changeContent}></textarea>
        </div>
        <div className="form-group">
          <div className="col-sm-offset-2 col-sm-10">
            <button
              type="submit"
              className="btn btn-default pull-right"
              onClick={add}>submit</button>
          </div>
        </div>
      </form>
    </div>)}Copy the code

CommentList –> index.jsx

import React from 'react'
import './index.css'
import CommentItem from './CommentItem'

export default function CommentList(props) {
  const { comments, delComment } = props
  return (
    <div className="col-md-8">
      <h3 className="reply">Comment reply:</h3>
      {comments.length ? (
        <ul className="list-group">
          {comments.map((comment) => {
            return (
              <CommentItem
                key={comment.id}
                comment={comment}
                delComment={delComment}></CommentItem>)})}</ul>
      ) : (
        <h2>No comment, click left to add a comment!!</h2>
      )}
    </div>)}Copy the code

CommentList –> index.css

.reply {
  margin-top: 0px;
}

Copy the code

CommentItem–> index.jsx

import React from 'react'
import './index.css'

export default function CommentItem(props) {
  // console.log(props)
  const { delComment } = props
  const { username, content, id } = props.comment

  const del = (username, id) = > {
    return () = > {
      // If (confirm(' Are you sure you want to delete ${username} comment? `)) {
      // delComment(id)
      // }
      delComment(id)
    }
  }
  return (
    <>
      <li className="list-group-item">
        <div className="handle">
          <span onClick={del(username, id)} >delete</span>
        </div>
        <p className="user">
          <span>{username}</span>
          <span>Said:</span>
        </p>
        <p className="centence">{content}</p>
      </li>
    </>)}Copy the code

CommentItem–> index.css

li {
  transition: 0.5 s;
  overflow: hidden;
}

.handle {
  width: 40px;
  border: 1px solid #ccc;
  background: #fff;
  position: absolute;
  right: 10px;
  top: 1px;
  text-align: center;
}

.handle a {
  display: block;
  text-decoration: none;
}

.list-group-item .centence {
  padding: 0px 50px;
}

.user {
  font-size: 22px;
}

Copy the code

over!!!!!!