آموزش reactJS

Share on facebook
Share on google
Share on twitter
Share on linkedin

به آموزش  reactJS  (ری اکت) قسمت اول خوش آمدید

reactJS یک فریم ورک جاوا اسکریپت می باشد که توسط فیس بوک ساخته شده است . این فریم ورک از برترین فریم ورکهای جهان می باشد که دارای مزایای زیر می باشد.

  1. بسیار سریع : برنامه هایی که با این فریم ورک ساخته می شوند بسیار سریع هستند زیرا reactJS بسیار بهینه ساخته شده است.
  2. بسیار ماژولار : در صورتی که شما بسیار برنامه ای بزرگ دارید شما می توانید با reactJS به قطعات کوچکتر تبدیل کنید .
  3. هماهنگ با داده های بزرگ : reactJS بسیار مناسب برای برناه هایی با داده های بالا است .
  4. انعطاف بالا : با reactJS هرکاری که شما فکر کنید می توان انجام داد .
  5. شهرت : وقتی شما تسلط بر این فریم ورک داشته باشید طبیعتا شرایط شما برای یافتن کار مناسب بسیار عالی می باشد .

لازم به ذکر است برای شروع نیاز است شما به زبان برنامه نویسی جاوا اسکریپت  مسلط باشید همچنین می بایست جاوا اسکریپت اکما اسکریپت ۶ را مسلط با شید که ما با استفاده از بابل آن را به نسخه های رایج مرور گرها تبدیل می کنیم . در لینکهای زیر شامل برترین منابع یادگیری جاوا اسکریپت است :

https://www.codecademy.com/learn/javascript

https://www.w3schools.com/js/default.asp

شروع آموزش reactJS

به کد زیر توجه نمایید :

var h1 = <h1>Hello world</h1>;

 

در حالت عادی جاوا اسکریپت به این کد خطا می گیرد :

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
به این ساختار JSX می گویند در ادامه به این مبحث به طور کامل می پردازیم.

JSX

JSX یک المنت است که تعریف می شود و می توان هر مقدار دلخواهی را درون آن قرار داد  مانند اعداد ، رشته ، HTML  ، شی ، آرایه و …

پیشنهاد پیرو برای شما :   کد جاوا اسکریپت (نمایش تصویر بعد از بارگزاری)

در واقع شما با jsx می توانید یک متغیر تعریف کنید و آن متغیر را به یک المنت html تبدیل کنید و در مواقع لزوم از آن استفاده کنید .

var navBar = <nav>I am a nav bar</nav>;

 

ذخیره شدن المنتهای HTML در JSX

var Pistons2004 = {
  center:        <li>Ben Wallace</li>,
  powerForward:  <li>Rasheed Wallace</li>,
  smallForward:  <li>Tayshaun Prince</li>,
  shootingGuard: <li>Richard Hamilton</li>,
  pointGuard:    <li>Chauncey Billups</li>
};

 

المنتهای jsx می نوانند دارای ویژگی باشند همانند html

و همانند html هم مقدار دهی می شوند .

<a href="http://www.yahoo.com">Welcome to the Yahoo</a>; 
var title = <h1 id="title">Introduction to React.js: Part I</h1>;

همچنین می توانند تو در تو باشند و برای خوانایی بیشتر از فاصله ها یا رفتن به خط بعد استفاده کرد.

<a href="https://www.google.net"> <h1> Click me I am Goooogle </h1> </a>

 

ولی توجه کنید برای رفتن به خط بعد حتما باید کد ما در پرانتز قرار بگیرد:

var theGoogle = (
   <a href="https://www.google.net">
     <h1>
       Click me I am Gooooooooooogle
     </h1>
   </a>
 );

نکته مهم : شما فقط می توانید یک المنت پایه داشته باشید :

var paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

در حالی که مثال زیر خطا می دهد :(به دلیل اینکه  تگهای p دارای ریشه نمی باشند )

var paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

برای رفع خطا بهتر است المتهایمان را درون یک <div> بگزاریم.(هر متغیر فقط می تواند یک تگ ریشه داشته باشد)

var blog = ( <div> <img src="pics/192940u73.jpg" /> 
<h1> Welcome to Dan's Blog! </h1> 
<article> Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out. </article> </div> );

رندر کردن reactJS

حالا که به ساختار آن اشنا شدید بهتر است نحوه استفاده از react رایاد بگیرید .

var React = require('react'); 
var ReactDOM = require('react-dom'); 
// Copy code here: 
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

 

پیشنهاد پیرو برای شما :   آموزش ساخت تب در اندروید

خروجی : Hello world

نگران نباشید الان به طور کامل براتون این مورد را شرح می دهیم:

در خط اول و دوم کتابخانه reactJS را فراخوانی کردیم.

ReactDOM چیست ؟

یک کتابخانه جاوا اسکریپت است که ویژگی های ری اکت را در خود جا داده است . البته در ادامه با این مفهوم به طور کامل آشنا می شویم ولی الان برمیگردیم به فایلمان همان گونه که می بینید تکه کد زیر خروجی مناسب می دهد :

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

 

ReactDOM.render تابعی است که نوع jsx را خروجی می دهد به المنت دوم تابع در واقع این تابع دو آرگومان ورودی دارد :

ارگومان اول متغیر jsx را دریافت و در المنت دوم چاپ می کند .

توجه : شما می بایست در فایل html خود المنتی با ایدی app داشته باشید

  <main id=”app”></main>

بارگزاری متغیر reactJs

var React = require('react');
var ReactDOM = require('react-dom');

// Write code here:
var myList=(<ul>
    <li>info@piero.ir</li>
    <li>www.piero.ir </li>
    </ul>
    );
ReactDOM.render(myList,document.getElementById("app"));

خروچی :

  • info@piero.ir
  • www.piero.ir

همانگونه که دیدید متغیری تعریف نمودیم و در آن لیستی قرار دادیم و بعد آن را چاپ نمودیم.

نکته پایانی:

چون از المنت استفاده می کنیم درصورتی که یک کد دوبار نوشته شود دفعه دوم هیچ کاری انجام نمیدهد :

var hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:

ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:

ReactDOM.render(hello, document.getElementById('app'));

لطفا با ارایه نظرتتان مارا در بهبود مطالب وب سایت یاری نمایید با تشکر

با تشکر پیروز جنابی

مدیر پیرو

مدیر پیرو

نظرتان را بیان نمایید

عضویت در خبر نامه