Languages
[Edit]
PL

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

0 points
Created by:
Maison-Humphries
761

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>

Alternative titles

  1. React - kompilacja ┼Ťrodowiska uruchomieniowego w przegl─ůdarce - Babel - przyk┼éad
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

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