Running React.js without npm (only with local React.js files or CDNs)

Question

I would like to set up a React.js app only using either a local copy of the React.js scripts, or, only with the proper CDN links. React is registered only with CDN links, not with locally stored copies of React.js scripts. Why is that? Second, despite registering React while using only the CDN links, my element is not rendering. Why not? Do I have no choice but to use NPM to install everything?

<html>

<head>
    <meta charset="UTF-8">
    <title>First App</title>
</head>

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

    <!-- This works (React is registering) -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- This doesn't (React is NOT registering) -->
    <!-- <script type="../scripts/react.development.js"></script> -->
    <!-- <script type="../scripts/react.dom.js"></script> -->

<script>
console.log('App.js is running!');
var Template = React.createElement(
  "h1",
  { id: "someid" },
  "This is JSX from app"
)
// Identifying the element by id
var AppRoot = document.getElementById('app')

ReactDOM.render(Template, AppRoot)

</script>
</html>

jsbin.com/tohesatoqi/edit?html,output - works for me, what's the exact issue you're having (in question 2)? — Kos
– Kos, Commented Apr 2, 2018 at 18:14

Artem Mirchenko · Accepted Answer · 2018-04-02 18:21:40Z

1

Ok, i run your code on my mashine, error really difficult to detect on first time. Your script attribute is type instead of src. There is correct variant:

<!-- This doesn't (React is NOT registering) -->
<script src="../scripts/react.development.js"></script>
<script src="../scripts/react.dom.js"></script>

If you download correct files it should be work.

answered Apr 2, 2018 at 18:21

Artem Mirchenko

2,1701 gold badge11 silver badges21 bronze badges

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

Comments

Jibin Mathews · Accepted Answer · 2018-04-02 18:24:29Z

0

Use <script src="../scripts/react.development.js"></script>

also please note ../ refers to the parent directory ./scripts if the scripts folder is in the same folder which contains the HTML

edited Apr 2, 2018 at 18:24

answered Apr 2, 2018 at 18:05

Jibin Mathews

1,1351 gold badge10 silver badges23 bronze badges

1 Comment

Kos Over a year ago

jsx needs to be transpiled to JS - not the puzzle piece that OP's asking about

Collectives™ on Stack Overflow

Running React.js without npm (only with local React.js files or CDNs)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related