Integrate React into existing Node express app using CDN

Question

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 ?

Have you referred [ReactDOMServer](https://reactjs.org/docs/react-dom-server.html) this document from official website? — Devang Naghera, Dec 31 '17 at 06:58

Patrick Hund · Answer 1 · 2017-12-31T07:18:12.757

2

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.

edited Dec 31 '17 at 07:18

answered Dec 31 '17 at 07:07

Patrick Hund

19,163
11
66
95

Yes I understand. But then I need to start react server separately right ? Or is it still possible to serve index.html using express static middleware ? like app.use(express.statis(dirname+'../client')) . – Thidasa Pankaja Dec 31 '17 at 08:22
Sure it is, the CRA server is actually just for convenience, it gives you hot module reloading as you work on your code. But it can also be used to create a JS bundle that you can serve with Express static middleware – Patrick Hund Dec 31 '17 at 08:25
1

You won't serve index.html from create-react-app, mind you, but the Javascript bundle it creates when you do npm run build – Patrick Hund Dec 31 '17 at 08:27

score 2 · Accepted Answer · answered Dec 31 '17 at 07:31

2

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.

answered Dec 31 '17 at 07:31

illiteratewriter

4,155
1
23
44

Yes I understand. But then I need to start react server separately right ? Or is it still possible to serve index.html using express static middleware ? like app.use(express.statis(dirname+'../client')) . – Thidasa Pankaja Dec 31 '17 at 08:22
1

You can, but will need some tinkering. https://blog.codingbox.io/react-for-beginners-part-1-setting-up-repository-babel-express-web-server-webpack-a3a90cc05d1e Check this link. This has react on an express server, but it does not have hot reloading. So you'll have to restart everytime. But you can add hot reloading to this. – illiteratewriter Dec 31 '17 at 08:32
1

I tried both tutorials. The one which uses react app separately works. And now I understand the concept clearly. – Thidasa Pankaja Dec 31 '17 at 14:10

score 0 · Answer 3 · answered May 14 '22 at 15:21

0

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>

answered May 14 '22 at 15:21

sumeet bandari

1
1
2

Integrate React into existing Node express app using CDN

3 Answers3