مبدل HTML به JSX

تبلیغات
همه ابزارها رایگان

HTML را بچسبانید و JSX تمیز React بگیرید — class به className تبدیل می‌شود، صفت‌ها camelCase می‌شوند، رشته‌های style به اشیاء تبدیل و تگ‌ها خودبه‌خود بسته می‌شوند. همه‌چیز در مرورگر شما اجرا می‌شود. رایگان.

همه‌چیز در مرورگر شما اجرا می‌شود — نشانه‌گذاری شما هرگز از دستگاهتان خارج نمی‌شود.

snippet.html 
1
Component.jsx 

							

							

								{ }
								JSX شما اینجا ظاهر می‌شود
							

						

					

				

			

		

	


        
                    

		


					
درباره مبدل HTML به JSX

							
مبدل HTML به JSX، نشانه‌گذاری ساده‌ی HTML را در لحظه به JSX آماده برای React تبدیل می‌کند. این ابزار class را به className و for را به htmlFor بازنویسی می‌کند، ویژگی‌های kebab-case و SVG را به camelCase تبدیل می‌کند، رشته‌های style درون‌خطی را به آبجکت‌های style در JSX تبدیل می‌کند و عناصر void مانند img و br را خودبسته می‌کند - دقیقاً همان اصلاحاتی که در غیر این صورت باید دستی انجام دهید.

							
یک قطعه، یک بخش کامل صفحه، یا نشانه‌گذاری صادرشده از یک ابزار طراحی را جای‌گذاری کنید، و پنل JSX همان‌طور که تایپ می‌کنید با برجسته‌سازی نحوی به‌روزرسانی می‌شود. یک بسته‌بند اختیاری خروجی را به یک کامپوننت تابعی نام‌دار تبدیل می‌کند، پس نتیجه بدون ویرایش بیشتر مستقیماً در یک پروژه‌ی React قرار می‌گیرد.

							
این مبدل یک ابزار HTML به JSX کاملاً سمت کلاینت است: نشانه‌گذاری شما توسط جاوااسکریپت در مرورگرتان تبدیل می‌شود و هرگز دستگاه شما را ترک نمی‌کند، که آن را برای استفاده با قالب‌های اختصاصی و صفحات داخلی امن می‌کند.

					
					
نحوه استفاده از مبدل HTML به JSX

			
    
									
  1. HTML خود را در پنل چپ جای‌گذاری کنید، یا روی Sample کلیک کنید تا یک مثال بارگذاری شود.
    2. 
									
  2. همان‌طور که تایپ یا ویرایش می‌کنید، پنل JSX را ببینید که فوراً به‌روزرسانی می‌شود.
    3. 
									
  3. در صورت تمایل به کامپوننت آماده، Wrap in a component را فعال کنید و نام کامپوننت را تنظیم کنید.
    4. 
									
  4. روی Copy کلیک کنید تا JSX را بردارید، یا Download تا آن را به‌عنوان Component.jsx ذخیره کنید.
    5. 
									
  5. از Clear برای بازنشانی هر دو پنل و تبدیل قطعه‌ای دیگر استفاده کنید.
    6. 
							

		
					
سوالات متداول

			

									

						

							
						

						

							
class را به className و for را به htmlFor تغییر نام می‌دهد، ویژگی‌های خط‌تیره‌دار (از جمله ویژگی‌های SVG) را camelCase می‌کند، رشته‌های style درون‌خطی را به آبجکت‌های style در JSX تبدیل می‌کند و تگ‌های void مانند img، br و input را خودبسته می‌کند، پس خروجی یک JSX معتبر است.

						

					

									

						

							
						

						

							
بله. Wrap in a component را فعال کنید و نام کامپوننتی انتخاب کنید، و ابزار یک کامپوننت تابعی کامل دور نشانه‌گذاری تبدیل‌شده تولید می‌کند، آماده برای جای‌گذاری در پروژه‌ی شما یا دانلود به‌عنوان فایل .jsx.

						

					

									

						

							
						

						

							
بله. یک ویژگی style مانند style="margin-top: 10px" به یک آبجکت JSX مانند style={{marginTop: '10px'}} تبدیل می‌شود، با هر ویژگی CSS camelCase شده، از جمله ویژگی‌های vendor-prefixed.

						

					

									

						

							
						

						

							
خیر. تبدیل کاملاً در مرورگر شما انجام می‌شود، پس نشانه‌گذاری شما هرگز دستگاه شما را ترک نمی‌کند. می‌توانید با خیال راحت قالب‌های داخلی و صفحات منتشرنشده را تبدیل کنید.

						

					

									

						

							
						

						

							
بله، کاملاً رایگان است. نیازی به حساب کاربری، هزینه‌ی اعتباری یا محدودیتی در تعداد قطعه‌های تبدیل‌شده نیست.

						

					

							


						
			


	



	
	

		

		

			اشتراک‌گذاری
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
							
					
				
					

	



    
	
	

				
ابزارهای مرتبط


					

									

						
							
							
								
									تولیدکنندهٔ کد از JSON
									
								
								هر نمونهٔ JSON را به TypeScript، Go، Python، Kotlin یا یک JSON Schema تبدیل کنید — استنتاج نوع کاملاً در مرورگر شما اجرا می‌شود. رایگان و خصوصی.
								
																			رایگان
																	
							
						
					

									

						
							
							
								
									فرمت‌کننده کد
									
								
								HTML، CSS و JavaScript را زیباسازی کنید — indent را دوباره تنظیم کنید و شکست خط اضافه کنید تا کد نامرتب یا فشرده خوانا شود.
								
																			رایگان
																	
							
						
					

									

						
							
							
								
									مبدل cURL به کد
									
								
								یک دستور curl را بچسبانید و کد آمادهٔ اجرا برای fetch، Python requests، PHP، Node axios یا Go بگیرید — کاملاً در مرورگر شما تجزیه می‌شود. رایگان.
								
																			رایگان
																	
							
						
					

									

						
							
							
								
									تبدیل کد به تصویر
									
								
								یک قطعه کد را به یک تصویر زیبا و قابل اشتراک‌گذاری تبدیل کنید — تم‌ها، پس‌زمینه‌ها، قاب پنجره و موارد دیگر.
								
																			رایگان
																	
							
						
					

									

						
							
							
								
									فرمت‌های تاریخ و زمان جهانی
									
								
								ببینید تاریخ و زمان در سراسر جهان چگونه نوشته می‌شود — کشورها یا زبان‌ها را انتخاب کنید و فرمت‌های آن‌ها را فوری مقایسه کنید.
								
																			رایگان
																	
							
						
					

									

						
							
							
								
									JSON ↔ YAML
									
								
								JSON را به YAML تبدیل کنید و بالعکس، با اعتبارسنجی.
								
																			رایگان
																	
							
						
					

							

			







		

			

				

					
					

						
به کمک نیاز دارید؟

						
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.

					

				

				
					گزارش مشکل
				
			

		

	





        

            

                

                    
                

                

                    

                        
این ابزار رایگان را به وب‌سایت خود اضافه کنید — کد زیر را کپی و جای‌گذاری کنید.