Can I use React and JSX in Javascript without installing the Node.js?

Question

I'm working on a project, which has already a webserver. The webserver runs PHP and it is limited. Many software cannot be installed.

I understand that React does not require any installation but adding JSX to a project needs to run these commands:

Step 1: Run npm init -y

Step 2: Run npm install babel-cli@6 babel-preset-react-app@3

Unfortunately, I cannot add NodeJS to the webserver.

JSX coding syntax would be very useful for me using the JavaScript files.

Option for adding it to HTML

I understand that I could add JSX to an HTML file:

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );
</script>

But I would like to use in .js files.

Examples

I have 2 examples:

Example is working but it has no JSX.
Example has JSX but it is not working.

The HTML file is the same.

1. Example project: Unexpected token error with JSX

const myelement1 = <h1>JSX should work</h1>;

ReactDOM.render(
  myelement1,
  document.getElementById('reactRoot')
);

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <h1>My React example page</h1>
    <div id="reactRoot"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  </body>
</html>

2. Example project: React is working without JSX

const myelement2=React.createElement('h1', {}, 'No JSX!');

ReactDOM.render( myelement2, document.getElementById('reactRoot'));

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <h1>My React example page</h1>
    <div id="reactRoot"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  </body>
</html>

My Question

How could I fix 1. Example project, if no program installation is possible?

Parsa VxT · Accepted Answer · 2021-03-28 01:33:23Z

1

you have to set type attribute as text/babel, this way the problems will be resolved, e.g:

<html>

<body>
    <div id="reactRoot"></div>

    <script type="text/babel">
        const myelement1 = <h1>JSX should work</h1>;

        ReactDOM.render(
            myelement1,
            document.getElementById('reactRoot')
        );
    </script>

    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

</body>

</html>

answered Mar 28, 2021 at 1:33

Parsa VxT

1,1197 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

questionMark Over a year ago

I need to store the JSX in .js files. This is 1 HTML file that included the JSX. Do you have any idea for a separately stored .js file?

Parsa VxT Over a year ago

@questionMark that does not matter, just add type="text/babel" to your script tag, like this: <script type="text/babel" src="./scripts/jsx.js"></script>

questionMark Over a year ago

I tried your recommended script tag locally, added to the .html. It was not working. Is this working for you?

masonCherry Over a year ago

What @PS-PARSA is suggesting should work I just tested it.

Parsa VxT Over a year ago

@questionMark this error is related to CORS policy, not jsx and Babbel...

|

Collectives™ on Stack Overflow

Can I use React and JSX in Javascript without installing the Node.js?

Option for adding it to HTML

Examples

1. Example project: Unexpected token error with JSX

2. Example project: React is working without JSX

My Question

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Option for adding it to HTML

Examples

1. Example project: Unexpected token error with JSX

2. Example project: React is working without JSX

My Question

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related