Przerabiam kod z w3schools i kod nie działa

0

Witam serdecznie.

Przerabiam tutorial z w3schools z React i kod po prostu nie działa. Przykładem może być import zmiennych z innego pliku.

<h3 id="demo14">Wiadomosc pierwsza z innego pliku</h3>

<script type="module">
  import { name, age } from "/src/person.js";
  
  document.getElementById("demo14").innerHTML = "My name is " + name;
  document.getElementById("demo14").innerHTML += ", I am " + age + ".";
</script>

person.js:

const name = "Jesse"
const age = 40
export { name, age }
1

Co to znaczy "nie działa"? Możesz opisać dokładnie co się powinno dziać, a się nie dzieje?

0

No interpreter nie wykonuje kodu. Powinno podmienić pod h3 id="demo14" wartość a nie robi tego. Tak jakby interpreter źle działał. Wykonuje tylko połowę kodu. Połowę skryptów a reszty skryptów nie wykonuje. Nie wiem o co tu chodzi. Odpalam serwer na localhost:3000 i połowa skryptów się nie wykonuje

p.s a jak na w3schools wciskam run example to tam się ten kod wykonuje. A na moim interpreterze już nie.

1

Zobacz w konsoli jakie masz błędy. Jeśli używasz Chrome to wciśnij F12 i zakładkę "Console".
Sprawdź czy masz plik skryptu we właściwej lokalizacji tj. "localhost/src/person.js"

0

Wczytanie modułu z adresu „http://localhost:3000/src/person.js” zostało zablokowane z powodu niedozwolonego typu MIME („text/html”).

0

Na pewno jest błąd w ścieżce do pliku

// Jeśli pliki znajdują się w tym samym folderze
import { name, age } from "./person.js";

// Jeśli plik znajduje się w dodatkowym folderze "src"
import { name, age } from "./src/person.js";

// Jeśli plik znajduje się w innym katalogu i najpierw trzeba się do niego "cofnąć"
import { name, age } from "../src/person.js";
0

Jak dodam kropkę to jest niewłaściwy adres.

PyCharm pokazuje:

cannot find declaration to go to

a jak dodam 2 kropki to jest dobrze, ale dalej nie importuje zmiennych z pliku

0

Ten skrypt dla przykładu też nie działa. A na w3schools działa. Nie wiem czemu tak dużo skryptów mi nie działa. Coś chyba nie tak jest z interpreterem

<script> 
  const myVehicle = { 
    brand: 'Ford', 
    model: 'Mustang', 
    color: 'red' }
    
  const updateMyVehicle = { 
    type: 'car', 
    year: 2021, 
    color: 'yellow' 
  } 
  
  const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle} document.write(myUpdatedVehicle); 
</script>
0

Ten skrypt też nie działa... to tylko jeden z niektórych, bo dużo nie działa. Nie wiem o co tu chodzi.

<h1 id="demo17">Zaloguj sie</h1>

<script>
  function renderApp() {
    document.getElementById("demo17").innerHTML = "Welcome!";
  }
  
  function renderLogin() {
    document.getElementById("demo17").innerHTML = "Please log in";
  }
  
  let authenticated = true;
  
  authenticated ? renderApp() : renderLogin();
</script>
0

wywal document.write, bo jest możliwe, że przez to ci czyści całą stronę.
tu masz więcej: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
ogólnie ta metoda to relikt przeszłości i najlepiej jest jej w ogóle nie używać.

0

Wywalilem document.write i dalej nie dziala. Tak jakby interpreter nie dzialal.

0
hubertsuder napisał(a):

Wczytanie modułu z adresu „http://localhost:3000/src/person.js” zostało zablokowane z powodu niedozwolonego typu MIME („text/html”).

Czy dalej masz ten błąd?

spróbuj wejść z poziomu przeglądarki pod ten adres. Bo jeśli nie ma tamtego pliku w tym miejscu, to może się włączyć strona błędu 404, i stąd ten komunikat o („text/html”).

