با React.js یک کتابخانه JavaScript منعطف و جزء محور (Component-Based) است که برای ایجاد رابط های کاربری تعاملی استفاده می شود. این کتابخانه به صورت اپن سورس توسط Facebook ایجاد شده است و توسط کمپانی های بزرگی مثل Dropbox, AirBnB, PayPal, و Netflix مورد استفاده قرار گرفته است. React به توسعه دهندگان کمک می کند برنامه های بسیار سنگین را به سادگی ایجاد کنند. این همه بوسیله تغییر بخش های مورد نیاز و نه همه اجزای برنامه انجام می شود.
React در لایه View (نمایش) از الگوی طراحی نرم افزار MVC قرار دارد و به صورت خاص روی تغییر دادن DOM متمرکز شده است.از آنجا که این روزهای همه در مورد React.js صحبت می کنند ، ما به شما خواهیم گفت که چطور کار با آن را شروع کنید. با ما همراه باشید.
نصب React
نصب React هم به وسیله نرم افزار مدیریت بسته npm و هم با اضافه کردن دستی فایل های اصلی به فایل HTML امکان پذیر است. توصیه می شود React را با Buble استفاده کنید که به شما اجازه می دهد از سینتکس ECMAScript6 و JSX در کد React بهره ببرید.
اگر می خواهید React را دستی نصب کنید، مستندات رسمی توصیه می کند از این فایل HTML استفاده کنید.می توانید با فشردن دکمه های Ctrl + S این صفحه را ذخیره کنید.اسکریپت هایی که نیاز دارید (React, React DOM, Babel) در پوشه react-example_files/ دانلود می شوند. سپس این کدها را برای اضافه شدن اسکریپت های دانلود شده به بخش <head> صفحه اضافه کنید.
<script src="react-example_files/react.js"></script> <script src="react-example_files/react-dom.js"></script> <script src="react-example_files/babel.js"></script>
همچنین به جای روش بالا و دانلود فایل ها، می توانید از فایل های آنلاین روی CDN استفاده کنید:
<script src="https://unpkg.com/react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
همچنین برای بهبود سرعت لود سایت می توانید از نسخه فشرده آنها استفاده کنید:
<script src="https://unpkg.com/react@15/dist/react.min.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
اگر می خواهید React را با npm نصب کنید، بهترین راه استفاده از مخزن Create React App در گیت هاب است. مستندات رسمی نیز این راه را توصیه کرده است. جدا از خود React، از این طریق Webpack, Babel, Autoprefixer, ESLint و دیگر ابزارهای توسعه نیز نصب خواهند شد.برای شروع خط فرمان را باز کرده و دستورات زیر را وارد کنید:
npm install -g create-react-app create-react-app my-app cd my-app npm start
بعد از اتمام کار می توانید از آدرس localhost:3000 به برنامه React خود دسترسی یابید:
اگر در مورد نصب React می خواهید بیشار بدانید می توانید به راهنمای نصب React مراجعه کنید.
React و JSX
با اینکه اجباری نیست ولی شما می توانید از سینتکس یا نحو زبان JSX در برنامه React خودتان استفاده کنید.JSX مخفف JavaScript XML می باشد.بزرگترین مزیت استفاده از JSX این است که به شما اجازه می دهد فایل های HTML را در فایل های JavaScript وارد (include) کنید و بدین ترتیب تعریف عناصر React را آسان تر می کند.
موارد مهمی که در مورد JSX وجود دارند عبارتند از :
- تگ هایی که با حروف کوچک شروع می شوند، به عنوان عناصر معمولی HTML رندر می شوند
- تگ هایی که با حروف بزرگ شروع می شوند، به عنوان کمپوننت های React رندر می شوند
- هر کدی که بین آکولاد {…} نوشته شود، به عنوان JavaScript رندر می شود.
اگر می خواهید در مورد نحوه استفاده از React به همراه JSX اطلاعات بیشتری کسب کنید می توانید به این صفحه مراجعه کنید، و برای مستندات پیش فرض JSX می توانید اینجا را ببینید.
ایجاد عناصر React
همانطور که در ابتدا گفته شد React یه معماری Component-Based دارد که به توسعه دهندگان اجازه می دهد کمپوننت هایی با قابلیت استفاده چندباره برای حل مسائل مختلف ایجاد کنند. یک Component در React از یک یا چند Element درست می شود که کوچکترین واحد برنامه های React هستند.
در پایین شما می توانید یک المنت یا عنصر ساده React را که کار ساده اضافه کردن دکمه Click Me به صفحه وب را انجام می دهد،مشاهده کنید.در HTML، یک نگهدارنده <div> با آی دی myDiv ایجاد می کنیم که توسط React پر خواهد شد.ما عنصر React خود را داخل تگ <script> و درست قبل از </body> ایجاد می کنیم.دقت کنید که اگر می خواهید از روش JSX استفاده کنید باید خصیصه type="text/babel" را هم اضافه کنید تا Babel آن را تشخیص داده و کامپایل کند.
<body>
<div id="myDiv"></div>
<script type="text/babel">
ReactDOM.render(
<button>Click me</button>,
document.getElementById('myDiv')
);
</script>
</body>ما عنصر React خود را با متد ReactDOM.render() رندر کردیم که 2 پارامتر ضروری دارد، عنصر React یعنی (<button>Click me</button>) و نگهدارنده آن یعنی (document.getElementById('myDiv')) . برای اطلاعات بیشتر در مورد اینکه المنت های React چگونه کار می کنند می توانید به این مقاله سر بزنید.
ایجاد کامپونت های React
کامپوننت های React ، قابل استفاده مجدد و واحد های نمایشی مستقل هستند ک همی توانند به سادگی داده ها را بروز نمایند.یک کامپوننت می تواند از یک یا چند المنت React ایجاد شود.Props نیز ورودی هایی اختیاری هستند که می توانید از آنها برای پاس دادن داده به داخل کامپوننت استفاده کنید. یک کامپوننت React شبیه function در JavaScript عمل می کند، هر موقع فراخوانی شود خروجی مورد نظر را تولید می کند.
برای ایجاد کامپوننت React می توانید از روش معمولی function و یا سینتکس جدید ES6 استفاده کنید.در این مقاله از دومی استفاده می کنیم زیرا Babel اجازه استفاده از ECMAScript 6 را به ما می دهد. اگر شما می خواهید اطلاعات بیشتری در مورد اینکه چگونه کامپوننت ها را بدون ES6 بسازید ، کسب کنید می توانید به صفحه Components and Props page مستندات رسمی مراجعه کنید.
در پایین می توانید کامپوننت ساده ای که می خواهیم ایجاد کنیم ببینید. هدف ایجاد Notification ساده برای کاربر بعد از لاگین به سایت است.برای این 3 بخش از داده داریم که مورد به مورد تغییر خواهند کرد. اسم کاربر، تعداد پیام های کاربر، و تعداد notification های کاربر که ما اینها را به عنوان pros پاس خواهیم داد.
هر کامپوننت React یک کلاس جاوااسکریپت است که از کلاس پایه React.Component مشتق شده است. کامپوننت ما Stats نام دارد چون آمار ساده ای در مورد کاربر نشان می دهد.ابتدا یک کلاس با نام Stats بوسیله class Stats extends React.Component{…} ایجاد می کنیم، بعد با فراخواندن متد ReactDOM.render() آن را در صفحه نمایش می دهیم.
class Stats extends React.Component {
render() {
return(
<p className="summary">
Hi {this.props.name}, you have {this.props.notifications}
new notifications and {this.props.messages} new messages.
</p>
);
}
}
ReactDOM.render(
<Stats name="John Doe" notifications={5} messages={2} />,
document.getElementById("myStats")
);آرگومان اول متد ReactDOM.render() حاوی اسم کامپوننت است و props های آن (name, notifications, و messages) به همراه مقادریشان. هنگام مقداردهی برای مقادیر رشته ای از گوتیشن (مثل "John Doe") استفاده می کنیم و مقادیر عددی داخل آکولاد (مثل {3} )
فایل HTML نهایی به این صورت است :
<html> <head> <meta charset="utf-8"> <script src="vendors/react.js"></script> <script src="vendors/react-dom.js"></script> <script src="vendors/babel.js"></script> </head> <body> <div id="myStats"></div> <script type="text/babel" src="component.js"></script> </body> </html>
در این صفحه از مستندات React ، مثال های جالبی در مورد ایجاد و مدیریت کامپوننت های React وجود دارد و همچنین اطلاعات بیشتری در مورد Props!
امیدوارم استفاده کرده باشید.
ترجمه توسط فتولیا
با سلام و احترام
آیا قصد این رو ندارید که یک آموزش کامل دوره reactjs برگزار کنید؟؟
سلام دوست عزیز . فعلا نه ولی در آینده حتما این کار رو خواهیم کرد. ممنون از پیشنهاد خوبتون
سلام
سطح آموزش به نسبت پایین بود و مطالب ارائه شده لازم است پخته تر باشد
با سلام . خیلی از نظر شما ممنونم.البته سطح این مطلب مقدماتی است ولی حتما سعی می کنیم طبق گفته شما عمل کنیم .
ارادتمندم
سلام
عالی بود
ممنونم
سلام ، خیلی عالی بود
ممنون از این آموزش مفیدتون .