تحقق الخوارزميات في ReactJS

تحقق من الأدوات هو طريقة قوية لضمان استخدام مكونات المكونات بشكل صحيح. هذا سيساعد في تجنب الأخطاء والمشاكل في وقت لاحق عند زيادة حجم التطبيق. كما يجعل الكود أكثر قراءة، لأننا نستطيع رؤية كيفية استخدام كل مكون.

تحقق من الأدوات

App.jsx

import　React　from　'react';
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h3>مجموعة: {this.props.propArray}</h3>
　　　　　　　　　　　　<h3>حقيقي: {this.props.propBool ? "صحيح..." : "غير صحيح..."}</h3>
　　　　　　　　　　　　<h3>دالة: {this.props.propFunc(3)}</h3>
　　　　　　　　　　　　<h3>عدد: {this.props.propNumber}</h3>
　　　　　　　　　　　　<h3>String: {this.props.propString}</h3>
　　　　　　　　　　　　<h3>عنصر: {this.props.propObject.objectName1}</h3>
　　　　　　　　　　　　<h3>عنصر: {this.props.propObject.objectName2}</h3>
　　　　　　　　　　　　<h3>عنصر: {this.props.propObject.objectName3}</h3>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
App.propTypes　=　{
　　　propArray:　React.PropTypes.array.isRequired,
　　　propBool:　React.PropTypes.bool.isRequired,
　　　propFunc:　React.PropTypes.func,
　　　propNumber:　React.PropTypes.number,
　　　propString:　React.PropTypes.string,
　　　propObject:　React.PropTypes.object
}
App.defaultProps　=　{
　　　propArray:　[1,2,3,4,5],
　　　propBool:　true,
　　　propFunc:　function(e){return　e},
　　　propNumber:　1,
　　　propString:　"String　value..."
　　　
　　　propObject:　{
　　　　　　objectName1:"objectValue1",
　　　　　　objectName2:　"objectValue2",
　　　　　　objectName3:　"objectValue3"
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/>,　document.getElementById('app'));