Конвертор от HTML към JSX

Реклама
Всички инструменти Безплатно

Поставете HTML и получете чист React JSX — class става className, атрибутите се изписват в camelCase, низовете за style стават обекти, а таговете се самозатварят. Работи изцяло във вашия браузър. Безплатно.

Всичко работи във вашия браузър — вашият маркъп никога не напуска устройството ви.

snippet.html 
1
Component.jsx 

							

							

								{ }
								Вашият JSX ще се появи тук
							

						

					

				

			

		

	


        
                    

		


					
За Конвертор от HTML към JSX

							
Конвертерът HTML to JSX превръща обикновена HTML разметка в JSX, готов за React, в реално време. Той преименува class на className и for на htmlFor, преобразува в camelCase атрибути с тирета и SVG атрибути, преобразува низове от inline стилове в JSX обекти за стил и самозатваря празни елементи като img и br — точно редакциите, които иначе бихте направили ръчно.

							
Поставете откъс, цял раздел от страница, или разметка, експортирана от дизайнерски инструмент, и панелът JSX се обновява докато пишете, с осветяване на синтаксиса. По избор обвиване превръща резултата в именуван функционален компонент, така че резултатът се вписва директно в React проект без допълнително редактиране.

							
Конвертерът е напълно клиентски HTML to JSX инструмент: разметката ви се трансформира от JavaScript в браузъра ви и никога не напуска устройството ви, което го прави безопасен за използване с патентовани шаблони и вътрешни страници.

					
					
Как да използвате Конвертор от HTML към JSX

			
    
									
  1. Поставете HTML кода си в левия панел, или кликнете Пример, за да заредите пример.
    2. 
									
  2. Наблюдавайте панела JSX да се обновява мигновено, докато пишете или редактирате.
    3. 
									
  3. Включете Обвий в компонент и задайте име на компонент, ако искате готов функционален компонент.
    4. 
									
  4. Кликнете Копирай, за да вземете JSX кода, или Изтегли, за да го запазите като Component.jsx.
    5. 
									
  5. Използвайте Изчисти, за да нулирате двата панела и да конвертирате друг откъс.
    6. 
							

		
					
Често задавани въпроси

			

									

						

							
						

						

							
Преименува class на className и for на htmlFor, преобразува в camelCase атрибути с тирета (включително SVG атрибути), преобразува низове от inline стилове в 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 — анализиран изцяло в браузъра ви. Безплатно.
								
																			Безплатно
																	
							
						
					

									

						
							
							
								
									Конвертор на код в изображение
									
								
								Превърнете кодов фрагмент в красиво изображение за споделяне — теми, фонове, прозоречен хром и още.
								
																			Безплатно
																	
							
						
					

									

						
							
							
								
									Световни формати за дата и час
									
								
								Вижте как датите и часовете се изписват по целия свят — изберете държави или езици и сравнете форматите им моментално.
								
																			Безплатно
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								Конвертирайте JSON към YAML и обратно, с валидация.
								
																			Безплатно
																	
							
						
					

							

			







		

			

				

					
					

						
Нуждаете се от помощ?

						
Открихте проблем с този инструмент? Кажете ни.

					

				

				
					Докладване на проблем
				
			

		

	





        

            

                

                    
                

                

                    

                        
Добавете този безплатен инструмент към собствения си уебсайт — копирайте и поставете кода по-долу.