React Useless contructor no-useless-constructor problem z propsami

Question

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.

Answer 1

https://stackoverflow.com/questions/63609257/what-is-a-useless-constructor-in-react

Tutaj spróbuj

Comments

Co ciekawe, bez konstruktorów działa i nie wyrzuca żadnych błędów. Tego już kompletnie nie rozumiem.

 

import React,{ Component }from 'react';
import './CreateBook.css';

class CreateBook extends Component {
    // constructor(props)
    // {
    //     super(props);
    // }

    render(){
        return (
            <div className="create-book">
                <form>
                    <div className="form-group">
                        <input
                            type="text"
                            className="form-control"
                            name="title"
                            placeholder="Enter Title"
                        />
                    </div>
                    <div className="form-group">
                        <input
                            type="text"
                            className="form-control"
                            name="author"
                            placeholder="Enter Author"
                        />
                    </div>
                    <div className="form-group">
                        <input
                            type="text"
                            className="form-control"
                            name="year"
                            placeholder="Enter Year"
                        />
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary">
                            Dodaj
                        </button>
                        <button type="submit" className="btn btn-default">
                            Anuluj
                        </button>
                    </div>
                </form>
            </div>
        )
    }
}

export default CreateBook;

 

---

Cierpliwości , czytaj a zrozumiesz