Default oppure named import

tonyven1

il 08 set 2023, 21:09

6 risposte

tonyven1

Utente Attivo

Iscritto da: gen, 2023

Messaggi:: 69

Default oppure named import

08 set 2023, 21:01

Ciao a tutti. Sto studiando con entusiasmo il libro suggerito da Alka (SCRITTO IN ITALIANO!) su React. Tutto il codice studiato fin'ora funziona alla perfezione. Sono arrivato al capitolo 4 e sono incominciati i problemi. Il codice dell'applicazione non funziona. Ho provato a riscrivere tutto il codice dopo aver provato il copia e incolla e continua a darmi errore. Non so se è il caso qui di postare il problema o rivolgersi direttamente all'autore. Comunque provo a postare il codice in oggetto e segnalare che errore mi dà nella speranza che qualcuno possa capire. Sono 6 file molto piccoli che a me sembrano corretti e dove l'errore riportato dalla console del browser è:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

E questi sono i file

import Main from "./components/Main";
import Sidebar from "./components/Sidebar";

const user={
  name:"Alessandro",
  id:1,
  image:"https://github.com/lifeisfoo.png"
}

export default function App(){
  return(
    <div className="container-fluid">
      <div className="row">
        <Sidebar user={user} />
        <Main />
      </div>
    </div>
  );
}

import Col from "./Col";
import ListNames from "./ListNames";
import User from "./User";

const customStyle ={
  boxShadow: "inset -1px 00 rgba(0,0,0,0.1)"
};

export default function Sidebar({user}){
  return(
<Col size={3} className="bg-light" style={customStyle}>
  <User name={user.name} image={user.image} />
  <hr />
  <ListNames />
</Col>
  );
}

export default function Main(props){
  const customStyle={
    boxShadow: "inset -1px 0 0 rgba(0,0,0,0.1)"
  };
  return <div className="col-9 p-3 vh-100 overflow-scroll" style={customStyle}>Main</div>
}

export default function Col({children, size,className = "", style}){
    const colClass = `col${size ? `-${size}` : ""}`;
    const classes= `${colClass} ${className} p-3 overflow-scroll vh-100`;
    return (
      <div className={classes} style={style}>
        {children}
      </div>
    );
  }

const navLinkStyle = {cursor: "pointer"};
function List({name,active}){
  const classes=`nav-link ${active ? "active" : ""}`;
  return(
    <li className={classes} style={navLinkStyle}>
      {name}
    </li>
  );
}
export default function ListNames(){
  return(
    <ul className="nav nav-pills flex-column mb-auto">
      <List name="Importante" />
      <List name="Film da vedere" active={true} />
      <List name="Libri da leggere" />
    </ul>
  );
}

const defaultImage = "https://via.placeholder.com/32x32.png";

function getImageOrDefaultURL(imageUrl){
  try {
    new URL(imageUrl);
    return imageUrl;
  } catch {
    return defaultImage;
  }
}

export default function User({name,image}){
  return(
    <div className= "d-flex align-items-center text-black text-decoration-none py-1">
      <img
      src={getImageOrDefaultURL(image)}
      width="32"
      height="32"
      className="rounded-circle me-2" alt=""
      />
    </div>
  );
}

Come si può vedere per ogni file la funzione principale viene esportata. L'errore riportato indica di controllare anche il render del file Sidebar.

Questo è il link da cui scaricare tutto il codice del libro capitolo per capitolo. Mi dispiacerebbe molto non riuscire ad andare avanti perchè il libro è veramente ottimo.

https://github.com/lifeisfoo/react-guida-pratica/tree/master/ch04

