From d40cc77b4c483448387e781a29655fc430c12d1d Mon Sep 17 00:00:00 2001 From: behzad-dev <70510985+behzad-dev@users.noreply.github.com> Date: Wed, 3 Mar 2021 22:28:57 +0330 Subject: [PATCH 1/2] [React Without JSX Translated] --- content/docs/react-without-jsx.md | 34 ++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 95a5ca967..c8248e090 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -1,14 +1,19 @@ --- id: react-without-jsx -title: React Without JSX +title: ری‌اکت بدون JSX permalink: docs/react-without-jsx.html --- +برای استفاده از ری‌اکت شما نیاز به JSX ندارید.استفاده نکردن از JSX در ری‌اکت هنگامی راحت‌تر است که نیاز به راه اندازی یک محیط تولید(build environment) ندارید. -JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. +هر المنت فقط کدی (syntactic sugar) است برای راحت‌تر صدا زده شدن. `React.createElement(component, props, ...children)`. -Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript. + پس +هرکاری با JSX می‌توانید انجام دهید، همچنین می‌توانید با جاوا اسکریپت هم انجام دهید. -For example, this code written with JSX: + + + +برای مثال، این کد با JSX نوشته شده است: ```js class Hello extends React.Component { @@ -23,7 +28,9 @@ ReactDOM.render( ); ``` -can be compiled to this code that does not use JSX: + + +که می‌توان همین کد را بدون نیاز به JSX کامپایل کرد: ```js class Hello extends React.Component { @@ -38,11 +45,17 @@ ReactDOM.render( ); ``` -If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example). +اگر کنجکاو هستید که نمونه های بیشتری از چگونگی تبدیل JSX به جاوا اسکریپت ببینید، می‌توانید از [کامپایلر آنلاین بابل](babel://jsx-simple-example) استفاده کنید. + + + + +کامپوننت هم می‌توان به صورت string باشد هم به صورت یک subclass از `React.Component` و یا یک تابع. + +اگر از نوشتن `React.createElement` خسته شده اید، یک الگوی معمول این است که از اختصارنویسی استفاده نمایید: + -The component can either be provided as a string, as a subclass of `React.Component`, or a plain function. -If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand: ```js const e = React.createElement; @@ -52,8 +65,9 @@ ReactDOM.render( document.getElementById('root') ); ``` +اگر شما از این اختصارنویسی در `React.createElement` استفاده نمایید، می‌تواند به اندازه استفاده نکردن از JSX در ری‌اکت راحت باشد. + -If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX. +در صورت نیاز، شما می‌توانید به انجمن‌هایی نظیر [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) و [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) که مثال‌های دیگر را در اختیارتان می‌گذارد مراجعه نمایید. -Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax. From a062623cc46b082d0d148bf871bd2c4395508bf1 Mon Sep 17 00:00:00 2001 From: behzad <70510985+behzad-dev@users.noreply.github.com> Date: Mon, 8 Mar 2021 19:16:40 +0330 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Soroush Torkzadeh --- content/docs/react-without-jsx.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index c8248e090..1170504ab 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -3,13 +3,10 @@ id: react-without-jsx title: ری‌اکت بدون JSX permalink: docs/react-without-jsx.html --- -برای استفاده از ری‌اکت شما نیاز به JSX ندارید.استفاده نکردن از JSX در ری‌اکت هنگامی راحت‌تر است که نیاز به راه اندازی یک محیط تولید(build environment) ندارید. - -هر المنت فقط کدی (syntactic sugar) است برای راحت‌تر صدا زده شدن. `React.createElement(component, props, ...children)`. - پس -هرکاری با JSX می‌توانید انجام دهید، همچنین می‌توانید با جاوا اسکریپت هم انجام دهید. +برای استفاده از ری‌اکت شما نیاز به JSX ندارید.استفاده نکردن از JSX در ری‌اکت هنگامی راحت‌تر است که نیاز به راه اندازی یک محیط تولید(build environment) ندارید. +هر المنت JSX فقط کدی (syntactic sugar) برای فراخوانی `React.createElement(component, props, ...children)` است. بنابراین هرکاری که با JSX می‌توانید انجام دهید، می شود با جاوااسکریپت ساده هم انجام داد.``` @@ -45,7 +42,7 @@ ReactDOM.render( ); ``` -اگر کنجکاو هستید که نمونه های بیشتری از چگونگی تبدیل JSX به جاوا اسکریپت ببینید، می‌توانید از [کامپایلر آنلاین بابل](babel://jsx-simple-example) استفاده کنید. +اگر کنجکاو هستید که نمونه های بیشتری از چگونگی تبدیل JSX به جاوا اسکریپت ببینید، می‌توانید از [کامپایلر آنلاین Babel](babel://jsx-simple-example) استفاده کنید. @@ -70,4 +67,3 @@ ReactDOM.render( در صورت نیاز، شما می‌توانید به انجمن‌هایی نظیر [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) و [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) که مثال‌های دیگر را در اختیارتان می‌گذارد مراجعه نمایید. -