如何将 React.jsx 文件导入我的 HTML？

Posted 2023-02-25

技术标签:

【中文标题】如何将 React.jsx 文件导入我的 HTML？【英文标题】：How Do I import React.jsx file to my HTML? 【发布时间】：2019-11-17 02:21:04 【问题描述】：

所以我一直在尝试从我的 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" /></div>
           <div><img src="partner2.jpg" /></div>
           <div><img src="partner3.jpg" /></div>
           <div><img src="partner4.jpg" /></div>
           <div><img src="partner5.jpg" /></div>
           <div><img src="partner6.jpg" /></div>
         </Slider>
       </div>
     );

【问题讨论】：

【参考方案1】：

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

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

获取 React 本身。

获取通天塔。 Babel 是一个转译器，这意味着它将你的 JSX 转换为传统的 JavaScript。同样，JSX 在 React 中是可选的。

获取 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

【讨论】：

以上是关于如何将 React.jsx 文件导入我的 HTML？的主要内容，如果未能解决你的问题，请参考以下文章