React Useless contructor no-useless-constructor problem z propsami

Thu, 01 Jul 2021 21:50:49 +0000





import React, { Component } from 'react';
import { books } from '../data';

class Books extends Component 
{
    constructor(props){
        super(props);
    }

    render(){
        return(
            <div>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Author</th>
                            <th>Year</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            books.map(book=>{
                                return(
                                    <tr key={book.id}>
                                        <td>{book.id}</td>
                                        <td>{book.title}</td>
                                        <td>{book.author}</td>
                                        <td>{book.year}</td>
                                        <td>
                                            <button type="button" className="btn btn-danger">
                                                Delete
                                            </button>
                                            <button type="button" className="btn btn-default">
                                                Edit
                                            </button>
                                        </td>
                                    </tr>
                                    
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}

export default Books;

Na podstawie tego widoku powinna mi się wygenerować tabela z danymi książek, oparta o bootstrapa.
Zanim go stworzyłem, renderował mi się jedynie napis witaj.

import React, { Component } from 'react';
import Books from './containers/Books';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css'
class App extends Component {
  constructor() {
    super(Books);
}

  render(){
    return(
    <div className="App">
      <Books/>
    </div>);
  }
}

export default App;

plik data.js

export const books = [
    {
        id:1,
        title:'Going',
        author:'React Stefan',
        year:'2011',
    },
    {
        id:2,
        title:'React Next Step',
        author:'Go to IT',
        year:'2004'
    }
];

Czy kurs który przerabiam jest już przestarzały i inaczej działa się z propsami?
Tutaj są wypisywane wszystkie błedy i wpisy z konsoli:

Konsola została wyczyszczona. vendors~main.chunk.js:2172:15
src\App.js
  Line 3:8:  'data' is defined but never used  no-unused-vars

src\containers\Books.js
  Line 6:5:  Useless constructor  no-useless-constructor react_devtools_backend.js:2560:23
XHRGEThttp://localhost:3000/6a124c34dbad73be60e8.hot-update.json
[HTTP/1.1 200 OK 17ms]

GEThttp://localhost:3000/vendors~main.6a124c34dbad73be60e8.hot-update.js
[HTTP/1.1 200 OK 1ms]

GEThttp://localhost:3000/main.6a124c34dbad73be60e8.hot-update.js
[HTTP/1.1 200 OK 2ms]

XHRGEThttp://localhost:3000/main.6a124c34dbad73be60e8.hot-update.js
[HTTP/1.1 304 Not Modified 2ms]

XHRGEThttp://localhost:3000/static/js/bundle.js
[HTTP/1.1 200 OK 9ms]

XHRGEThttp://localhost:3000/f79ecb024a8ec9affd36.hot-update.json
[HTTP/1.1 200 OK 2ms]

GEThttp://localhost:3000/vendors~main.f79ecb024a8ec9affd36.hot-update.js
[HTTP/1.1 200 OK 40ms]

GEThttp://localhost:3000/main.f79ecb024a8ec9affd36.hot-update.js
[HTTP/1.1 200 OK 5ms]

XHRGEThttp://localhost:3000/static/js/bundle.js.map
[HTTP/1.1 200 OK 4ms]

XHRGEThttp://localhost:3000/main.6a124c34dbad73be60e8.hot-update.js.map
[HTTP/1.1 200 OK 3ms]

Błąd podczas przetwarzania wartości dla „-webkit-text-size-adjust”.  Deklaracja opuszczona. _reboot.scss:55:2
Nieznana pseudoklasa lub pseudoelement „-moz-focus-outer”.  Zbiór reguł zignorowany z powodu błędnego selektora. _form-range.scss:23:2
Zbiór reguł zignorowany z powodu błędnego selektora. _form-range.scss:38:4
src\App.js
  Line 3:8:  'data' is defined but never used  no-unused-vars

src\containers\Books.js
  Line 6:5:  Useless constructor  no-useless-constructor react_devtools_backend.js:2560:23
XHRGEThttp://localhost:3000/2540cc081a35f9a4fdd9.hot-update.json
[HTTP/1.1 200 OK 9ms]

GEThttp://localhost:3000/main.2540cc081a35f9a4fdd9.hot-update.js
[HTTP/1.1 200 OK 2ms]

Jeżeli odznaczę wszystko i zostawie same błędy to nie ma nic.
A jeżeli zostawie ostrzeżenia

src\App.js
  Line 3:8:  'data' is defined but never used  no-unused-vars

src\containers\Books.js
  Line 6:5:  Useless constructor  no-useless-constructor react_devtools_backend.js:2560:23
src\App.js
  Line 3:8:  'data' is defined but never used  no-unused-vars

src\containers\Books.js
  Line 6:5:  Useless constructor  no-useless-constructor react_devtools_backend.js:2560:23
src\containers\Books.js
  Line 6:5:  Useless constructor  no-useless-constructor react_devtools_backend.js:2560:23

Na stronie Eslinta :

class A {
    constructor () {
    }
}

class B extends A {
    constructor (value) {
      super(value);
    }
}

Przerobiłem wszystko zgodnie z tym ale dalej jest to samo.

@babel/eslint-parser nie rozpoznaje składni jsx

Fri, 21 May 2021 09:27:41 +0000

Realizując jeden z popularnych kursów poświęconych Reactowi napotkałem problem, który próbuję rozwiązać od kilku dni, choć to pewnie kwestia mojego braku doświadczenia niż stopnia złożoności problemu

Aplikacja budowana jest na ustawieniach create-react-app, z eslintem dodatkowo konfigurowanym w pliku .eslintrc. Kurs zaleca instalację babel-eslinta w celu uniknięcia błędów przy używaniu klas js wewnątrz komponentów - i tu pojawia się problem. Babel-eslint jest przestarzały, na jego miejsce wszedł @babel/eslint-parser. Po jego zainstalowaniu pojawia się błąd informujący, że bez dodatkowych pluginów parser nie zinterpretuje poprawnie "eksperymentalnych składni" (i podkreśla składnię jsx). W związku z powyższym zainstalowałem dodatkowo "@babel/eslint-plugin" i "@babel/plugin-syntax-jsx". Kiedy wpisałem je na listę pluginów w pliku .eslintrc eslint przestal wyrzucać błędy, ale podczas budowania aplikacji pojawia się komunikat:

Próbowałem, jak radzi większość komentujących na forach, zrobić reinstalkę npm ale nie pomaga, w związku z czym będę bardzo wdzięczny za pomoc.

Oto pliki package.json i .eslintrc:

{
  "name": "react-intermediate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/eslint-parser": "^7.14.3",
    "@babel/eslint-plugin": "^7.13.16",
    "@babel/plugin-transform-react-jsx": "^7.14.3",
    "@storybook/addon-knobs": "^6.2.9",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.12.13",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/node-logger": "^6.2.9",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.9",
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-webpack": "^0.13.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^1.7.0",
    "husky": "^6.0.0",
    "lint-staged": "^10.5.4",
    "prettier": "^2.3.0",
    "storybook-react-router": "^1.0.8"
  },
  "lint-staged": {
    "*.js": [
      "prettier --.prettierrc --write",
      "eslint --fix"
    ]
  },
  "eslintConfig": {
    "overrides": [
      {
        "files": [
          "**/*.stories.*"
        ],
        "rules": {
          "import/no-anonymous-default-export": "off"
        }
      }
    ]
  }
}

{
  "extends": ["airbnb", "prettier", "plugin:import/errors", "plugin:import/warnings"],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "requireConfigFile": false
  },
  "plugins": ["@babel", "@babel/plugin-syntax-jsx"],

  "env": {
    "jest": true
  },
  "globals": {
    "document": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js"]
      }
    ],
    "react/jsx-props-no-spreading": "off",
    "import/prefer-default-export": "off",
    "react/no-unescaped-entities": 0,
    "import/no-extraneous-dependencies": [
      "error",
      { "devDependencies": true, "optionalDependencies": false, "peerDependencies": false }
    ]
  }
}

Forum Pasja Informatyki - Najnowsze z tagiem eslint

React Useless contructor no-useless-constructor problem z propsami

@babel/eslint-parser nie rozpoznaje składni jsx