PL
React - kompilacja projektu w przeglądarce - transpiler Babel - przykład
0
points
W tym krótkim artykule chcielibyśmy pokazać, jak uruchomić skrypt React JSX bezpośrednio w przeglądarce internetowej bez wcześniejszej kompilacji - jest to kompilacja w trybie runtime.
Rozwiązaniem problemu jest:
- dołączenie następujących skryptów wewnątrz elementu
head:<script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> - wklejenie kodu JSX
<script type="text/babel"></script>wewnątrz elementu body.
Praktyczny przykład:
// ONLINE-RUNNER:browser;
<!DOCTYPE>
<html>
<head>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- skopiuj poniższy kod do swojego projektu -->
<script type="text/babel">
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from react';
// import ReactDOM from 'react-dom';
const Component = props => {
return (<div>Mój komponent!</div>);
};
const App = () => (
<div className="App">
<Component />
</div>
);
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );
</script>
</body>
</html>