6

I come from a background in Angular, but I wanted to start learning React. I want to make a React front-end for a nodejs Express web service.

In Angular, I could simply build the source code into a static folder with a standard index.html, and it can be deployed on any web server. With React however, every tutorial I see is about running React in its own server using create-react-app and npm start.

I know you can also just use script tags to import the React framework in a static page, but then you can't use JSX syntax, and I would like to. Is it possible to simply build a React project into a static folder with an index.html that can be deployed on any web server?

chrispytoes
  • 1,714
  • 1
  • 20
  • 53

2 Answers2

5

Yep, you can do what you're describing. If you want to use JSX syntax, you'll need Babel, which transpiles it into standard JavaScript.

You can avoid the complexities of setting it up by using create-react-app to create the app, then running npm build instead of npm start. This will compile everything into a build directory, complete with index.html.

JW.
  • 50,691
  • 36
  • 115
  • 143
  • Sorry I forgot to mention I already tried that. Maybe I have a different issue then because when I do that, the resulting build still has JSX syntax in it and it gives errors when I go to view the page. – chrispytoes May 23 '18 at 01:35
  • Hmm, you may want to open another question with the details of what you tried. – JW. May 23 '18 at 01:36
1

CRA uses its server for development purposes. You don't need CRA for using React of course. But, as your app getting bigger and bigger you will need some more extra tools. For example you want to see your code instantly without refreshing your browser. Here comes the dev server and hot reloading.

CRA uses Webpack behind the scenes. It is a great tool for bundling (obviously) all your files (including css), minifying, uglifying, optimizing your code etc.

For simple code or testing purposes using one file and attaching React and Babel to your file could be enough but for real apps you will need more. Either you will use something like Webpack on your own or you will use CRA and let it do all the extra stuff for you.

devserkan
  • 16,870
  • 4
  • 31
  • 47