Requirement:
- ReactJS version: >=18.
- Modern Internet Browser, e.g. Google Chrome.
- Web Editor or Web IDE or Text Editor.
- Internet connection.
Tutorial:
1. Type the HTML source code on your web editor:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World in React</title>
</head>
<body>
<div id="helloWorldContainer"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="assets/script/helloWorld1.js"></script>
</body>
</html>
2. Save as helloWorld.html
3. Type the JS source code on your web editor:
'use strict';
const reactElem = React.createElement;
class HelloWorld extends React.Component {
render() {
return reactElem(
'h1', null, 'hello world'
);
}
}
const domContainer = document.getElementById('helloWorldContainer');
const root = ReactDOM.createRoot(domContainer);
root.render(reactElem(HelloWorld));
4. Save as helloWorld1.js
5. Open in your browser.
Output
Bibliography
https://sko.dev/
https://www.tutorialspoint.com/
ReactJS;Wiley publisher
JavaScript;Sams publisher
Tidak ada komentar:
Posting Komentar