React项目11.创建项目 2.确定项目目录结构，去掉不需要的文件 index.html App.js index.j

1.创建项目

    全局下载  `npm i create-react-app -g `
    创建一个新的react项目 `create-react-app 项目名称` 
    Tips:项目名称不能大写

2.确定项目目录结构，去掉不需要的文件

reactdemo
    - node_modules
    - public（公共文件，公用模板和图标等）
        - favicon.ico (在浏览器上加载的logo)
        - index.html（首页模板文件）
    - src(源码目录，主要操作的目录)
        - api（网络请求代码、工具类函数和相关配置）
        - assets（存放字体配置及全局样式）
        - components（存放可复用的UI组件）
        - pages（存放页面组件）
            - CommentList
                - CommentItem
                    - index.jsx
                - index.jsx
            - ContentComment
                - index.jsx
        - router（存放路由配置文件）便于统一管理
        - styles（存放css文件）
        - utils （工具库）
        - store （存放redux相关文件）
        - App.js（根组件）
        - index.js(入口文件)
    - gitignore （这个是git的选择性上传的配置文件）
    - package-lock.json（上线锁定版本信息）
    - package.json（npm包配置文件，定义了项目的npm依赖包）

index.html

<!DOCTYPE html>
<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>

App.js

function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  )
}

export default App

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')
)

进入项目目录 , 终端运行npm start

出现这个界面就证明基础项目搭建好了

3.搭建html结构在index.html中引入bootstrap.css

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>请发表对React的评论</h1>
            </div>
          </div>
        </div>
      </header>
      <div className="container">
        <ContentComment addComment={addComment}></ContentComment>
        <CommentList comments={comments} delComment={delComment}></CommentList>
      </div>
    </div>
  )
}

export default App

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>用户名</label>
          <input
            type="text"
            className="form-control"
            placeholder="用户名"
            value={username}
            onChange={changeUsername}
          />
        </div>
        <div className="form-group">
          <label>评论内容</label>
          <textarea
            className="form-control"
            rows="6"
            placeholder="评论内容"
            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}>
              提交
            </button>
          </div>
        </div>
      </form>
    </div>
  )
}

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">评论回复：</h3>
      {comments.length ? (
        <ul className="list-group">
          {comments.map((comment) => {
            return (
              <CommentItem
                key={comment.id}
                comment={comment}
                delComment={delComment}></CommentItem>
            )
          })}
        </ul>
      ) : (
        <h2>暂无评论，点击左侧添加评论！！！</h2>
      )}
    </div>
  )
}

CommentList --> index.css

.reply {
  margin-top: 0px;
}

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(`你确定要删除${username}的评论吗？`)) {
      //   delComment(id)
      // }
      delComment(id)
    }
  }
  return (
    <>
      <li className="list-group-item">
        <div className="handle">
          <span onClick={del(username, id)}>删除</span>
        </div>
        <p className="user">
          <span>{username}</span>
          <span>说:</span>
        </p>
        <p className="centence">{content}</p>
      </li>
    </>
  )
}

CommentItem--> index.css

li {
  transition: 0.5s;
  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;
}

public文件夹下的index.html需要引入<link rel="stylesheet" href="./bootstrap.css" />

React项目1

over!!!!!!