{"componentChunkName":"component---src-pages-index-js","path":"/","result":{"data":{"codeExamples":{"edges":[{"node":{"id":"a-component-using-external-plugins","code":"class MarkdownEditor extends React.Component {\n constructor(props) {\n super(props);\n this.md = new Remarkable();\n this.handleChange = this.handleChange.bind(this);\n this.state = { value: 'Hello, **world**!' };\n }\n\n handleChange(e) {\n this.setState({ value: e.target.value });\n }\n\n getRawMarkup() {\n return { __html: this.md.render(this.state.value) };\n }\n\n render() {\n return (\n
\n

Input

\n \n \n

Output

\n \n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('markdown-example')\n);\n","mdAbsolutePath":"/vercel/workpath0/content/home/examples/a-component-using-external-plugins.md"}},{"node":{"id":"a-simple-component","code":"class HelloMessage extends React.Component {\n render() {\n return (\n
\n Hello {this.props.name}\n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('hello-example')\n);","mdAbsolutePath":"/vercel/workpath0/content/home/examples/a-simple-component.md"}},{"node":{"id":"a-stateful-component","code":"class Timer extends React.Component {\n constructor(props) {\n super(props);\n this.state = { seconds: 0 };\n }\n\n tick() {\n this.setState(state => ({\n seconds: state.seconds + 1\n }));\n }\n\n componentDidMount() {\n this.interval = setInterval(() => this.tick(), 1000);\n }\n\n componentWillUnmount() {\n clearInterval(this.interval);\n }\n\n render() {\n return (\n
\n Seconds: {this.state.seconds}\n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('timer-example')\n);","mdAbsolutePath":"/vercel/workpath0/content/home/examples/a-stateful-component.md"}},{"node":{"id":"an-application","code":"class TodoApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = { items: [], text: '' };\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n render() {\n return (\n
\n

TODO

\n \n
\n \n \n \n \n
\n );\n }\n\n handleChange(e) {\n this.setState({ text: e.target.value });\n }\n\n handleSubmit(e) {\n e.preventDefault();\n if (this.state.text.length === 0) {\n return;\n }\n const newItem = {\n text: this.state.text,\n id: Date.now()\n };\n this.setState(state => ({\n items: state.items.concat(newItem),\n text: ''\n }));\n }\n}\n\nclass TodoList extends React.Component {\n render() {\n return (\n
    \n {this.props.items.map(item => (\n
  • {item.text}
    • \n ))}\n
\n );\n }\n}\n\nReactDOM.render(\n ,\n document.getElementById('todos-example')\n);\n","mdAbsolutePath":"/vercel/workpath0/content/home/examples/an-application.md"}}]},"examples":{"edges":[{"node":{"fileAbsolutePath":"/vercel/workpath0/content/home/examples/a-simple-component.md","fields":{"slug":"/home/examples/a-simple-component.html"},"frontmatter":{"title":"یک کامپوننت ساده","domid":"hello-example"},"html":"

کامپوننت‌های ری‌اکت یک تابع render() را پیاده‌سازی می‌کنند که داده‌های ورودی را گرفته و خروجی آن چیزی است که نمایش داده می‌شود. این مثال از قواعدی مثل XML استفاده می‌کند که به آن JSX گفته می‌شود. داده‌های ورودی که در اختیار این کامپوننت قرار می‌گیرد، در تابع render() توسط this.props قابل دسترسی است.

\n

JSX اختیاری است و نیاز به استفاده از ری‌اکت نیست. برای مشاهده کدی که در مرحله کامپایل JSX تولید می‌شود، Babel REPL را مشاهده کنید.

"}},{"node":{"fileAbsolutePath":"/vercel/workpath0/content/home/examples/a-stateful-component.md","fields":{"slug":"/home/examples/a-stateful-component.html"},"frontmatter":{"title":"یک کامپوننت دارای state","domid":"timer-example"},"html":"

علاوه بر داده‌های ورودی که توسط this.props در اختیار یک کامپوننت قرار می‌گیرد، داده‌های state داخلی به‌وسیله this.state قابل دسترسی و مدیریت می‌شود. هنگامی که داده‌های state یک کامپوننت تغییر می‌کند، خروجی جدید با فراخوانی مجدد تابع render() رندر می‌شود.

"}},{"node":{"fileAbsolutePath":"/vercel/workpath0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"یک برنامه","domid":"todos-example"},"html":"

با استفاده از props و state می توان یک برنامه لیست کار‌ کوچک را ساخت. این مثال از state برای نگهداری داده‌های لیست مواردی که باید انجام شود و همچنین متنی که کاربر وارد کرده‌است استفاده می‌کند. اگرچه event handler ها درون کد render() تعریف شده‌اند، اما ری‌اکت آن‌ها را شناسایی و با استفاده از event delegation پیاده‌سازی می‌کند.

"}},{"node":{"fileAbsolutePath":"/vercel/workpath0/content/home/examples/a-component-using-external-plugins.md","fields":{"slug":"/home/examples/a-component-using-external-plugins.html"},"frontmatter":{"title":"یک کامپوننت که از پلاگین‌های خارجی استفاده می‌کند","domid":"markdown-example"},"html":"

ری‌اکت به شما این امکان را می‌دهد که که با دیگر کتابخانه‌ها و فریم‌ورک‌ها اتصال برقرار کنید. این مثال با بهره‌گیری از remarkable که یک کتابخانه برای Markdown است، در لحظه متن <textarea> را به خروجی HTML تبدیل می‌کند.

"}}]},"marketing":{"edges":[{"node":{"frontmatter":{"title":"خود توصیف کننده"},"html":"

ری‌اکت ساختن رابط‌کاربری پویا را ساده می‌کند. برای هر وضعیت برنامه خود یک view ساده طراحی کنید و هربار که داده‌های شما تغییر می‌کند، ری‌اکت به صورت بهینه‌‌ای، فقط کامپوننت‌های مربوطه را به‌روز رسانی و رندر می‌کند.

\n

viewهای خود توصیف کننده کد شما رو قابل پیش‌بینی و یافتن اشکال را آسان‌تر می‌کند.

"}},{"node":{"frontmatter":{"title":"بر‌پایه کامپوننت"},"html":"

کامپوننت‌هایی بسازید که state داخلی خود را، خودشان مدیریت می‌کنند و کپسوله شده‌اند.سپس با ترکیب آن‌ها رابط‌کاربری‌های پیچیده را بسازید.

\n

از آن‌جا که منطق یک کامپوننت به‌جای استفاده از قالب با جاوااسکریپت نوشته می‌شود، شما به‌راحتی می‌توانید داده‌هایی با ساختار متفاوت‌ را میان کامپوننت‌ها منتقل کنید و state کامپوننت‌ها را مستقل از DOM نگه‌دارید.

"}},{"node":{"frontmatter":{"title":"یک‌بار یاد بگیرید، همه‌جا استفاده‌ کنید"},"html":"

ما پیش‌فرضی درباره دیگر تکنولوژی‌های به‌کاررفته در پروژه شما نداریم، بنابراین می‌توانید قابلیت‌های جدید را با ری‌اکت بسازید.

\n

ری‌اکت روی سرور و همچنین به‌وسیله ری‌اکت نیتیو روی اپ موبایل هم رندر می‌شود.

"}}]}},"pageContext":{}},"staticQueryHashes":[]}