0

مجله آموزشی

کمپین آموزشی بی لرن > مجله آموزشی > مطالب طراحی سایت > مطالب جاوا اسکریپت > React چیست؟

React چیست؟

28 آبان 1399
ارسال شده توسط
مطالب جاوا اسکریپت ، مطالب طراحی سایت
3.98k بازدید
React | بی لرن
شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم

جاوا اسکریپت دارای کتابخانه یا فریمورک های مختلفی می باشد که به کمک آن ها می توانید، کدنویسی خود را آسان و سرعت برنامه نویسی خود را بالا ببرید. یکی از این فریمورک های جاوا اسکریپت، React نام دارد و به دلیل ویژگی هایی که دارد، امکانات بسیاری را در اختیار طراحان خود قرار می دهد. برای آشنایی با کتابخانه React JS به شما پیشنهاد می دهیم مطالعه این مقاله را از دست ندهید.

React چیست؟

 

React چیست ؟ | بی لرن

 

ری‌اکت که در انگلیسی به صورت React.js یا React JS بیان می شود، یک کتابخانه یا فریمورک مربوط به زبان جاوااسکریپت می باشد که به صورت متن باز در اختیار طراحان قرار می گیرد. این کتابخانه در ساخت رابط‌ های کاربری و اجزای (Component) صفحات وب مورد استفاده قرار می گیرد. React توسط فیس‌بوک و مجموعه ای از توسعه ‌دهندگان و شرکت ‌ها تولید شده است که در سایت ‌های نت‌ فلیکس، ایمجر، بلیچر رپورت، فیدلی، ایر بی‌ان‌بی و … استفاده می شود. این کتابخانه بسیار بهینه می باشد و طراحان می توانند از آن در توسعه برنامه تک ‌صفحه ‌ای و برنامه‌ های موبایل استفاده کنند. 

 

تاریخچه React

