Precompile JSX

Hi all,
I am working on a React project on my local machine.
In my index.html file, I have added the script needed to link to the react libraries, in order to make the project work, like below:

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

I have also included a script to add Babel functionality and be able to translate JSX into javascript, like below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

The project works fine but throws the following error:

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production

Does anyone know how to precompile JSX?

create-react-app

seems to be a boilerplate that works on local machine for development purpose but would it work on a random server? If so, how?

Many thanks and happy coding

I think its important to understand the difference between in-browser (run-time compiling) and pre-compiled. Do you understand this? I will do a basic explanation below, let me know if you have further questions about it

The browser only understands JavaScript, so any react code needs to compiled (I prefer to name this process transpiling, not compiling, I think transpiling is more accurate) into JavaScript code

You can do this in-browser, which is fine for development, but this would mean anyone visiting your website need to load your react code, the babel transformer and then on there machine/laptop/phone/tablet the code needs to be converted (client-side)

what would be much nicer is to convert the react code into Javascript (server-side, pre-compiled) and then simple serve the javascript files/code when someone visits your website. Then you only need to compile every time you deploy need code (in production). I think would make your website a lot faster because:

  • less code need to be downloaded by the client/browser.
  • user doesn’t have to wait for compiling/transpiling to be complete

create-react-app uses babel, setting up babel from scratch (although fun and you can learn something from it) can be a difficult frustrating process