6 Risposte

Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Default oppure named import
08 set 2023, 21:43
08/09/2023 - tonyven1 ha scritto:
Non so se è il caso qui di postare il problema o rivolgersi direttamente all'autore.
Ma il codice che va in errore l'hai scritto tu o è quello dell'autore?
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Default oppure named import
08 set 2023, 22:01
Quello dell'autore. Ho seguito passo passo lo sviluppo del codice e alla fine del capitolo l'ho provato. Non funzionando ho copiato il codice dal sito di github e non funziona ugualmente. Ho installato tutto a dovere le dipendenze.
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Default oppure named import
09 set 2023, 00:07
08/09/2023 - tonyven1 ha scritto:
Quello dell'autore. Ho seguito passo passo lo sviluppo del codice e alla fine del capitolo l'ho provato. Non funzionando ho copiato il codice dal sito di github e non funziona ugualmente. Ho installato tutto a dovere le dipendenze.
Ho scaricato il sorgente, sono andato nella cartella “ch04”, ho lanciato un npm install e poi un npm run start: è partito subito.
Temo che il problema sia da ricercare nella tua copia.
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Default oppure named import
09 set 2023, 12:55
Grande Alka!!! Ho scaricato il sorgente e lanciato l'applicazione e FUNZIONA! Ma allora tocca scrivere a mano o scaricare il codice del libro per funzionare? Ci vuole più tempo così. Pazienza .L'importante che funzioni. Quindi il copia e incolla non funziona. Una curiosità ma si può scaricare tutta la cartella? Ho provato a vedere ma non ci sono riuscito. Sbaglio qualcosa o la procedura è quella di scaricare ogni singolo file su github? Grazie ancora
Alka
Utente Famoso
Iscritto da
nov, 2014
Messaggi:
3318
Re: Default oppure named import
09 set 2023, 15:29
09/09/2023 - tonyven1 ha scritto:
Grande Alka!!!
Non ho fatto nulla di che. :)
09/09/2023 - tonyven1 ha scritto:
Ho scaricato il sorgente e lanciato l'applicazione e FUNZIONA! Ma allora tocca scrivere a mano o scaricare il codice del libro per funzionare?
No, basta scrivere il codice corretto, oppure guardare il proprio codice confrontandolo con quello del libro che, a conti fatti, è funzionante, quindi senz'altro hai commesso errori da qualche parte. Non saprei dire dove, ma il confronto con quello di esempio dovrebbe far emergere la differenza.
Non lasciamo passare l'idea che il codice sia lo stesso, perché altrimenti vorrebbe dire sostenere che il compilatore/transpilatore discrimina lo stesso identico codice in base a colui/colei che lo scrive, e questo sarebbe del tutto una assurdità.
09/09/2023 - tonyven1 ha scritto:
Pazienza .L'importante che funzioni. Quindi il copia e incolla non funziona.
Il copia/incolla funziona, purché si sappia cosa si sta copiando e incollando. Mi sembra quasi scontato precisare una cosa del genere.
Se l'importante è che funzioni, allora devi confidare che qualunque tipo di applicazione o progetto tu voglia fare, ci sia già qualcuno che sostanzialmente lo abbia scritto da zero e abbia codificato esattamente quello che ti serve, che è matematicamente impossibile. :)
09/09/2023 - tonyven1 ha scritto:
Una curiosità ma si può scaricare tutta la cartella? Ho provato a vedere ma non ci sono riuscito.
Puoi scaricare uno ZIP con tutto il sorgente, se è per quello, oppure fare il clone del repository con qualsiasi client Git.
09/09/2023 - tonyven1 ha scritto:
Sbaglio qualcosa o la procedura è quella di scaricare ogni singolo file su github?
La “procedura” per fare cosa? L'autore ha pubblicato tutti i sorgenti sul sito: è possibile scaricare un file, una cartella o l'intero repository con tutte le cartelle, oppure clonarlo usando Git. Ma questo cosa vuol dire?
Se stai imparando e scrivendo codice per il tuo progetto, devi seguire le istruzioni e capire quello che stai utilizzando.
A seconda delle necessità, puoi guardare online oppure scaricare un file sorgente per vedere come è stata implementata una determinata cosa, così come puoi scaricare tutto - come ho fatto io - e lanciare il singolo esempio.
Puoi fare quello che vuoi. Quello che ha senso fare di volta in volta dipende dal contesto: non è che c'è una “prassi”, dipende da cosa ti serve. In alcuni casi ho fatto uso nei miei software di librerie esterne, quindi ho scaricato integralmente il progetto relative; altre invece le ho scritte io, quindi in quel caso le ho caricate, invece di scaricarle. Non è che una di queste operazioni è più giusta di un'altra: dipende da quello che devi fare.
Lasciami dire che, nonostante tutto, credo che questa attività - il programmare intendo - non sia nelle tue corde.
Scusami davvero per la franchezza (e forse lo avevo già detto, ma al momento direi che non ho ricevuto molte smentite). :|
T
tonyven1
Utente Attivo
Iscritto da
gen, 2023
Messaggi:
69
Re: Default oppure named import
09 set 2023, 16:24
Prendo atto di quel che dici e ti ringrazio.

Devi accedere o registrarti per scrivere nel forum

6 risposte