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:xxxxxxxxxx1<script src="https://unpkg.com/react/umd/react.development.js"></script>2<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>3<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:
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://unpkg.com/react/umd/react.development.js"></script>5
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>6
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>7
</head>8
<body>9
<div id="root"></div>10
<!-- skopiuj poniższy kod do swojego projektu -->11
<script type="text/babel">12
13
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:14
// import React from react';15
// import ReactDOM from 'react-dom';16
17
const Component = props => {18
return (<div>Mój komponent!</div>);19
};20
21
const App = () => (22
<div className="App">23
<Component />24
</div>25
);26
27
const root = document.querySelector('#root');28
ReactDOM.render(<App />, root );29
30
</script>31
</body>32
</html>