هدف اصلی از نوشتن این مقاله این است که مقالات و نمونه های زیادی در رابطه با MVC و AngularJS وجود دارد اما مقالات و نمونه های زیادی در رابطه با ReactJS و MVC وجود ندارد و همچنین مقاله مناسبی وجود ندارد که نمونه هایی باشد که نحوه نمایش داده ها را توضیح دهد. از پایگاه داده SQL Server به صفحه MVC با استفاده از ReactJS و WCF Rest Service. من قصد داشتم با استفاده از یک برنامه ساده موارد زیر را توضیح دهم:
در این مقاله به طور مفصل موارد زیر را مشاهده خواهیم کرد:
- اولین ReactJS را با استفاده از صفحه HTML ساده برای نمایش پیام سلام ایجاد کنید.
- ReactJS را با استفاده از صفحه HTML ساده برای نمایش داده ایجاد کنید.
- ReactJS را با استفاده از MVC و WEB API برای نمایش داده های JSON از Controller برای مشاهده ایجاد کنید.
- ReactJS را با استفاده از MVC و WCF Rest Service ایجاد کنید تا دادههای حاصل از پایگاه داده را برای اتصال در صفحه MVC با استفاده از ReactJS و WCF Rest Service نمایش دهید.
ReactJS چیست؟
ReactJS یک کتابخانه جاوا اسکریپت منبع باز است که توسط تیم فیس بوک توسعه یافته و توسط فیس بوک و اینستاگرام نگهداری می شود. ReactJS فقط View Part دارد که چیزی جز بخش UI نیست. در MVC دارای (Model View and Controller) و در ReactJS فقط قسمت View دارد. ReactJS را می توان در هنگام برخورد با داده های بزرگ که به طور مکرر تغییر می کنند استفاده کرد. فایل اسکریپت ReactJS به عنوان پسوند JSX ذخیره خواهد شد.
برای درک جزئیات بیشتر در مورد ReactJS لطفاً پیوندهای مرجع زیر را بررسی کنید.
- http://facebook.github.io/react/docs/getting-started.html
- http://reactjs.net/
- http://reactjs.net/getting-started/tutorial.html
1. ReactJS و اولین برنامه ما
- <script src="https://fb.me/react-0.13.3.js"></script>
- <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
- <div id="myName"></div>
- <script type="text/jsx">
- React.render(
- <NameDisplay />,
- document.getElementById('myName')
- );
- var NameDisplay = React.createClass({
- render: function() {
- return ( < div >
- my Name is Shanu, Welcome to ReactJS. < /div>
- );
- }
- });
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title>Welcome to ReactJs</title>
- <script src="https://fb.me/react-0.13.3.js"></script>
- <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
- </head>
- <body>
- <div id="myName"></div>
- <script type="text/jsx">
- var NameDisplay = React.createClass({ render: function() { return (
- <div>
- my Name is Shanu,Welcome to ReactJS.
- </div>
- ); } }); React.render(
- <NameDisplay />, document.getElementById('myName') );
- </script>
- </body>
- </html>
مرحله 1: پیوند ReactJS JS را برای اجرای صفحه html ReactJS ما اضافه کنید.
مرحله 2: در تگ بدنه html خود تگ div را اعلام کنید و شناسه (نام) مناسب تگ div را بدهید.
از ReactJS تمام نتایج را به این تگ div نمایش خواهیم داد.
مرحله 3: اولین اسکریپت ReactJS خود را ایجاد کنید. در اینجا نوع =" text/jsx " را اضافه می کنیم.
مرحله 4: renderComponent – در ReactJS ما میتوانیم مؤلفههای زیادی را ببینیم، در اینجا مؤلفه render برای رندر کردن نتیجه و اتصال به DOM (که تگ div ما است) است. در نمونه زیر مولفه NameDisplay را به DOM متصل می کنیم.
مرحله 5: createClass- ما می توانیم کامپوننت سفارشی خود را با استفاده از React.createClass ایجاد کنیم . در مثال زیر یک کامپوننت سفارشی NameDisplay ایجاد کرده ام . در این کامپوننت، DIV را با پیام خود به عنوان " نام من شانو است، به ReactJS خوش آمدید "
برمی گردم .
ما این کامپوننت را به DOM متصل می کنیم.
این کد منبع کامل HTML است، وقتی کد زیر را در مرورگر اجرا می کنیم خروجی زیر را مشاهده می کنیم:
کد زیر را به عنوان html ذخیره کرده و در مرورگر باز کنید: “ shanuFirstReactJS.html ”.
2. ReactJS را با استفاده از صفحه HTML ساده برای نمایش داده ها ایجاد کنید.
امیدوارم اکنون درک اولیه ای از ReactJS داشته باشید، برای اطلاعات بیشتر لطفاً به پیوندهای مرجع داده شده در بالا مراجعه کنید. حال بیایید ببینیم که چگونه یک متغیر را اعلام کنیم و داده های متغیر را در ReactJS نمایش دهیم.