CODEWITHSUNDEEP
javascriptnode.jsreactjscdn
Thidasa Pankaja
Thidasa Pankaja

Reputation: 1070

Integrate React into existing Node express app using CDN

I'm creating a web app using node and react. Rather than seperate Node and React apps I want to integrate React into it. So rather than a react app, I tried importing react CDN into the index.html. My server serves the index.html perfectly, but I'm getting an error in the react component.

this is my index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>React Powered chat App</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js" charset="utf-8"></script>
  <script src="/scripts/main.js" charset="utf-8"></script>
  <body>
    Hello !
    <div id ='App'></div>
  </body>
</html>

and this is my main.js

class App extends React.Component {
  render(){
    return (
      <div>
        Hello !
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('App'));

The error I'm getting is

Uncaught SyntaxError: Unexpected token <                     main.js:4

What have I done wrong? Isn't it possible to use react with CDN ?

And first when I used react/cjs/react.development libraries I got more errors. Then after reading this stackoverflow question I use /react/umd/ libraries. So what's the difference between cjs and umd CDN libraries ?

Upvotes: 3

Views: 3487

Answers (3)

sumeet bandari
sumeet bandari

Reputation: 11

You also need to add babel cdn in the Html file which would convert JSX to JS

 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Upvotes: 0

illiteratewriter
illiteratewriter

Reputation: 4323

The code doesn't work because react uses JSX (HTML inside javascript), which cannot be read by the browser and needs to be transpiled to ordinary javascript which can be read by browsers. One such transpiler is babel. Your code doesn't work due to the absence of transpiler.

You can use create-react-app, which comes bundled with the transpiler and everything that you'll need to get started with react. And as I understand, since you want to add your express backend, here is a tutorial that will help you get started with attaching create-react-app to your express backend. Hope this helps.

Upvotes: 2

Patrick Hund
Patrick Hund

Reputation: 20236

Since JSX (the HTML code sprinkled in the JavaScript) is not regular JavaScript or ES6 code, you cannot load it directly in your browser.

So the problem is not getting the React library from a CDN, that’s fine.

The problem is that you have to transpile your main.js file to regular JavaScript code, for example using Babel.

The most commonly used tool to do this transpilation with Babel automatically is webpack.

If you don’t want to learn how to set up webpack and Babel in detail, I recommend to use create-react-app, this takes the burden of setting up all of the boilerplate from your shoulders and creates a JavaScript bundle that you can use directly in your browser.

Note: if you do end up using create-react-app, you don’t need to get the React lib from a CDN, it will already be included in the bundle.

Upvotes: 2

Related Questions