如何将React.jsx文件导入HTML?

所以我一直在尝试从jsx的html文件导入图像轮播。我已经在.html和“ npm install react-slick carousel”中添加了必要的脚本。加载浏览器后,一切都没有了。帮助一个兄弟。到目前为止,这是我的代码。

HTML文件

import os
import requests
import time
from xml.etree import ElementTree

try:
    input = raw_input
except NameError:
    pass

class TextToSpeech(object):
    def __init__(self,subscription_key):
        self.subscription_key = subscription_key
        self.tts = input("What would you like to convert to speech: ")
        self.timestr = time.strftime("%Y%m%d-%H%M")
        self.access_token = None
def get_token(self):
    fetch_token_url = "https://westus.api.cognitive.microsoft.com/sts/v1.0/issueToken"
    headers = {
        'Ocp-Apim-Subscription-Key': self.subscription_key
    }
    response = requests.post(fetch_token_url,headers=headers)
    self.access_token = str(response.text)

def save_audio(self):
    base_url = 'https://westus.tts.speech.microsoft.com/'
    path = 'cognitiveservices/v1'
    constructed_url = base_url + path
    headers = {
        'Authorization': 'Bearer ' + self.access_token,'Content-Type': 'application/ssml+xml','X-microsoft-OutputFormat': 'riff-24khz-16bit-mono-pcm','User-Agent': 'YYYYYYY-this is correct in VS Code'
    }
    xml_body = ElementTree.Element('speak',version='1.0')
    xml_body.set('{http://www.w3.org/XML/1998/namespace}lang','en-us')
    voice = ElementTree.SubElement(xml_body,'voice')
    voice.set('{http://www.w3.org/XML/1998/namespace}lang','en-US')
    voice.set(
        'name','microsoft Server Speech Text to Speech Voice (en-US,Guy24KRUS)')
    voice.text = self.tts
    body = ElementTree.tostring(xml_body)

    response = requests.post(constructed_url,headers=headers,data=body)
    if response.status_code == 200:
        with open('sample-' + self.timestr + '.wav','wb') as audio:
            audio.write(response.content)
            print("\nStatus code: " + str(response.status_code) +
                "\nYour TTS is ready for playback.\n")
    else:
            print("\nStatus code: " + str(response.status_code) +
                "\nSomething went wrong. Check your subscription key and headers.\n")

if __name__ == "__main__":
            subscription_key = "YYYYYYY-this is correct in VS Code"
            app = TextToSpeech(subscription_key)
            app.get_token()
            app.save_audio()

JSX文件

<!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>
Murphy_zhu_qiang 回答:如何将React.jsx文件导入HTML?

浏览器仅了解HTML,CSS和JavaScript。 JSX不是网络上的标准语言。

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

  1. 获取React本身。

  2. 获取Babel。 Babel是一个编译器,意味着它将您的JSX转换为传统JavaScript。同样,JSX在React中是可选的。

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

由于您要将React with JSX添加到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

本文链接:https://www.f2er.com/3087905.html

大家都在问