React is a browser-side Javascript library (other
prominent examples are Angular and D3).
It does not need to be written using any
particular development environment or served from any particular
server configuration.
JSX, on the other hand, is an extension to the Javascript language.
You do not need it to use React, but most people like it.
We need to compile JSX files into Javascript in order to use them in
our programs.
JSX is compiled by the Babel compiler. To install Babel on our
server, use npm in your root server directory (the one with your
server file, eg. miniServer3.js), as usual:
npm init -y
npm install babel-cli@6 babel-preset-react-app@3
The first line installs a package.json file in your
server directory,
that npm uses to
to keep track of complex module dependencies.
The second line installs Babel in node_modules.
Run the compiler on a specific file, eg. lango.jsx, like this:
npx babel lango.jsx --presets react-app/prod > lango.js
Npx is a command that runs a module in
node_modules
(notice so far we have just required modules in our
Node programs, we haven't run them).
Run the compiler on all .jsx files in the current directory and its
subdirectories like this:
npx babel --presets react-app/prod --extensions ".jsx" . --out-dir
To avoid having to type all those options, you can create
an alias in UNIX (you know this, right?), like this:
alias jsxcomp="npx babel --presets react-app/prod --extensions ".jsx" . --out-dir ."
Now you can run the compiler on all your .jsx files by typing:
jsxcomp
To have this alias around all the time, add the alias line to the bottom
of the ~/.profile file in your home directory.
This file containts UNIX shell commands that are run every time you log in.
Finally, people seem to like having their
.jsx files compiled automatically.
To keep the compiler lurking in the background, ready to compile any
.jsx file that changes, you can use the command:
npx babel src --out-dir . --presets react-app/prod --watch &
You will see your .jsx files magically recompiled every time you save.
I personally don't use this.