Конвертер HTML у JSX

Реклама
Всі інструменти Безкоштовно

Вставте HTML і отримайте чистий React JSX — class стає className, атрибути в camelCase, рядки style стають об'єктами, а теги самозакриваються. Працює повністю у вашому браузері. Безкоштовно.

Усе працює у вашому браузері — ваша розмітка ніколи не залишає ваш пристрій.

snippet.html 
1
Component.jsx 

							

							

								{ }
								Ваш JSX з'явиться тут
							

						

					

				

			

		

	


        
                    

		


					
Про Конвертер HTML у JSX

							
Конвертер HTML у JSX перетворює звичайну HTML-розмітку на готовий для React JSX у реальному часі. Він перейменовує class на className і for на htmlFor, переводить kebab-case та SVG-атрибути в camelCase, перетворює вбудовані рядки style на об’єкти стилю JSX і самозакриває порожні елементи, такі як img та br — саме ті правки, які ви б інакше робили вручну.

							
Вставте фрагмент, повний розділ сторінки або розмітку, експортовану з інструменту дизайну, і панель JSX оновлюється в міру вводу з підсвіткою синтаксису. Опціональна обгортка перетворює результат на іменований функціональний компонент, тож результат одразу підходить для проєкту React без подальшого редагування.

							
Конвертер повністю клієнтський: ваша розмітка перетворюється JavaScript у вашому браузері і ніколи не залишає ваш пристрій, що робить його безпечним для використання з приватними шаблонами та внутрішніми сторінками.

					
					
Як використовувати Конвертер HTML у JSX

			
    
									
  1. Вставте HTML у ліву панель або натисніть «Приклад», щоб завантажити зразок.
    2. 
									
  2. Спостерігайте, як панель JSX оновлюється миттєво під час вводу чи редагування.
    3. 
									
  3. Увімкніть «Обгорнути в компонент» і встановіть назву компонента, якщо хочете готовий функціональний компонент.
    4. 
									
  4. Натисніть «Копіювати», щоб забрати JSX, або «Завантажити», щоб зберегти як Component.jsx.
    5. 
									
  5. Використайте «Очистити», щоб скинути обидві панелі та перетворити інший фрагмент.
    6. 
							

		
					
Часті запитання

			

									

						

							
						

						

							
Він перейменовує class на className і for на htmlFor, переводить атрибути з дефісами в camelCase (включно з атрибутами SVG), перетворює вбудовані рядки style на об’єкти стилю JSX і самозакриває порожні теги, такі як img, br та input, тож результат є коректним JSX.

						

					

									

						

							
						

						

							
Так. Увімкніть «Обгорнути в компонент» і оберіть назву компонента, і інструмент видасть повний функціональний компонент навколо перетвореної розмітки, готовий для вставлення у ваш проєкт або завантаження як файл .jsx.

						

					

									

						

							
						

						

							
Так. Атрибут style на кшталт style="margin-top: 10px" стає об’єктом JSX на кшталт style={{marginTop: '10px'}}, причому кожна властивість CSS переводиться в camelCase, включно з властивостями з вендорними префіксами.

						

					

									

						

							
						

						

							
Ні. Перетворення виконується повністю у вашому браузері, тож ваша розмітка ніколи не залишає ваш пристрій. Ви можете безпечно перетворювати внутрішні шаблони та неопубліковані сторінки.

						

					

									

						

							
						

						

							
Так, він повністю безкоштовний. Реєстрація не потрібна, кредити не витрачаються, і немає обмеження на кількість перетворених фрагментів.

						

					

							


						
			


	



	
	

		

		

			Поділитися
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
Пов'язані інструменти


					

									

						
							
							
								
									Генератор коду з JSON
									
								
								Перетворіть будь-який зразок JSON на TypeScript, Go, Python, Kotlin або JSON Schema — визначення типів виконується повністю у вашому браузері. Безкоштовно та приватно.
								
																			Безкоштовно
																	
							
						
					

									

						
							
							
								
									Форматувальник коду
									
								
								Форматуйте HTML, CSS та JavaScript — розставляйте відступи та переноси рядків, щоб зробити брудний або мінімізований код читабельним.
								
																			Безкоштовно
																	
							
						
					

									

						
							
							
								
									Конвертер cURL у код
									
								
								Вставте команду curl і отримайте готовий код для fetch, Python requests, PHP, Node axios або Go — розбір виконується повністю у вашому браузері. Безкоштовно.
								
																			Безкоштовно
																	
							
						
					

									

						
							
							
								
									Код у зображення
									
								
								Перетворіть фрагмент коду на красиве зображення для поширення — теми, фони, chrome вікна та інше.
								
																			Безкоштовно
																	
							
						
					

									

						
							
							
								
									Формати дати та часу у світі
									
								
								Перегляньте, як записуються дата та час у різних країнах — оберіть країни або мови та порівняйте їхні формати.
								
																			Безкоштовно
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								Конвертуйте JSON у YAML і навпаки з валідацією.
								
																			Безкоштовно
																	
							
						
					

							

			







		

			

				

					
					

						
Потрібна допомога?

						
Виникла проблема з цим інструментом? Повідомте нас.

					

				

				
					Повідомити про проблему
				
			

		

	





        

            

                

                    
                

                

                    

                        
Додайте цей безкоштовний інструмент на власний вебсайт — скопіюйте та вставте код нижче.