npm install -g create-react-app 或  cnpm install -g create-react-app 或  yarn add -g create-react-app

create-react-app  myReact（项目名，注意大小写）    cd myReact    npm start  或 yarn start

┌── public // 公共资源文件
│ ├── favicon.ico // 是浏览器tab上图标，也是这个项目的一个标志，也可以说是代表一个公司的标志。可以替换。
│ ├── index.html // 主文件
│ └── manifest.json // 编译配置文件
│
├── node_modules // 项目依赖包文件夹
├── src // 我们的项目的源码编写文件（里面的文件可根据喜好，随意更改）
│ ├── component // 组件文件，存放所有的组件
│ │ └── PageHome // 组件文件夹（每个组件都有自己的css和js文件或者图片等，所以每个组件都创建一个文件夹，习惯首字母大写）
│ │ ├── index.js // 组件文件夹
│ │ └── index.css // 组件文件夹
│ ├── App.js // 入口组件，其他组件会被包裹此组件中，此组件通过index.js再插入 index.html 文件里，形成单页面应用；
│ ├── index.js // 存放的是这个项目的核心内容，也就是我们的主要工作区域。其中，index.js文件是和index.html进行关联的文件的唯一接口，类似vue里面的main.js。
│ └── serviceWorker.js //
├── package-lock.json // npm5 新增文件，优化性能
├── package.json // 项目依赖包配置文件（node配置文件）
└── README.md // 项目说明文档

npm insatll classnames --save    // 样式类名插件

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals';  // TableBase 是定义的一个组件 import TableBase from './table';  //获取节点元素 const root = ReactDOM.createRoot(document.getElementById('root')); // 用ReactDOM.render来将元素渲染到页面中 root.render(   <React.StrictMode>     <TableBase />   </React.StrictMode> );  // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals //测试 reportWebVitals(console.log("123"));

/* eslint-disable no-unused-vars */ //导入样式和组件 import './table.css' import { useState } from 'react' import React from 'react'  //导出创建的函数 export default function TableBase() {     //定义数据   // 声明一个叫 "products" 的 state 变量   const [products, setProduct] = useState([{     title: 'paint pot',     quantity: 9,     price: 3.95   }, {     title: 'polka dots',     quantity: 17,     price: 12.3   }, {     title: 'pebbles',     quantity: 5,     price: 6.71   }, {     title: 'Mi Note5',     quantity: 8,     price: 2985.6   }, {     title: 'iPhone XS',     quantity: 10,     price: 8906.72   }]);     //求价钱总和   const sum = function () {     let sum1 = 0;     products.forEach(item => {       sum1 += (item.price * item.quantity);     });     return sum1;   }     //格式化价格   const formatPrice = function (value, n) {     return "￥" + value.toFixed(n);   }     //实现双向绑定   const [inputValue, setInputValue] = useState('');    //移除   const clickShow = (index) => {     var newList = [...products];     newList.splice(index, 1);     setProduct(newList);   }    //加   const plus = (product, index) => {     var newList = [...products];     product.quantity++;     newList.splice(index, 1, product);     setProduct(newList)   }    //减   const reduce = (product, index) => {     var newList = [...products];     if (product.quantity <=1) {       newList.splice(index, 1);       setProduct(newList);     } else {       product.quantity--;       newList.splice(index, 1, product);       setProduct(newList)     }   }     return (     <table className="cartTable">       <thead>         <tr>           <th>序号</th>           <th>名称 </th>           <th>单价</th>           <th>数量</th>           <th>小计</th>           <th>操作</th>         </tr>       </thead>       <tbody>         {products.map((item, index) => (           <tr key={index} className={index % 2 === 0 ? "bg" : null} >             <td>{index + 1}</td>             <td>{item.title}</td>             <td>{formatPrice(item.price, 2)}</td>             <td>               <button onClick={() => plus(item, index)}>+</button>               <input type="text" value={item.quantity} onChange={e => {                 setInputValue(e.target.value);               }}></input>               <button onClick={() => reduce(item, index)}>-</button>             </td>             <td>{formatPrice(item.price * item.quantity, 2)}</td>             <td>               <button onClick={() => clickShow(index)}>移除</button>

            </td>           </tr>         )         )}       </tbody>       <tfoot>         <tr>           <td colSpan="6">             {formatPrice(sum(), 2)}           </td>         </tr>       </tfoot>     </table>   ) }

.cartTable{     width: 100%;     border: 2px solid #666;     border-collapse: collapse; } .cartTable th{     background: pink;     position: relative;     height: 30px;     }  .cartTable tr{     text-align: center; }  .cartTable th .top-img{     position: absolute;     top: 0px;     width: 20px; }  .cartTable th .bottom-img{     position: absolute;     bottom: 0px;     width: 20px; } .cartTable th,.cartTable td{     border: 2px solid #666;     border-collapse: collapse; } tfoot tr td{     text-align: right;     padding: 10px;     font-size: 18px;     font-weight: bold;     color: red; } .bg{     background: #def; }