title: How Do I import React.jsx file to my HTML?
body: <p>So I've been trying to import an image carousel from my jsx my html file. I've added the necessary scripts to my .html and "npm install react-slick carousel". Nothing is coming up once I load my browser. Help a brother out. Here is my code so far.</p>
  
  <p><strong>HTML file</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;
       &lt;meta charset="UTF-8"&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
       &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
       &lt;script src="https://unpkg.com/react@15.6.2/dist/react.js"&gt;&lt;/script&gt;
       &lt;script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"&gt;&lt;/script&gt;
       &lt;script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"&gt;&lt;/script&gt;
  
       &lt;title&gt;Friend With Benefits&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
  
       &lt;header&gt;
           &lt;div id="fwb"&gt;
               &lt;button onclick="window.location.reload();"&gt;Friend With Benefits (FWB)&lt;/button&gt;
           &lt;/div&gt;
  
           &lt;div class="register"&gt;
               &lt;button&gt;Sign Up&lt;/button&gt;
           &lt;/div&gt;
  
           &lt;div&gt;
               &lt;button&gt;Login&lt;/button&gt;
           &lt;/div&gt;
  
       &lt;/header&gt;
  
       &lt;div class="carousel"&gt;
           &lt;script src="carousel.jsx"&gt;&lt;/script&gt;
       &lt;/div&gt;
  
       &lt;button id="prevBtn;"&gt;Prev&lt;/button&gt;
       &lt;button id="nextBtn"&gt;Next&lt;/button&gt;
  
       &lt;div class="profile"&gt;
           SLIDESHOW
       &lt;/div&gt;
  
       &lt;div class="gym"&gt;
  
           &lt;img src=""&gt;
  
           &lt;blockquote&gt;
               FWB is collaborating with Gold's Gym, American Family, and YouFit. If a friend
               brings in enough people to a gym they will be rewarded points towards their gym membership.&lt;br&gt;
               Points can earn a friend perks such as: discounts, complementary gym accessories, and free membership
               for a month.
           &lt;/blockquote&gt;
  
       &lt;/div&gt;
  
       &lt;div class="cost"&gt;
  
           &lt;img src=""&gt;
  
           &lt;blockquote&gt;The yearly cost for FWB is only $50.&lt;br&gt;Free trial for the first month. Will notify three days before trial is over to
   avoid automated payment.&lt;/blockquote&gt;
  
       &lt;/div&gt;
  
       &lt;div class="quote"&gt;
           SLIDESHOW
       &lt;/div&gt;
  
       &lt;footer class="footer"&gt;
  
  
  
       &lt;/footer&gt;
  
  
   &lt;/body&gt; &lt;/html&gt;
  </code></pre>
  
  <p><strong>JSX file</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react"; import Slider from
   "react-slick";
  
   export default class SimpleSlider extends Component {   render() {
       const settings = {
         dots: true,
         infinite: true,
         speed: 500,
         slidesToShow: 1,
         slidesToScroll: 1
       };
       return (
         &lt;div&gt;
           &lt;Slider {...settings}&gt;
             &lt;div&gt;&lt;img src="partner1.png" alt="one"/&gt;&lt;/div&gt;
             &lt;div&gt;&lt;img src="partner2.jpg" alt="two"/&gt;&lt;/div&gt;
             &lt;div&gt;&lt;img src="partner3.jpg" alt="three"/&gt;&lt;/div&gt;
             &lt;div&gt;&lt;img src="partner4.jpg" alt="four"/&gt;&lt;/div&gt;
             &lt;div&gt;&lt;img src="partner5.jpg" alt="five"/&gt;&lt;/div&gt;
             &lt;div&gt;&lt;img src="partner6.jpg" alt="six"/&gt;&lt;/div&gt;
           &lt;/Slider&gt;
         &lt;/div&gt;
       );   } }
  </code></pre>