Konwerter HTML na JSX

Reklama
Wszystkie narzędzia Bezpłatnie

Wklej HTML i otrzymaj czysty React JSX — class staje się className, atrybuty są w camelCase, ciągi style stają się obiektami, a tagi samodomykające. Działa w całości w przeglądarce. Za darmo.

Wszystko działa w przeglądarce — Twój kod nigdy nie opuszcza urządzenia.

snippet.html 
1
Component.jsx 

							

							

								{ }
								Twój JSX pojawi się tutaj
							

						

					

				

			

		

	


        
                    

		


					
O Konwerter HTML na JSX

							
Konwerter HTML na JSX zamienia zwykły znacznik HTML w gotowy do użycia w React kod JSX w czasie rzeczywistym. Przepisuje class na className, a for na htmlFor, zamienia atrybuty zapisane z myślnikami oraz atrybuty SVG na camelCase, konwertuje ciągi znaków style na obiekty style JSX i samodomyka elementy void, takie jak img i br — dokładnie te same poprawki, które musiałbyś wykonać ręcznie.

							
Wklej fragment kodu, całą sekcję strony lub znacznik wyeksportowany z narzędzia do projektowania, a panel JSX aktualizuje się w trakcie pisania z podświetlaniem składni. Opcjonalny wrapper zamienia wynik w nazwany komponent funkcyjny, dzięki czemu wynik trafia bezpośrednio do projektu React bez dalszej edycji.

							
Konwerter działa w całości po stronie klienta: Twój znacznik jest przetwarzany przez JavaScript w Twojej przeglądarce i nigdy nie opuszcza Twojego urządzenia, co czyni go bezpiecznym do użycia z zastrzeżonymi szablonami i stronami wewnętrznymi.

					
					
Jak korzystać z Konwerter HTML na JSX

			
    
									
  1. Wklej swój HTML w lewym panelu lub kliknij Przykład, aby wczytać przykład.
    2. 
									
  2. Obserwuj, jak panel JSX aktualizuje się natychmiast w trakcie pisania lub edycji.
    3. 
									
  3. Przełącz opcję Zawiń w komponent i ustaw nazwę komponentu, jeśli chcesz uzyskać gotowy komponent funkcyjny.
    4. 
									
  4. Kliknij Kopiuj, aby pobrać JSX, lub Pobierz, aby zapisać go jako Component.jsx.
    5. 
									
  5. Użyj Wyczyść, aby zresetować oba panele i przekonwertować kolejny fragment.
    6. 
							

		
					
Najczęściej zadawane pytania

			

									

						

							
						

						

							
Zmienia nazwę class na className, a for na htmlFor, zamienia atrybuty z myślnikami (w tym atrybuty SVG) na camelCase, konwertuje ciągi znaków style na obiekty JSX oraz samodomyka znaczniki void, takie jak img, br i input, dzięki czemu wynik jest poprawnym kodem JSX.

						

					

									

						

							
						

						

							
Tak. Włącz opcję Zawiń w komponent i wybierz nazwę komponentu, a narzędzie wygeneruje kompletny komponent funkcyjny wokół przekonwertowanego znacznika, gotowy do wklejenia do Twojego projektu lub pobrania jako plik .jsx.

						

					

									

						

							
						

						

							
Tak. Atrybut style w rodzaju style="margin-top: 10px" staje się obiektem JSX, takim jak style={{marginTop: '10px'}}, przy czym każda właściwość CSS zapisywana jest w formacie camelCase, w tym właściwości z prefiksami producentów.

						

					

									

						

							
						

						

							
Nie. Konwersja odbywa się w całości w Twojej przeglądarce, więc Twój znacznik nigdy nie opuszcza Twojego urządzenia. Możesz bezpiecznie konwertować wewnętrzne szablony i niewydane jeszcze strony.

						

					

									

						

							
						

						

							
Tak, jest całkowicie darmowy. Nie wymaga konta, nie kosztuje kredytów i nie ma limitu liczby konwertowanych fragmentów.

						

					

							


						
			


	



	
	

		

		

			Udostępnij
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
Powiązane narzędzia


					

									

						
							
							
								
									Generator kodu z JSON
									
								
								Zamień dowolną próbkę JSON w TypeScript, Go, Python, Kotlin lub JSON Schema — wnioskowanie typów działa w całości w przeglądarce. Za darmo i prywatnie.
								
																			Bezpłatnie
																	
							
						
					

									

						
							
							
								
									Formatter kodu
									
								
								Upiększaj HTML, CSS i JavaScript — wcięcia i podziały wierszy, aby zaśmiecony lub zminifikowany kod był czytelny.
								
																			Bezpłatnie
																	
							
						
					

									

						
							
							
								
									Konwerter cURL na kod
									
								
								Wklej polecenie curl i otrzymaj gotowy kod dla fetch, Python requests, PHP, Node axios lub Go — przetwarzany w całości w przeglądarce. Za darmo.
								
																			Bezpłatnie
																	
							
						
					

									

						
							
							
								
									Konwerter kodu na obraz
									
								
								Zamień fragment kodu w piękny, udostępnialny obraz — motywy, tła, dekoracje okna i wiele więcej.
								
																			Bezpłatnie
																	
							
						
					

									

						
							
							
								
									Formaty daty i czasu na świecie
									
								
								Zobacz, jak daty i godziny zapisuje się na całym świecie — wybierz kraje lub języki i porównaj ich formaty w jednej chwili.
								
																			Bezpłatnie
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								Konwertuj JSON na YAML i z powrotem z walidacją.
								
																			Bezpłatnie
																	
							
						
					

							

			







		

			

				

					
					

						
Potrzebujesz pomocy?

						
Masz problem z tym narzędziem? Daj nam znać.

					

				

				
					Zgłoś problem
				
			

		

	





        

            

                

                    
                

                

                    

                        
Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.