ڕیاكت

لایبره‌ریه‌كی جاڤاسكریپته‌ بۆ بونیادنانی یوزه‌ر ئینته‌رفه‌یس

پێناسه‌كراو

ڕیاكت بونیادنانی یوزه‌ر ئینته‌رفه‌یس ئاسان ده‌كات. له‌ كاتی دروستكردنی هه‌ر به‌شێكی نوێ بۆ ئه‌پلیكه‌یشنه‌كه‌ت، ڕیاكت به‌ سه‌ركه‌وتوویی ته‌نها ئه‌و به‌شه‌ی ئه‌پلیكه‌یشنه‌كه‌ ئه‌پده‌یت ده‌كاته‌وه‌ كه‌ داتاكه‌ی گۆڕاوه‌.

ڤیوی پێناسه‌كراو كۆده‌كه‌ت ڕوونتر و ئاسانتر ده‌كات بۆ چاره‌سه‌ركردن.

كۆمپۆنێنت

كۆمپۆنێنتی له‌ناویه‌ك تێكهه‌ڵكێشراو دروستبكه‌ كه‌ زانیاری خۆیان ڕێكئه‌خه‌ن، دواتر ڕێكیان بخه‌ بۆ دروستكردنی یوزه‌ر ئینته‌رفه‌یسێكی تێكه‌ڵ.

له‌به‌رئه‌وه‌ی لۆجیكی كۆمپۆنێنته‌كان هه‌ر به‌ جاڤاسكریپت ده‌نووسرێن، ده‌توانیت به‌ ئاسانی داتای زۆر بخه‌یته‌ ناو ئاپه‌كه‌ت و داتاكه‌ له‌ ده‌ره‌وه‌ی (دۆم) بهێڵه‌ته‌وه‌.

یه‌كجار بینووسه‌ و له‌ هه‌موو شوێنێك به‌كاریبێنه‌

ئێمه‌ بیر له‌وه‌ ناكه‌ینه‌وه‌ كه‌ چ ستاكێك به‌كارده‌هێنیت بۆ ئاپه‌كه‌ت، بۆ ئه‌وه‌ی تۆ بتوانیت به‌رهه‌می نوێ بونیاد بنێیت به‌ بێ دووباره‌ نوسینه‌وه‌ی هیچ كۆدێك.

ڕیاكت له‌سه‌ر سێرڤه‌ریش ده‌توانرێت به‌كار بهێنرێت به‌ به‌كارهێنانی (نۆد‌) و هه‌روه‌ها ده‌توانێت ئه‌پی مۆبایلیشی پێ به‌رهه‌م بهێنرێت به‌ به‌كارهێنانی‌ ڕیاكت نه‌یتڤ


كۆمپۆنێنتێكی ساده‌

كۆمپۆنێنته‌كانی ڕیاكت مێسۆدی render() دروستده‌كه‌ن كه‌ ئه‌ویش داتا وه‌رده‌گرێ وه‌ك ئینپوت و ئه‌وه‌ ده‌گه‌ڕێنێته‌وه‌ كه‌ پێویسته‌ پیشان بدرێت.

ئه‌م نموونه‌یه‌ سینتاكسێكی هاوشێوه‌ی XML به‌كارده‌هێنێت كه‌ پێی ده‌وترێت JSX. ئه‌و داتایه‌ی كه‌ نێردراوه‌ بۆ هه‌ر كۆمپۆنێنتێك ده‌توانرێت له‌لایه‌ن مێسۆدی render() به‌كار بهێنرێت له‌ ڕێگه‌ی this.props.

تۆ سه‌ركه‌شیت له‌ به‌كارهێنانی** JSX و مه‌رج نیه‌ هه‌موو جارێك به‌كاری‌ بهێنیت.** Babel REPL تاقی بكه‌ره‌وه‌ تاوه‌كو ئه‌و كۆدی جاڤاسكریپته‌ ببینیت كه‌ له‌لایه‌ن JSX به‌رهه‌م ده‌هێنرێت.

Loading code example...

كۆمپۆنێنتی خاوه‌ن سته‌یت

جگه‌ له‌ وه‌رگرتنی داتا (له‌ ڕێگه‌ی this.props) كۆمپۆنێنت ده‌توانێت داتای ناوه‌كی خۆی هه‌بێت (وه‌رده‌گیرێت له‌ ڕێگه‌ی this.state). كاتێك داتای كۆمپۆنێنتێك ده‌گۆڕێت، ماركه‌پی ماڵپه‌ڕه‌كه‌ نوێ ده‌بێته‌وه‌ به‌ دووباره‌ به‌گه‌ڕخستنه‌وه‌ی مێسۆدی render().

Loading code example...

ئه‌پلیكه‌یشنێك

به‌ به‌كارهێنانی props و state ده‌توانین ئه‌پلیكه‌شنێكی بچووك دروست بكه‌ین. ئه‌م نموونه‌یه‌ state به‌كارده‌هێنێت بۆ به‌ به‌رده‌وامی وه‌رگرتنی لیستی ئه‌و كارانه‌ی كه‌ ده‌ته‌وێت بیكه‌یت له‌گه‌ڵ ئه‌و تێكسته‌ی به‌كارهێنه‌ر داخڵی ده‌كات. هه‌رچه‌نده‌ وا ده‌رده‌كه‌وێت كه‌ ئیڤێنت هاندڵه‌ره‌كان به‌ ئینڵاین ڕێنده‌ر كراون، ئه‌وان له‌ ڕاستیدا له‌ ڕێگه‌ی ئیڤێنت دێلیگه‌یشنه‌وه‌ كۆده‌كرێنه‌وه‌ و به‌رهه‌م ده‌هێنرێن.

Loading code example...

A Component Using External Plugins

ڕیاكت ڕێگه‌ت پێ ده‌دات كه‌ لایبره‌ری و فره‌یمۆڕكی ده‌ره‌كیش به‌كار بهێنیت. ئه‌م نموونه‌یه‌ ڕیماركه‌بڵ به‌كارده‌هێنێت، كه‌ لایبره‌رییه‌كی ده‌ره‌كییه‌ بۆ ماركداون به‌كاردێت. لێره‌دا به‌كاری ده‌هێنین بۆ گۆڕینی ئه‌و تێكسته‌ی له‌ناو <textarea> هه‌یه‌ به‌ شێوه‌یه‌كی ڕاسته‌وخۆ.

Loading code example...