html-to-jsx-converter/index.html at main · SopKit/html-to-jsx-converter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML to JSX Converter - Simplify Your React Development</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="HTML to JSX Converter: Convert HTML to React JSX or JSX to HTML online effortlessly. Perfect for React developers to speed up workflows!">
    <meta name="keywords" content="HTML to JSX Converter, JSX to HTML, React JSX, Online Code Converter, HTML Converter for React, React Development Tools">
    <meta name="author" content="SopKit">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="HTML to JSX Converter - Simplify Your React Development">
    <meta property="og:description" content="Use the HTML to JSX Converter tool to convert HTML code into React-compatible JSX or vice versa online. Improve efficiency for React developers.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://sopkit.github.io/html-to-jsx-converter">
    <meta property="og:image" content="https://sopkit.github.io/images/html-jsx-converter-preview.png">

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "HTML to JSX Converter",
      "url": "https://sopkit.github.io/html-to-jsx-converter",
      "description": "An online tool for React developers to convert HTML to JSX or JSX to HTML effortlessly.",
      "keywords": "HTML to JSX Converter, React JSX, Code Converter, Online Tool",
      "creator": {
        "@type": "Organization",
        "name": "SopKit"
      }
    }
    </script>

    <!-- Favicon -->
    <link rel="icon" href="https://sopkit.github.io/favicon.ico" type="image/x-icon">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header>
        <div class="header-container">
            <h1>HTML to JSX Converter</h1>
            <p>Effortlessly transform your HTML code into React-compatible JSX or convert JSX back to HTML. Ideal for React developers looking to streamline their workflow.</p>
            <a href="https://sopkit.github.io" class="back-btn">← Back to Homepage</a>
        </div>
    </header>

    <main>
        <div class="container">
            <h2>Convert HTML to JSX or JSX to HTML</h2>
            <p>Our **HTML to JSX Converter** is the ultimate tool for React developers. Paste your HTML or JSX code below and click the appropriate button to instantly convert it. Whether you're building a React project or simply exploring JSX, this tool is your go-to resource.</p>

            <textarea id="htmlInput" placeholder="Paste your HTML or JSX code here..."></textarea>

            <div class="button-group">
                <button onclick="htmlToJSX2()">Convert HTML to JSX</button>
                <button onclick="JSXtoHTML2()">Convert JSX to HTML</button>
            </div>

            <textarea id="output" placeholder="Converted code will appear here" readonly></textarea>
        </div>

        <section class="features">
            <h2>Why Use Our HTML to JSX Converter?</h2>
            <ul>
                <li>Lightning-fast conversion of HTML to JSX or JSX to HTML.</li>
                <li>Perfect for React developers, designers, and students.</li>
                <li>Free and easy-to-use tool, accessible anywhere online.</li>
            </ul>
        </section>

        <section class="faq">
            <h2>Frequently Asked Questions</h2>
            <div class="question">
                <h3>What is JSX?</h3>
                <p>JSX (JavaScript XML) is a syntax extension for JavaScript used in React. It allows developers to write HTML-like code that transforms into JavaScript.</p>
            </div>
            <div class="question">
                <h3>How does this tool work?</h3>
                <p>Our tool parses the input code and applies syntax rules to convert it into the desired format. It works seamlessly for React developers.</p>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2024 SopKit. All rights reserved. | <a href="https://sopkit.github.io">Visit Homepage</a></p>
    </footer>

    <script src="html-jsx-converter.js"></script>
    <script>
        // Function: Convert HTML to JSX
        function htmlToJSX2() {
            const inputData = document.getElementById("htmlInput").value;
            const output = htmlToJSX(inputData);
            document.getElementById("output").value = output;
        }

        // Function: Convert JSX to HTML
        function JSXtoHTML2() {
            const inputData = document.getElementById("htmlInput").value;
            const output = JSXtoHTML(inputData);
            document.getElementById("output").value = output;
        }
    </script>
    <style>
        /* Global Styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    color: #333;
    line-height: 1.6;
    font-size: 18px;
}

/* Header Styles */
header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    text-align: center;
    padding: 2rem 1rem;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

header p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

.back-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    background: white;
    color: #007bff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease, color 0.3s ease;
}

.back-btn:hover {
    background: #0056b3;
    color: white;
}

/* Container Styles */
.container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Textarea Styles */
textarea {
    width: 100%;
    height: 200px;
    margin: 1rem 0;
    padding: 10px;
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 5px;
    resize: none;
    transition: border-color 0.3s ease;
}

textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* Button Styles */
.button-group {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

button {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Features Section */
.features {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: #f1f1f1;
    border-radius: 8px;
    text-align: center;
}

.features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features ul li {
    font-size: 1.1rem;
    margin: 0.5rem 0;
}

/* Footer Styles */
footer {
    text-align: center;
    padding: 1rem;
    background: #333;
    color: white;
}

footer a {
    color: #007bff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

    </style>
</body>

</html>