HTML file change to REACT

Question

I'm wondering if it's possible to change this HTML code to make it fit into React.For example is if I try to put this HTML code into the REACT app. I also included the code for Node.js and MongoDB. Does it require a lot of change for the HTML code to make it fit in React? Is it necessary to include script and import DOM in the method to include it in REACT App?

This is home.ejs code use for upload and download files.

<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">
     <title>Document</title>
 </head>
 <body>
     <h2>Upload Files</h2>
        <form action="/" method="POST" enctype="multipart/form-data">
         <input type="file" name="pic"><br>
         <input type="submit" value="Upload">
        </form><br><br><br><br>
    <h2>Download Files</h2>
        <table>
            <thead>
                <tr>
                    <td>
                        image
                    </td>
                    <td>
                        download
                    </td>
                </tr>
            </thead>
            <tbody>
                <% for(var i=0; i < data.length > 0; i++) {%>
                 <tr>
                     <td><img src="<%= data[i].picspath %>" style="width:100px; height:100px;"></td>
                     <td>
                         <form action="/download/<%= data[i]._id %>" method="GET">
                          <input type="submit" value="Download">
                        </form>
                     </td>
                 </tr>
                <% } %>
            </tbody>
        </table>
 </body>
 </html>

you can consider to use this site magic.reactjs.net/htmltojsx.htm — trysetyoutomo
– trysetyoutomo, Commented Dec 21, 2022 at 2:12

SuspenseFallback · Accepted Answer · 2022-12-23 15:38:05Z

1

sure just follow the following steps

Replace the opening and closing < html > tags with a < div > tag.
Replace the opening and closing < head > tags with a <React.Fragment> tag.
Replace the opening and closing < body > tags with a < div > tag.
Replace the <% and %> tags with curly braces { and } to indicate that the code between them is JavaScript.
Replace the <%= and %>tags with curly braces { and } to indicate that the code between them is an expression that should be rendered as a string.

<div>
<React.Fragment>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</React.Fragment>
<div>
  <h2>Upload Files</h2>
  <form action="/" method="POST" enctype="multipart/form-data">
    <input type="file" name="pic" /><br />
    <input type="submit" value="Upload" />
  </form>
  <br /><br /><br /><br />
  <h2>Download Files</h2>
  <table>
    <thead>
      <tr>
        <td>image</td>
        <td>download</td>
      </tr>
    </thead>
    <tbody>
      {data.map((item) => {
        return (
         <tr>
          <td>
            <img src={item.picspath} style={{ width: "100px", height: "100px" }} />
          </td>
          <td>
            <form action={`/download/${item._id}`} method="GET">
              <input type="submit" value="Download" />
            </form>
          </td>
        </tr>)
      })}
    </tbody>
  </table>
</div>
</div>

edited Dec 23, 2022 at 15:38

SuspenseFallback

14810 bronze badges

answered Dec 21, 2022 at 2:09

Andrew Hartnell

263 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pia punya Munirah Over a year ago

Thank you..It really help me to understand how it work.

Collectives™ on Stack Overflow

HTML file change to REACT

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related