React - komponent w oddzielnym skrypcie nie działa

Próbuję się nauczyć react.js, ale utknąłem w skrypcie "Hello World".React - komponent w oddzielnym skrypcie nie działa

Moja index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://fb.me/react-0.13.3.js"></script> 
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 
    </head> 
    <body> 
    <div id="example"></div> 
    <script type="text/jsx" src="src/helloworld.js"></script> 
    </body> 
</html>

i src/helloworld.js:

React.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('example') 
);

Kiedy kładę ten kod wewnątrz <script> w index.html pliku to działa dobrze, ale kiedy go przenieść do oddzielny plik Dostaję pustą stronę i błąd konsoli:

XMLHttpRequest cannot load file:///home/marcin/Projects/react/src/helloworld.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Co jest nie tak z tym?

Źródło

2015-05-12 Marcin Doliwa

dostać ten błąd, ponieważ:

Masz załadował index.html z lokalnego systemu plików (na przykład poprzez dwukrotne kliknięcie na niego), zamiast ładowania go za pośrednictwem serwera WWW
The Transformator JSX, odpowiedzialny za skrypty text/jsx, jest komponentem javascript, który próbuje pobrać plik określony za pomocą atrybutu src znacznika script
JavaScript może pobierać dane z zewnątrz nal zasobów tylko z protokołów wymienionych w komunikacie o błędzie (a nawet dla tych ma dalsze ograniczenia, jak potrzeba międzydomenowa); pliki załadowane z lokalnego systemu plików mają protokół file://, który nie znajduje się na tej liście.

Gdy włączone skrypt jsx w pliku index.html to działało jak były potrzebne żadne wnioski w celu pobrania skryptu jsx.

Co musisz zrobić, to wziąć ręce za serwer sieciowy, umieścić pliki hello world w głównym katalogu tego serwera i załadować je z serwera WWW, np. z adresu URL takiego jak http://localhost/index.html.

Źródło

2015-05-12 20:50:12 Cristik

Proponuję uruchomić serwer WWW.

Ten python -m SimpleHTTPServer uruchomi prosty serwer WWW.

Możesz uruchomić to w swoim katalogu. Uzyskaj do niego dostęp tutaj http://localhost:8000.

Albo można użyć flagi Chrome i dodać tę linię --allow-file-access-from-files

Uwagi

Python fabrycznie zapakowane z instalacji OSX, więc jeśli jesteś na Mac, dobry .
Flagi Chrome nie są zalecane, ponieważ są uciążliwe w procesie.

Źródło

2015-05-12 19:48:23

Wiem, że odpowiedź jest już zatwierdzona, ale w celach informacyjnych zamieszczam tutaj kod pocztowy. Możemy użyć reakcji.js z zadania skryptu jak ten

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script crossorigin src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
 
<script crossorigin src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
 
<script crossorigin src="https://unpkg.com/[email protected]/babel.min.js"></script> 
 
<script type="text/babel"> 
 
    ReactDOM.render(
 
     <h1>Hello, world!</h1>, 
 
     document.getElementById('example') 
 
    ); 
 
</script> 
 
    </head> 
 
    <body> 
 
    <div id="example"></div> 
 
    </body> 
 
</html>

Źródło

2017-09-08 06:32:31 Kapil

React - komponent w oddzielnym skrypcie nie działa

Odpowiedz

Powiązane problemy