react環境搭建

1.安裝安裝nodejs()，

2.安裝npm或者yarn或cnpm()，

3.安裝react腳手架create-react-app：

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

react創建專案

create-react-app  myReact（專案名，注意大小寫）   
cd myReact   
npm start  或 yarn start

react項目結構

┌── 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 // 專案說明檔案

react專案準備

下載相關插件

npm insatll classnames --save    // 樣式類名插件

react專案實作對table表格的渲染（增刪改）

react之index.js

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"));

在src目錄下面創建table.js

理解并使用react的useState
1、為什么有了這個方法
useState()是專門用在函陣列件中的，因為函陣列件本來是沒有狀態的組件，而類組件中可以通過 this.state和this.setState來更新組件狀態，于是 React 16.8 就新增useState這個特性，用來提升函陣列件的性能，

/* 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>
  )
}

在src目錄下面創建table.css

.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;
}

運行的效果圖：

標籤：其他

上一篇：前端開發日常——CSS影片無限輪播

下一篇：Dva.js 快速上手指南