Hello World from external JS

Separating the React element from HTML is a little bit tricky, since the conversion of JSX involves Babel library to invoke the file in the backend server.

Hello World from external JS

Create a Web server folder

Create a web server folder such as c:\temp\hellojs

Make sure to install Serve package

Navigate to the above folder.
Make sure to follow the instructions in Serve Server to successfully install Serve server.

Create HTML File

Create index.html with the below content.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="app.js"></script>
  </head>
  <body>

    <div id="mydiv"></div>

  </body>
</html>

Create app.js Javascript file

Create app.js with the below content.

      function Hello() {
        return <h1>Hello World!</h1>;
      }

      ReactDOM.render(<Hello />, document.getElementById('mydiv'))

Start the Serve Server

From the above folder, in this example, c:\temp\hellojs run the below command to start the serve server.

yarn serve .

Navigate the page in browser

Open a browser and navigate to the url.

http://localhost:3000

Topic revision: r1 - 17 Jan 2022, shss\dhakchina

ReactJs

Webs
Main
ReactJs
Sandbox
System

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback