Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to run react code to render a webpage and display to user?

Say I have some generated react code that I want to display to the user for them to click through and comment on. The user isn’t the one coding the website, I just want to show them how the generated website looks so they can make some comments on it. An example of the generated code could look like this:

import { useState } from 'react';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { MailIcon, GithubIcon, LinkedinIcon } from 'lucide-react';

export default function Website() {
  const [activeTab, setActiveTab] = useState('about');

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      {/* Navigation */}
      <nav className="bg-white shadow-lg rounded-lg p-4 mb-8">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold text-blue-600">My Website</h1>
          <div className="space-x-4">
            <button 
              onClick={() => setActiveTab('about')}
              className={`px-4 py-2 rounded ${activeTab === 'about' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}
            >
              About
            </button>
            <button 
              onClick={() => setActiveTab('projects')}
              className={`px-4 py-2 rounded ${activeTab === 'projects' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}
            >
              Projects
            </button>
            <button 
              onClick={() => setActiveTab('contact')}
              className={`px-4 py-2 rounded ${activeTab === 'contact' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}
            >
              Contact
            </button>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <div className="max-w-4xl mx-auto">
        {activeTab === 'about' && (
          <Card>
            <CardHeader>
              <h2 className="text-2xl font-bold">About Me</h2>
            </CardHeader>
            <CardContent>
              <p className="text-gray-600">
                Hello! I'm a web developer passionate about creating beautiful and functional websites.
                I specialize in React, TypeScript, and modern web technologies.
              </p>
              <img 
                src="/api/placeholder/400/300" 
                alt="Profile" 
                className="rounded-lg mt-4 mx-auto"
              />
            </CardContent>
          </Card>
        )}

        {activeTab === 'projects' && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <h3 className="text-xl font-bold">Project 1</h3>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">A fantastic project showcasing my skills.</p>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <h3 className="text-xl font-bold">Project 2</h3>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">Another amazing project I've worked on.</p>
              </CardContent>
            </Card>
          </div>
        )}

        {activeTab === 'contact' && (
          <Card>
            <CardHeader>
              <h2 className="text-2xl font-bold">Contact Me</h2>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center space-x-2">
                  <MailIcon className="text-blue-600" />
                  <span>[email protected]</span>
                </div>
                <div className="flex items-center space-x-2">
                  <GithubIcon className="text-blue-600" />
                  <span>github.com/username</span>
                </div>
                <div className="flex items-center space-x-2">
                  <LinkedinIcon className="text-blue-600" />
                  <span>linkedin.com/in/username</span>
                </div>
              </div>
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  );
}

How would I render this and show it to the user? I’m still in the planning stages of this project, but the backend that will be generating and handling the above react code will likely be Django based. What I’m trying to do is really similar to the react editor on this website: https://react-bootstrap.netlify.app/docs/components/navbar/?

Tags:

2

Answers


  1. 0

    You can render it on the App.jsx and then on index.js

    Login or Signup to reply.
  2. 0

    What you are asking is an extremely complex thing to do yourself, I would recommend using mature and tested community alternatives first to see if they suit your needs.

    One such example is the react-live package. On their website you can find a demo with a live editor that accepts react code and renders it to the right.

    You also have react-jsx-parser. Here is a simple example of the implementation you’re looking for using this package:

    import React from 'react'
import JsxParser from 'react-jsx-parser'

const MyComponent = () => (
  <JsxParser
    jsx={`
      <h1>Header</h1>
      <div>I am text!</div>
    `}
  />
)

    Note that the jsx prop is a string so you can pass the code as a variable from your backend, this example types it inline for demonstration purposes.

    You’ll have to refer to each project’s documentation for more complex examples but most can easily handle custom components and simple hook usage.

    Keep in mind that if the code from the backend is user created it could expose you to security issues. There is a lot of care to be had when dealing with JSX injection, even if the packages handle most issues for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search