0

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.

HTML file

<!DOCTYPE html> <html lang="en"> <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <script src="https://unpkg.com/react@15.6.2/dist/react.js"></script>
     <script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"></script>
     <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

     <title>Friend With Benefits</title> </head> <body>

     <header>
         <div id="fwb">
             <button onclick="window.location.reload();">Friend With Benefits (FWB)</button>
         </div>

         <div class="register">
             <button>Sign Up</button>
         </div>

         <div>
             <button>Login</button>
         </div>

     </header>

     <div class="carousel">
         <script src="carousel.jsx"></script>
     </div>

     <button id="prevBtn;">Prev</button>
     <button id="nextBtn">Next</button>

     <div class="profile">
         SLIDESHOW
     </div>

     <div class="gym">

         <img src="">

         <blockquote>
             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.<br>
             Points can earn a friend perks such as: discounts, complementary gym accessories, and free membership
             for a month.
         </blockquote>

     </div>

     <div class="cost">

         <img src="">

         <blockquote>The yearly cost for FWB is only $50.<br>Free trial for the first month. Will notify three days before trial is over to
 avoid automated payment.</blockquote>

     </div>

     <div class="quote">
         SLIDESHOW
     </div>

     <footer class="footer">



     </footer>


 </body> </html>

JSX file

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 (
       <div>
         <Slider {...settings}>
           <div><img src="partner1.png" alt="one"/></div>
           <div><img src="partner2.jpg" alt="two"/></div>
           <div><img src="partner3.jpg" alt="three"/></div>
           <div><img src="partner4.jpg" alt="four"/></div>
           <div><img src="partner5.jpg" alt="five"/></div>
           <div><img src="partner6.jpg" alt="six"/></div>
         </Slider>
       </div>
     );   } }
Sofyan Thayf
  • 1,322
  • 2
  • 14
  • 26
Kwe
  • 1
  • 1
  • 2

1 Answers1

0

Browsers only understand HTML, CSS, and JavaScript. JSX is not a standard language of the web.

It was introduced to provide an easier syntax for React, and it is optional. In order to add React JSX code to your website, you need to

  1. Get React itself.

  2. Get Babel. Babel is a transpiler, meaning it will convert your JSX to traditional JavaScript. Again, JSX is optional in React.

  3. Get ReactDOM. ReactDOM allows you to render components in your HTML by selecting the element under which you want your elements to be rendered.

Since you want to add React with JSX to an HTML page, you can do it quickly by using CDNs as described in this tutorial: https://reactjs.org/docs/add-react-to-a-website.html

This approach is good enough for learning React, may not be good for your project if your project becomes so large you might need several components.

In that case, see create-react-app: https://reactjs.org/docs/create-a-new-react-app.html

vixrant
  • 178
  • 3
  • 12