کتابخانه React برای اولین بار در سال 2011، توسط فردی به نام Jordan Walke تولید شد و در اواخر تولید این کتابخانه برای ویژگی Newsfeed در فیس‌بوک مورد استفاده قرار گرفته شده است. نسخه اولیه (React (V0.3.0 در ماه جولای 2013 و نسخه نهایی این کتابخانه V16.8.6 در مارس 2019 منتشر شده است.

 

بنر آموزش رایگان جاوا اسکریپت | بی لرن

 

 

نحوه کار کردن React

ایجاد یک DOM مجازی در حافظه 

ری‌اکت به جای اینکه DOM مرورگر را به طور مستقیم دستکاری نماید، در حافظه یک DOM مجازی ایجاد می کند. این کتابخانه قبل از ایجاد تغییرات در DOM مرورگر، تغییرات مورد نظر خود را بر روی DOM مجازی اعمال می کند.

تغییر چیزی که نیاز به تغییر دارد 

یکی از کارهایی که این کتابخانه انجام می دهد، تغییر اطلاعاتی که نیاز به تغییر آن است می باشد. React متوجه تمام تغییرات می شود و تنها مواردی که لازم به تغییر می باشند را تغییر می دهد.

 

روش افزودن ری‌اَکت به یک صفحه HTML

 

روش افزودن ری‌اَکت | بی لرن

 

برای اینکه بتوانید کتابخانه react را به صفحه HTML خود اضافه نمایید، باید 3 کتابخانه زیر را در صفحه خود فراخوانی کنید. برای فراخوانی این 3 کتابخانه به صورت زیر عمل نمایید.

 

<!– Load React API –>

<script src= “https://unpkg.com/react@16/umd/react.production.min.js”></script>

<!– Load React DOM–>

<script src= “https://unpkg.com/react-dom@16/umd/react-dom.production.min.js”></script>

<!– Load Babel Compiler –>

<script src=”https://unpkg.com/babel-standalone@6.15.0/babel.min.js”></script>

 

پس از فراخوانی این 3 کتابخانه، کد های مورد نظر خود را به صورت زیر وارد نمایید.

<“script type=”text/babel>

 JSX Babel code goes here // 

<script/>

 

عناصر React

 

عناصر React | بی لرن

 

عناصر ری‌اَکت در اطراف عناصر HTML خاص ایجاد می شوند که توسعه دهندگان React این عناصر را به صورت عنصر ریشه (root element) یا گره ریشه (root node) دسته بندی می کنند.

<div id=”root”></div>

 

عناصر به وسیله متد ReactDOM.render() نمایش یا رندر می شوند که در مثال زیر برای شما توضیح داده شده است.

<const element = <p1>Hello React!</p1>

; ((‘ReactDOM.render(element, document.getElementById(‘root

 

به دلیل تغییر ناپذیر بودن عناصر React js، نمی توانید به طور مستقیم آنها را تغییر دهید. تنها راه تغییر عناصر، رندر کردن عنصر دیگر می باشد که در مثال زیر روش این کار مشخص شده است.

} () function tick

; (<const element = (<p1>{new Date().toLocaleTimeString()}</p1

; ((‘ReactDOM.render(element, document.getElementById(‘root

{

; (setInterval(tick, 1000

 

اجزاء تشکیل دهنده ری‌اَکت

اجزاء تشکیل دهنده React یا React component، توابع یا function مربوط به جاوااسکریپت می باشند. در مثال زیر یک React component با نام Welcome ایجاد شده است.

} () function Welcome 

; <return <p1>Hello React!</p1

{

; ((‘ReactDOM.render(</Welcome>, document.getElementById(‘root

 

کتابخانه React JS برای ایجاد component می تواند از کلاس ‌های ES6 نیز استفاده نماید. در مثال زیر با استفاده از متد رندر، یک React component با نام Welcome ایجاد شده است.

 

} class Welcome extends React.Component 

; { (<render() { return(<p1>Hello React!</p1>) 

{

; ((‘ReactDOM.render(<Welcome />, document.getElementById(‘root

 

انواع کامپوننت در ری‌اَکت

 

انواع کامپوننت | بی لرن

 

کامپوننت ها در React به 2 دسته زیر تقسیم می شوند.

کامپوننت تابعی (Functional) یا کامپوننت بی ‌حالت (Stateless)

به کامپوننتی، کامپوننت تابعی گفته می‌ شود که در خود یک تابع ساده جاوا اسکریپت داشته باشد و از props به عنوان آرگومان استفاده کند تا بتواند یک عنصر React را برگرداند. فراموش نکنید که یک عنصر ری‌اَکت، همان HTML ساده می باشد که در چارچوب ری‌اَکت، JSX نامیده می شد. دلیل نامگذاری این کامپوننت این می باشد که امکان تغییر دادن حالت متغیر در این کامپوننت وجود ندارد.

کامپوننت کلاسی یا کامپوننت با حالت (Stateful)

کامپوننت کلاسی که به آن کامپوننت با حالت نیز گفته می شود، که به عنوان یک روش با امکانات بیشتر به حساب می آید. این کامپوننت props را می ‌گیرد و حالت متغیر ها را مدیریت می کند. این کامپوننت یک تابع رندر دارد که می تواند یک عنصر React JS را مشابه کامپوننت تابعی بازگشت دهد. در صورت استفاده از این کامپوننت می توانید اپلیکیشن تعاملی پیدا و ایجاد نمایید.

 

چگونه React DOM را رندر کنیم

برای اینکه بتوانید عناصر HTML را رندر کنید (نمایش دهید)، می توانید از متد ReactDom.render() استفاده نمایید. مثال زیر، رندر کردن تگ p1 درون تک div را نمایش می دهد.

<div “id=id01”>Hello World!</div>

<“script type=”text/babel>

) ReactDOM.render

,<p1>Hello React!</p1>

; ( (‘document.getElementById(‘id01

</script>

 

Babel چیست؟

اگر به دنبال یک کامپایلر مخصوص جاوا اسکریپت هستید که به وسیله آن بتوانید زبان ‌های نشانه‌ گذاری یا برنامه ‌نویسی را به جاوا اسکریپت تبدیل نمایید، ما کامپایلر Babel را به شما معرفی می کنیم. علاوه بر این به وسیله این کامپایلر می توانید، به جدیدترین ویژگی ‌های جاوا اسکریپت دسترسی پیدا نمایید و از آن ها استفاده کنید. از Babel برای تبدیلات مختلفی مورد استفاده قرار می گیرد، یکی از این تبدیلات، تبدیل JSX به Java Script می باشد. فراموش نکنید که برای استفاده از کامپایلر Babel، خصیصه ”type=”text/babel را در تگ script بنویسید.

 

JSX چیست؟

JSX مخفف عبارت JavaScript XML می باشد. همانطور که در مثال پایین مشخص می باشد، JSX نه HTML می باشد و نه به عنوان جاوا اسکریپت به حساب می آید. JSX یک Syntax XML می باشد که در زبان جاوا اسکریپت مورد استفاده قرار می گیرد. تگ‌ های JSX نیز همانند تگ های HTML دارای نام تگ، خصیصه و فرزند می باشند.

 

<const element = <p1>Hello World!</p1>

 

Props چیست؟

Props چیست؟ | بی لرن

 

 

Props یک کلید واژه خاص می باشد که برای ارسال داده‌ ها از یک کامپوننت به کامپوننت دیگر کاربرد دارد. برای شناخت بهتر Props به مثال زیر توجه نمایید.

فایل Functional.js

‘import React from ‘react

} (function Functional(props

 ) return 

<div>

<p1>Hello {props.name}</p1>

<div/>

(

{

export default Functional

 

فایل Class.js

‘import React, { Component } from ‘react

} class Class extends Component

} ()render 

) return

<div>

<p1> Hello {this.props.name} </p1>

<div/>

(

{

{

export default Class

 

فایل App.js

; ‘import React from ‘react

; ‘import logo from ‘./logo.svg

; ‘import ‘./App.css

; ‘import Functional from ‘./components/Functional

; ‘import Class from ‘./components/Class

} () function App

) return

<div className=”App”>

</”Functional name=”Sam>

</”Class name=”Mary>

<div/>

; (

{

; export default App

 

حالت (State) و متد چیست؟

 

حالت (State) | بی لرن

 

ری‌اَکت دارای یک شیء داخلی به نام state می باشد که مقادیر مشخصه‌ های مورد استفاده در کامپوننت را در خود ذخیره می کند. زمانی که شیء state تغییر نماید، کامپوننت نیز مجددا رندر می شود. تغییر state از سمت متد ها (methods) و یک تابع به نام ()this.setState مدیریت می شود.

کامپوننت Counter.js

‘import React, { Component } from ‘react

} export class Counter extends Component 

} (constructor(props 

(super(props

} = this.state 

counter: 0

{

{

  } <= (handleClick = (event 

let state_counter = this.state.counter

state_counter = state_counter + 1

}) this.setState

counter: state_counter

{(

{

} () render

) return 

<div>

<p>{this.state.counter}</p>

<button onClick={this.handleClick}>Click Me!</button>

<div/>

(

{

{

export default Counter

 

محتوای فایل App.js

;’import React from ‘react

;’import logo from ‘./logo.svg

;’import ‘./App.css

;’import Functional from ‘./components/Functional

;’import Class from ‘./components/Class

;’import Counter from ‘./components/Counter

} () function App

) return

<“div className=”App>

</”Functional name=”Sam>

</”Class name=”Mary>

<Counter/>

<div/>

;(

{

; export default App

 

کتابخانه رابط کاربری چیست ؟

کتابخانه‌ های رابط کاربری ابزارهایی هستند که پیچیدگی ‌های تولید رابط کاربری را قابل درک و آسان می ‌کنند. علاوه بر آسان سازی کدنویسی، سرعت برنامه نویسی نیز افزایش می دهند. انواع این کتابخانه ها React، AngularJS و Vue.js نام دارند.

 

Redux چیست؟

فریمورک Redux یک کتابخانه جاواسکریپت می باشد که برای ساخت رابط کاربری اپلیکیشن‌ ها و صفحات وب مورد استفاده قرار می گیرد. این کتابخانه حالات (states) مختلف را در برنامه‌ های جاوا اسکریپت مدیریت می کند.

 

React Native چیست؟

 

React Native چیست؟ | بی لرن

 

React Native یک فریمورک UI می باشد که به صورت متن باز در اختیار طراحان قرار می گیرد. از این فریمورک برای طراحی و ساخت اپلیکیشن موبایل در سیستم عامل های اندروید، آی او اس، وب، حتی UWP، Xbox و سایر محصولات مایکروسافت مورد استفاده قرار می گیرد.

 

ویژگی های ری‌اَکت

 

ویژگی های ری‌اَکت | بی رلن

 

موارد زیر از مهمترین ویژگی های React به حساب می آیند.

JSX در React js

JSX یک جاوا اسکریپت ساده می باشد که به خوبی از HTML پشتیبانی می کند. طراحان از این دستورات HTML برای ارائه کامپوننت ها در React استفاده می کنند. علاوه بر این توضیحات، در قالب بندی نیز به جای استفاده از جاوا اسکریپت از این ویژگی استفاده می شود.

React native

React native یک یک کتابخانه عمومی ری‌اَکت می باشد که در سال ۲۰۱۵ به وسیله فیس بوک منتشر شده است. این ویژگی برای تهیه برنامه های بومی مانند IOS، اندروید و UPD مورد استفاده قرار می گیرد.

جریان اطلاعات تک خطی 

یکی از ویژگی های دیگر React، جریان اطلاعات تک خطی می باشد که به وسیله آن می تواند مجموعه ای از متغیرهای غیرقابل تغییر به عنوان مشخصه هایی در تگ های HTML خود را به ارائه دهنده کامپوننت ارائه دهد.

مدل شی سند مجازی

ری‌اَکت یک ساختار داده درون حافظه ای پنهان می سازد تا بتواند تغییرات اعمال شده را محاسبه نماید. این ویژگی تمام صفحات را به صورت فعال در انتظار تغییر نگه می دارد تا تغییرات مورد نظر رخ دهد. کتابخانه React JS تنها کامپوننت هایی را بروز رسانی می کند که به طور واقعی در آن ها تغییری ایجاد کرده است.

 

دلیل استفاده از React

دلایلی که در استفاده از ری‌اَکت وجود دارد به صورت زیر می باشند.

Simplicity (سادگی)

React بسیار ساده می باشد و به راحتی می توانید آن را درک نمایید. این موضوع باعث می شود که رویکرد مبتنی بر کامپوننت و چرخه عمر برنامه تضمین شود. دلیل سادگی React JS، استفاده از چارچوب جاوا اسکریپت می باشد که باعث می شود به راحتی بتوانید برنامه های وب و موبایل حرفه ای را طراحی نمایید و از آن پشتیبانی کنید.

یادگیری آسان(Easy to learn)

یکی دیگر از دلایل استفاده از React js، یادگیری آسان آن می باشد. شما به راحتی با داشتن دانش اولیه و پایه برنامه نویسی می توانید ری‌اَکت را یاد بگیرید و از آن استفاده کنید. به طور کلی برای یاد گیری React js، تنها به زبان های CSS و HTML نیاز دارید.

Native Approach (رویکر بومی)

یکی از قابلیت هایی که باعث استفاده از React می شود، قابلیت طراحی برنامه های موبایل می باشد. ری‌اَکت به خوبی از قابلیت استفاده مجدد کد های وسیع پشتیبانی می کند. React در یک زمان مشخص می تواند هم از برنامه های اندروید و هم برنامه IOS و وب تولید و از آن ها استفاده کند.

Data Binding (اتصال داده)

به دلیل اینکه ری‌اَکت از اتصال داده یک طرفه و معماری Flux استفاده می کند تا بتواند جریان داده را به سوی کامپوننت ها را کنترل کند. این موضوع باعث می شود که برنامه های بزرگی که در React ساخته شده اند، عمل خطایابی کامپوننت ها را به صورت خودکار انجام دهند.

Performance (کارایی)

ری اکت هیچ مفهومی از وابستگی را در خود ندارد و به راحتی می توانید از ماژول هایی همچون Browserify، Required JS،EcmaScript 6 استفاده نمایید.

Testability (تست پذیری)

یکی از موضوعاتی که باعث می شود React JS در بین طراحان محبوب شود، آسان بودن تست پذیری در این فریمورک می باشد. 

 

دلایل افزایش روزانه محبوبیت ری‌اَکت

دلایل مختلفی وجود دارند که باعث افزایش محبوبیت روزانه React js می شود. در این قسمت به معرفی این دلایل می پردازیم.

  • دسترسی به فناوری Angular
  • کدنویسی کم
  • تجزیه یچیدگی های کامپوننت ها 
  • استفاده چند باره از کامپوننت ها 
  • استفاده از JSX 
  • قابل فهم تر کردن کد ها
  • سادگی و انعطاف پذیری زیاد
  • حل مسائل مربوط به رابط کاربری

 

دلیل استفاده از React js در بیشتر مردم

دلیل استفاده از React js بسیار مختلف می باشند که باعث مورد استفاده قرار گرفتن در بیشتر مردم شده است. این دلایل به صورت زیر می باشند.

  • نوشته برنامه ها با کمک جاوا اسکریپت
  • داشتن ویژگی JSX
  • آسان و جالب بودن
  • داشتن قابلیت ایجاد و استفاده از UI به صورت همزمان
  • قرار دادن کدهای HTML در جاوا اسکریپت به صورت مستقیم
  • وجود نداشتن نگرانی در مورد کل برنامه وب یا موبایل
  • تجربه کامپوننت های ساده تر
  • استفاده از UI یا UIX های پیچیده و توسعه یافته

 

نقاط قوت و ضعف ReactJS 

 

نقاط قوت و ضعف ReactJS  | بی لرن

 

می توانیم نقاط قوت و ضعف React js را به صورت زیر بیان کنیم.

نقاط قوت

  • نوشتن کدهای HTML، درون جاوا اسکریپت
  • پیاده سازی فوق العاده قدرتمند به وسیله JSX
  • استفاده آسان و سرگرم کننده
  • ساخت و مشاهده ویژگی های مدنظر خود
  • استفاده از JSX
  • استفاده از کامپوننت ها
  • اضافه کردن آلبوم به اپلیکیشن به وسیله  State
  • ذخیره مقادیر ثابت به وسیله React js
  • تقسیم برنامه های خود به قسمت های کوچکتر
  • قابل فهم تر رابط کاربری برای شما
  • راحت تر شدن کد نویسی 
  • استفاده از ابزار vanilla در جاوا اسکریپت برای اپلیکیشن های ساده 

نقاط ضعف

  • گیج کننده بودن تنظیمات رابط کاربری

 

سخن پایانی

کتابخانه ها یا فریمورک ها مدل های مختلفی دارند که در این مقاله به کتابخانه React پرداخته می شود. برای شناخت React JS باید با موضوعاتی همچون عناصر، کامپوننت ها، کامپایلر Babel، کتابخانه‌ های رابط کاربری، فریمورک Redux، فریمورک React Native و دیگر نکات فریمورک ری‌اَکت آشنا شوید. این مقاله به طور کامل به تمام این نکات پرداخته است و به وسیله آن می توانید، از استفاده نمایید.

برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید. با توجه به مسیر یادگیری در زمینه های مختلف می توانید برای شروع طراحی سایت و برنامه نویسی از آموزش html و css بهره مند شوید.
شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم
اشتراک گذاری:
برچسب ها:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید

شغل:طراحی وب
درآمد:۱۳۰ هزار دلار سالانه
مکان:هر کشوری دوست داری
مسیر: ۷ دوره آموزشی
منتور ۲ :جلسه آنلاین با استاد
منتور ۱ : کافه گپ و گفت
بزن بریم