CODEWITHSUNDEEP
reactjsjsx
questionMark
questionMark

Reputation: 107

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

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:

  1. Example is working but it has no JSX.
  2. 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?

Upvotes: 2

Views: 1147

Answers (1)

P4R3A
P4R3A

Reputation: 1099

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>

Upvotes: 1

Related Questions