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

Question

So I've been trying to import an image carousel from my jsx my html file.所以我一直在尝试从我的 jsx 我的 html 文件中导入图像轮播。 I've added the necessary scripts to my.html and "npm install react-slick carousel".我已将必要的脚本添加到 my.html 和“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 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 file 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>
     );   } }

Answer 1

Browsers only understand HTML, CSS, and JavaScript.浏览器只能理解 HTML、CSS 和 JavaScript。 JSX is not a standard language of the web. JSX 不是 web 的标准语言。

It was introduced to provide an easier syntax for React, and it is optional.引入它是为了为 React 提供更简单的语法，它是可选的。 In order to add React JSX code to your website, you need to为了将 React JSX 代码添加到您的网站，您需要

Get React itself.获取 React 本身。
Get Babel.得到巴别塔。 Babel is a transpiler, meaning it will convert your JSX to traditional JavaScript. Babel 是一个转译器，这意味着它将把你的 JSX 转换为传统的 JavaScript。 Again, JSX is optional in React.同样，JSX 在 React 中是可选的。
Get ReactDOM.获取 ReactDOM。 ReactDOM allows you to render components in your HTML by selecting the element under which you want your elements to be rendered. ReactDOM 允许您通过选择要在其下渲染元素的元素来渲染 HTML 中的组件。

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由于您想将带有 JSX 的 React 添加到 HTML 页面，您可以按照本教程中所述使用 CDN 快速完成： https://reactjs.org/docs/add-react-to-a-website.ZFC335EZ88388FC67A25

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

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

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

问题描述

1 个解决方案

解决方案1
0 2019-11-17 02:32:38

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

问题描述

1 个解决方案

解决方案1 0 2019-11-17 02:32:38

解决方案1
0 2019-11-17 02:32:38