How to insert React into website?

JavaScript
1

Hi there,

I am totally new to React code and have been given some code to insert into a website which I have not done before.

Can anyone tell me how I do this? Do I wrap it in a tag?

Any advice would be great, thanks!

2

It is possible to load React as an external library (i.e. no build step is required) but the exact steps will depend upon the code.

Can you provide more context and possibly a code example?

3

This is repeated question that everyone asks. When I was struggling with this issue one of mt friend helped me with this technique :heart::

Add a <div> element with an id attribute to the HTML of the website. Include the React library in the <head> of the HTML document. Create a JavaScript file with your React code and include it in the HTML document. Use the ReactDOM.render() method to render your React components inside the <div> element you created.

4

Same formula couldn’t letting me to post correctly :laughing: . Here you can view the actual formula:

5

Thanks for the reply.

This is the code that I have:

import React, { useState } from "react";
import { generateText } from "../openai";
import './ChatWidget.css'

const ChatWidget = () => {
  const [history, setHistory] = useState([]);
  const [input, setInput] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await generateText(input.trim() + '');
    setHistory([
      ...history,
      { text: input, sender: "user" },
      { text: response, sender: "bot" },
    ]);
    setInput("");
  };

  return (
    <div className="chat-widget">
      <div className="chat-title">AI Chat</div>
      <div className="chat-history-container">
        {history.map((message, index) => (
          <div key={index} className={`message ${message.sender} ${message.sender === 'bot' ? 'bot-response' : ''}`}>
            <span className="message-text">{message.text}</span>
          </div>
        ))}
      </div>
      <form className="input-form" onSubmit={handleSubmit}>
        <input className="input-field" type="text" value={input} onChange={(e) => setInput(e.target.value)} />
        <button className="submit-button" type="submit">Send</button>
      </form>
    </div>
  );
};

export default ChatWidget;
6

Hi,

A couple of things.

First, could you please format your code properly. The above seems to be using a block quote and is missing certain pieces.

Second, what is openai (line 2)?

Is it this package? If so, then note that the library is meant for server-side usage only, as using it in client-side browser code will expose your secret API key.

We can probably get this running and look at how best to integrate it into your site, but it’s going to be a fair bit more complicated than just dropping it into a script tag and moving on with your day.

7

@toolman

Fun removing the > from each line of your code. Regex to the rescue, replace ^>\s with ‘’

In future just select your code in the text editor and click on the </> button on the menu. This will wrap the code in opening and closing ``` ticks, formatting it.

Thanks

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.