【react】小项目_react小项目-CSDN博客

本文链接：https://blog.csdn.net/weixin_41530639/article/details/107699854

本文档详细介绍了如何从头开始构建一个React小项目，包括配置`index.js`、`package.json`、`App.scss`、`App.js`等核心文件，以及在`src/components`目录下创建组件，如`index.js`，`new/index.jsx`和`new/index.css`。此外，还提到了`body/index.jsx`用于处理页面主体部分，以及`mock/name.json`用于模拟数据的使用。

摘要由CSDN通过智能技术生成

react

在这里插入图片描述

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as Api from './untils'

React.Component.prototype.$http = Api

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

package.json:

{
   
  "name": "lbx-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
   
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.2",
    "jquery": "^3.5.1",
    "json-server": "^0.16.1",
    "less-loader": "^6.2.0",
    "node-sass": "^4.14.1",
    "postcss-selector-parser": "^6.0.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "sass-loader": "^9.0.2"
  },
  "scripts": {
   
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server --watch ./mock/index.json --port 5000"
  },
  "eslintConfig": {
   
    "extends": "react-app"
  },
  "browserslist": {
   
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.scss:

.root{
   
  border-top:1px solid transparent;
}
.main{
   
  width:60%;
  margin:100px auto 0px;
  border:1px solid #000;
}
p{
   
  margin:0;
}
.main .top{
   
  display: flex;  
  text-align:center;
  line-height:30px;
  border-bottom:1px solid #e2e2e2;
}
.main p .title{
   
  width:80%;
}
.main p #add{
   
  color:#333;
  font-size: 14px;
  font-weight: 600;
  width: 20%;
  text-align:center;
}
.main p #add input{
   
  width: 50%;
  text-align:center;
  cursor: pointer;
  border:1px solid #e2e2e2;
  padding:2px;
  border-radius:4px;
}
.main{
   
  table{
   
    width: 100%;
    thead{
   
      tr{
   
        height:30px;
        th{
   
          font-size: 14px;
          font-weight: 400;
          line-height:30px;
          border-right:1px solid #e2e2e2;
          padding:0 39px;
        }
        #act{
   
          border:0;
        }
      }
    }
    tbody{
   
      tr{
   
        td{
   
          border-top:1px solid #000;
          font-size: 14px;
          font-weight: 400;
          line-height:30px;
          text-align: center;
          border-right:1px solid #e2e2e2;
          padding:0 39px;
        }
        #act{
   
          border:0;
          border-top: