title: How can I compile a ReactJS application (files) into one index.html file?
body: <p>I'm in the process of utilizing ReactJS (JSX) within a microsoft sharepoint static website. This website cannot compile JSX code. As a result, I need to convert my reactjs code/package/app into one simple file that should contain all the code and the dependencies as CDNs: index.html</p>
  
  <p>I've followed the following steps of implementing ReactJS (based on <a href="https://www.youtube.com/watch?v=Ke90Tje7VS0&amp;t=1206s" rel="nofollow noreferrer">this Youtube video</a>)</p>
  
  <ol>
  <li><a href="https://nodejs.org/en/" rel="nofollow noreferrer">Download NodeJS</a></li>
  <li><p>Install create-react-app package: </p>
  
  <p><code>sudo npm i -g create-react-app</code></p></li>
  <li><p>Create React Application </p>
  
  <p><code>create-react-app react-app</code></p></li>
  </ol>
  
  <p>After completing my application, my file/directory structure is as follows:  </p>
  
  <p><a href="https://i.stack.imgur.com/h1ryY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h1ryY.png" alt="React Application Files and Directories"></a></p>
  
  <p><strong>How can I compile this entire application into one simple compiled index.html file that I can utilize in any browser without node.js?</strong></p>
  
  <p>I've tried the following:</p>
  
  <ol>
  <li>I've copied and pasted my index.js code into online <a href="https://babeljs.io/repl/" rel="nofollow noreferrer">Babel</a>, but this tool doesnt create the index.html file I need </li>
  <li><p>Followed <a href="https://babeljs.io/setup#installation" rel="nofollow noreferrer">Babel Installation Instructions</a></p>
  
  <p>2.1) Ran the following command in the shell</p>
  
  <p><code>npm install --save-dev babel-core</code></p>
  
  <p>2.3) I'm not sure where to put the following javascript command</p>
  
  <pre><code>`require("babel-core").transform("code", options);`
  </code></pre></li>
  <li><p><a href="https://babeljs.io/docs/en/usage" rel="nofollow noreferrer">Followed Babel Alternative Installation Instructions</a></p>
  
  <p>3.1 Run the following commands in shell</p>
  
  <p>npm install --save-dev @babel/core @babel/cli @babel/preset-env
  npm install --save @babel/polyfill</p>
  
  <p>3.2 Created a config file named babel.config.js in roof of project with this content</p>
  
  <p>const presets = [
    [
      "@babel/env",
      {
        targets: {
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
        useBuiltIns: "usage",
      },
    ],
  ];</p>
  
  <p>module.exports = { presets };</p></li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/fhFxh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fhFxh.png" alt="enter image description here"></a></p>
  
  <p>3.3 However, the following command does not work</p>
  
  <pre><code>./node_modules/.bin/babel src --out-dir lib
  </code></pre>
  
  <p>Error:</p>
  
  <p><code>-bash: ./node_modules/.bin/babel: No such file or directory</code></p>