Languages
[Edit]
PL

React - kompilacja projektu w przegl─ůdarce - transpiler Babel - przyk┼éad

0 points
Created by:
Dirask JS Member
3460

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:

  1. 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>
  2. 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>

ReactJS (PL)

React - kompilacja projektu w przegl─ůdarce - transpiler Babel
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join