0

所以我一直在尝试从我的 jsx 我的 html 文件中导入图像轮播。我已将必要的脚本添加到我的 .html 和“npm install react-slick carousel”中。加载浏览器后什么都没有出现。帮小弟解围。到目前为止，这是我的代码。

HTML 文件

<!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 文件

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>
     );   } }
4

1 回答 1

0

浏览器只能理解 HTML、CSS 和 JavaScript。JSX 不是网络的标准语言。

引入它是为了为 React 提供更简单的语法，它是可选的。为了将 React JSX 代码添加到您的网站，您需要

  1. 获取 React 本身。

  2. 得到巴别塔。Babel 是一个转译器，这意味着它将你的 JSX 转换为传统的 JavaScript。同样，JSX 在 React 中是可选的。

  3. 获取 ReactDOM。ReactDOM 允许您通过选择要在其下呈现元素的元素来呈现 HTML 中的组件。

由于您想将带有 JSX 的 React 添加到 HTML 页面，您可以使用本教程中描述的 CDN 快速完成： https ://reactjs.org/docs/add-react-to-a-website.html

这种方法对于学习 React 来说已经足够好了，如果您的项目变得如此之大以至于您可能需要多个组件，则可能对您的项目不利。

在这种情况下，请参阅 create-react-app： https ://reactjs.org/docs/create-a-new-react-app.html

于 2019-11-17T02:32:38.987 回答