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