Latest web development tutorials

الرد JSX

الرد على استبدال استخدام التقليدية JSX جافا سكريبت.

JSX يبدو XML هو امتداد لتركيب جافا سكريبت.

نحن لا بالضرورة استخدام JSX، لكنه لا يملك المزايا التالية:

  • JSX تنفيذ أسرع لأن يتم ترجمة ذلك إلى شفرة جافا سكريبت بعد التحسين.
  • ومن اكتب آمنة، ويمكن العثور عليها أثناء أخطاء ترجمة.
  • استخدام JSX قالب التأليف أسهل وأسرع.

استخدام JSX

JSX تبدو مشابهة إلى HTML، يمكننا أن ننظر إلى الأمثلة على ذلك: 

ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

نحن يمكن أن تتداخل في التعليمات البرمجية أعلاه علامات HTML متعددة، تحتاج إلى استخدام عنصر div المحيطة به، عنصر حالات ص يضيف السمةالمخصصة-myattribute البيانات، إضافة سمات مخصصة تحتاج إلى استخدام بالبيانات،بادئة. 

ReactDOM.render(
	<div>
	<h1>本教程</h1>
	<h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
	,
	document.getElementById('example')
);

محاولة »

ملف مستقل

يمكن وضع أكواد تتفاعل JSX في وثيقة منفصلة، على سبيل المثال، فإننا إنشاء helloworld_react.js الملف، على النحو التالي: 

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

ثم إدخالها في ملف شبيبة في ملف HTML: 

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

محاولة »

التعبير جافا سكريبت

يمكننا استخدام تعبيرات جافا سكريبت في JSX. كتابة تعبير في الأقواس المجعدة{}.ومن الأمثلة على ذلك ما يلي: 

ReactDOM.render(
	<div>
	  <h1>{1+1}</h1>
	</div>
	,
	document.getElementById('example')
);

محاولة »

لا يمكنك استخدامإذا كانت تصريحات آخرفي JSX، واحد يمكن استخداممشروط (المشغل الثلاثي)التعبير بدلا من ذلك. في المثال التالي، إذا كان المتغيرط يساويإرادة1متصفح الناتجصحيح،إذا قمت بتعديل قيمة ط، أنه سيتم إخراجكاذبة.

ReactDOM.render(
	<div>
	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
	</div>
	,
	document.getElementById('example')
);

محاولة »

أسلوب

الرد نوصي باستخدام أساليب المضمنة. يمكننا استخدام جملةcamelCase لتحديد الأنماط المضمنة. تتفاعل يضيف بكسلتلقائيا بعد عدد العنصر المحدد. المثال التالي يوضح إضافةmyStyle النمط المضمن لعناصر H1:

var myStyle = {
	fontSize: 100,
	color: '#FF0000'
};
ReactDOM.render(
	<h1 style = {myStyle}>本教程</h1>,
	document.getElementById('example')
);

محاولة »

مذكرة

ملاحظة تحتاج إلى كتابة في الأقواس، والأمثلة على النحو التالي: 

ReactDOM.render(
	<div>
    <h1>本教程</h1>
    {/*注释...*/}
 	</div>,
	document.getElementById('example')
);

محاولة »

مجموعة

JSX يسمح للالإدراج في مجموعة القالب، فإن مجموعة تتوسع تلقائيا إلى كافة الأعضاء: 

var arr = [
  <h1>本教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

محاولة »

علامات HTML مقابل يردون التجمع

رد فعل يمكن أن تجعل علامات HTML (الجمل) أو تتفاعل مكونات (فئات).

لجعل علامات HTML، ومجرد استخدام اسم العلامة بأحرف صغيرة في JSX. 

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

لتقديم رد الفعل المكون، ببساطة إيجاد بداية المتغير المحلي بحرف كبير. 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

الرد على JSX استخدام الاتفاقيات حالة العلوي والسفلي لتمييز الطبقات من المكونات المحلية وعلامات HTML.

ملاحظة:

لأن JSX هو جافا سكريبت، وعدد من معرفات مثل class و for يست على النحو الموصى به اسم سمة XML. وكبديل لذلك، تتفاعل DOM استخدام className و htmlFor قيام الملكية المقابلة.