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 }
Co to znaczy "nie działa"? Możesz opisać dokładnie co się powinno dziać, a się nie dzieje?
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.
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"
Wczytanie modułu z adresu „http://localhost:3000/src/person.js” zostało zablokowane z powodu niedozwolonego typu MIME („text/html”).
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";
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
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>
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>
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ć.
Wywalilem document.write i dalej nie dziala. Tak jakby interpreter nie dzialal.
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?
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
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.
Używając create-react-app?
Tak.
Dobra dzięki za rady.