druga sytuacja to taka, że serwer ustawia złe nagłówki dla plików JS (chociaż wątpię).

A na w3schools dziala. Nie wiem czemu tak dużo skryptów mi nie dziala. Cos chyba nie tak jest z interpreterem

Jeśli JS na w3schools jest odpalane w przeglądarce (a pewnie jest), to ten sam silnik JSa ci się odpali na w3schools i ten sam jak postawisz to lokalnie. Więc "interpreter" (czy raczej silnik JSa, który może zawierać w sobie interpreter, ale to szczegół implementacyjny) raczej nie jest problemem. Owszem, gdyby w jednej przeglądarce ci działało, a w drugiej przeglądarce by ci nie działało, to wtedy można by się zastanawiać, czy to nie wina danej przeglądarki i jej silnika JSa.

Natomiast jak coś ci po prostu nie działa po przepisaniu z tutoriala, a na tutorialu działa, to widocznie nie do końca udało ci się odtworzyć całe środowisko/cały kod - sprawdź wszystkie ścieżki do plików, jak już przedmówcy pisali.

Poza tym - gdzie jest ten tutorial w necie?

Odpalam serwer na localhost:3000 i połowa skryptów się nie wykonuje

Jak go odpalasz dokładnie?

0

Czy dalej masz ten błąd?

tak

spróbuj wejść z poziomu przeglądarki pod ten adres. Bo jeśli nie ma tamtego pliku w tym miejscu, to może się włączyć strona błędu 404, i stąd ten komunikat o („text/html”).

jak wchodze pod adres http://localhost:3000/src/person.js to pisze, że strona uległa awarii.

Natomiast jak coś ci po prostu nie działa po przepisaniu z tutoriala, a na tutorialu działa, to widocznie nie do końca udało ci się odtworzyć całe środowisko/cały kod - sprawdź wszystkie ścieżki do plików, jak już przedmówcy pisali.
Poza tym - gdzie jest ten tutorial w necie?

https://www.w3schools.com/react/react_es6_modules.asp

Jak go odpalasz dokładnie?

npm start w folderze react-app

0
hubertsuder napisał(a):

Poza tym - gdzie jest ten tutorial w necie?

https://www.w3schools.com/react/react_es6_modules.asp

Jak go odpalasz dokładnie?

npm start w folderze react-app

Używając create-react-app?

To wtedy ci się odpala bundler, który ci łapie sam ileś plików JS i robi jeden duży plik. Wtedy importując myślisz o tym, jak to wygląda na dysku, bo te importy i tak będą podmienione i struktura plików źródłowych na dysku to nie będzie ta sama docelowa struktura plików udostępniania przez serwer.

Jednak jeśli w HTMLu używasz bezpośrednio modułów ES6:

<script type="module">
import { name, age } from "/src/person.js";

to one są pobierane z serwera, więc musisz myśleć o tym, jak te pliki wyglądają na serwerze.

Ogólnie albo używasz bundlera albo natywnych modułów ES6 (co prawda technicznie się to nie wyklucza, ale w uproszczeniu można tak przyjąć).

Nie wiem, czy jasno mówię (bo też nie do końca rozumiem, co ty tam masz u siebie), ale radziłbym wybrać:

  • albo zacznij używać modułów ES6 po prostu w przeglądarce, czyli tak jak zacząłeś <script type="module">...</script> i tam robisz importy, nie używając żadnego create-react-app. Co najwyżej potrzebny ci będzie jakikolwiek serwer lokalny.

  • albo odwrotnie: nie osadzaj w HTMLu bezpośrednio modułów, tylko polegaj w 100% na bundlerze i używaj tego, co masz pod npm start w tym folderze i stosując strukturę plików wymuszoną przez create-react-app (tylko tam np. w public masz to, co ma być pod / itp.).

Bo te rzeczy wydają się w tym momencie niekompatybilne biorąc pod uwagę to, co chcesz zrobić i sposób, w jaki to robisz.

0

Używając create-react-app?

Tak.

Dobra dzięki za rady.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.