1

I am quite new with React js and I'm pretty sure there are concepts that I am missing and fail to find the right answers to my questions.

So I have a simple php project running on nginx, I am wondering if I can somehow avoid using a webpack server or react js server to do server side rendering and instead compile the jsx code with some sort of a watcher to then be used on client side.

The reason for this is because I realised if I only add

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

in the head and use the babel watcher with

npx babel --watch <indir> --out-dir <outdir> --presets react-app/prod

then I am unable to use open source libraries, such as react-easy-crop since they are built for server side rendering.

long story shorter, is there a way for me to compile what server side rendering would do, and use it for client side rendering?

Denis Makula
  • 55
  • 8
  • The usual workflow with React is to use a bundler such as Webpack, Snowpack, Vite, etc. to bundle the frontend code (React included), then serve the bundle as a static file on your server. The Webpack dev server is used for development only. – AKX Jul 19 '21 at 13:55
  • @AKX hmm, so the process would then be `npm run build` on react and then use webpack to create a `bundle.js` from the files inside the `/build` folder? Then include `bundle.js` at the end of the body? – Denis Makula Jul 19 '21 at 14:01
  • Pretty much. See what eg. create-react-app does. – AKX Jul 19 '21 at 21:01

0 Answers0