محوّل 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، ويحوّل الحالة إلى camelCase للسمات ذات الشرطات وسمات SVG، ويحوّل سلاسل style المضمَّنة إلى كائنات style بصيغة JSX، ويغلق العناصر الفارغة ذاتياً مثل img وbr — التعديلات نفسها التي كنت ستجريها يدوياً.

							
ألصق مقتطفاً، أو قسم صفحة كاملاً، أو ترميزاً مصدَّراً من أداة تصميم، وتتحدث لوحة JSX أثناء كتابتك مع إبراز الصياغة. يحوّل غلاف اختياري المخرجات إلى مكوّن دالة مسمّى، فتنزلق النتيجة مباشرة في مشروع React دون تعديل إضافي.

							
المحوّل أداة HTML إلى JSX تعمل بالكامل من جهة العميل: يُحوَّل ترميزك بواسطة JavaScript في متصفحك ولا يغادر جهازك أبداً، ما يجعله آمناً للاستخدام مع قوالب حصرية وصفحات داخلية.

					
					
كيفية استخدام محوّل HTML إلى JSX

			
    
									
  1. ألصق HTML الخاص بك في اللوحة اليسرى، أو انقر "عيّنة" لتحميل مثال.
    2. 
									
  2. راقب لوحة JSX وهي تتحدث فوراً أثناء كتابتك أو تعديلك.
    3. 
									
  3. فعّل "لفّ في مكوّن" وحدد اسم مكوّن إذا أردت مكوّن دالة جاهزاً.
    4. 
									
  4. انقر "نسخ" للحصول على JSX، أو "تنزيل" لحفظه كملف Component.jsx.
    5. 
									
  5. استخدم "مسح" لإعادة تعيين اللوحتين وتحويل مقتطف آخر.
    6. 
							

		
					
الأسئلة الشائعة

			

									

						

							
						

						

							
يعيد تسمية class إلى className وfor إلى htmlFor، يحوّل السمات المشرطة (بما فيها سمات SVG) إلى camelCase، يحوّل سلاسل style المضمَّنة إلى كائنات style بصيغة JSX، ويغلق الوسوم الفارغة مثل img وbr وinput ذاتياً، حتى تكون المخرجات JSX صالحاً.

						

					

									

						

							
						

						

							
نعم. فعّل "لفّ في مكوّن" واختر اسم مكوّن، وتُصدر الأداة مكوّن دالة كاملاً حول الترميز المحوَّل، جاهزاً للصق في مشروعك أو التنزيل كملف .jsx.

						

					

									

						

							
						

						

							
نعم. تصبح سمة مثل 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 والعكس، مع التحقق من الصحة.
								
																			مجاني
																	
							
						
					

							

			







		

			

				

					
					

						
هل تحتاج إلى مساعدة؟

						
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.

					

				

				
					الإبلاغ عن مشكلة
				
			

		

	





        

            

                

                    
                

                

                    

                        
أضف هذه الأداة المجانية إلى موقعك الخاص — انسخ والصق الكود أدناه.