نوشتن اولین کامپوننت (Component) در ری اکت

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

مجدداً به برنامه hello world که در روز اول آموزش نوشتیم، مراجعه کنید. در زیر آن کدها را با اندکی تغییر مشاهده می کنید.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello world</title>
		<!-- Script tags including React -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/reactdom.min.js"></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/babel">
			var app = <h1>Hello world</h1>
			var mountComponent = document.querySelector('#app');
			ReactDOM.render(app, mountComponent);
		</script>
	</body>
</html>

بارگذاری کتابخانه ری اکت (React)

همان طور که در کدهای فوق می بینید، ابتدا سورس کد ری اکت (React) را در قالب تگ <script> و در بین تگ <head> صفحه قرار دادیم.

نکته مهم این است که حتما باید سورس ری اکت (React) را توسط تگ <script> به صفحه اضافه کنید، در غیراینصورت هنگام نوشتن برنامه ری اکت (React)، متغیرهای React و ReactDOM شناخته نمی شوند و ما نمی توانیم از آن ها استفاده کنیم.

همچنین کتابخانه babel-core را هم در بین تگ های head صفحه قرار دادیم. اما babel-core چیست؟

Babel

در جلسه قبل آموزش ما درباره ES5 و ES6 صحبت کردیم. اما همان طور که گفتیم هنوز مرورگرها به طور کامل ES6 را پشتیبانی نمی کنند. برای استفاده از ES6 باید کدهای ES6 را به کدهای ES5 کامپایل کنیم تا در همه مرورگرها به درستی اجرا شود.

Babel یک کتابخانه برای تبدیل کدهای ES6 به ES5 است.

یک تگ <script> در بین تگ Body قرار دادیم. داخل این تگ <script> اولین برنامه ری اکت (React) مان را می نویسیم. همان طور که می بینید این تگ یک type برابر text/babel دارد.

<script type="text/babel">

این کد به babel اعلام می کند که ما می خواهیم babel اجرای کدهای جاوا اسکریپتی که در داخل <script> نوشته شده را مدیریت کند. با این روش ما می توانیم توسط کدهای ES6 برنامه ری اکت (React)ی مان را ایجاد کنیم و babel به صورت آنی کدها را به ES5 تبدیل می کند تا به درستی در تمام مرورگرها اجرا شود.

مشاهده یک پیام هشدار در کنسول

هنگام استفاده از پکیج babel-standalone یک پیام هشدار را در قسمت کنسول مشاهده می کنید. این پیام هشدار طبیعی است. در آموزش های آینده به مراحل قبلی از کامپایل می پردازیم.

برنامه ری اکت (React)

اولین برنامه ری اکتی خود را در بین تگ <script> تعریف کردیم. این برنامه از یک عنصر تشکیل شده که آن <h1>Hello world</h1> است. با فراخوانی متد ReactDOM.render()، این برنامه در داخل صفحه سایت قرار می گیرد.

بدون فراخوانی ReactDOM.render() هیچ چیزی در صفحه رندر نخواهد شد. اولین آرگومان ReactDOM آن چیزی است که می خواهیم رندر کنیم و آرگومان دوم محل رندر شدن آن را مشخص می کند.

ReactDOM.render(<what>, <where>)

به این ترتیب توانستیم یک برنامه ری اکت (React) بنویسیم. متغیر app یک عنصر react است که وظیفه آن نمایش یک تگ h1 می باشد.

کامپوننت ها در ری اکت

نوشتن اولین کامپوننت ذر ری اکت (React)

در ابتدای این سری آموزشی گفتیم که کامپوننت ها قلب تمام برنامه های ری اکتی (React) هستند. بهترین راه برای درک کامپوننت های ری اکت (React)، نوشتن آن ها است. حال می خواهیم توسط کلاس های ES6 کامپوننت های مان را بنویسیم.

به کامپوننت ها app که در زیر تعریف کردیم، نگاه کنید. مانند تمام کامپوننت های دیگر ری اکت، این کلاس ES6 از کلاس React.component که در پکیج ری اکت قرار دارد، ارث بری می کند.

class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}

تمام کامپوننت های ری اکت حداقل به یک تابع render() نیاز دارند. تابع render() یک نمایشی از DOM مجازی از عنصرهای DOM مرورگر را به عنوان خروجی بر می گرداند.

در index.html کدهای جاوا اسکریپت مان را برای نوشتن کامپوننت app اضافه می کنیم.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/reactdom.
min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">
</script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
</script>
</body>
</html>

اما هیچ چیز در صفحه نمایش رندر نمی شود، دلیلش را می دانید؟ ما مشخص نکردیم که چه چیزی می خواهیم در صفحه رندر شود یا کجا باید رندر شود.

برای اینکار باید از تابع ReactDOM.render() برای مشخص کردن چیزی که می خواهیم رندر کنیم و محلی که می خواهیم آن را نمایش دهیم، استفاده می کنیم.

اضافه کردن تابع ReactDOM باعث رندر شدن برنامه در صفحه نمایش خواهد شد.

var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);

خروجی برنامه

دقت داشته باشید که می توانیم برنامه ری اکت (React) مان را با استفاده از کلاس App رندر کنیم، چون این کلاس مان از نوع کامپوننت های داخلی DOM (مانند تگ های <h1>و <div>) است.

در اینجا ما از این کلاس همانند یک عنصر مانند <App/> استفاده می کنیم.

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

حال اگر کامپوننت ری اکت را رندر کنیم، می بینید که برنامه هنوز هم حالت تعاملی ندارد. در ادامه این مجموعه آموزشی یاد می گیرید که چطور کامپوننت های ری اکت داده محور و پویایی را ایجاد و آنها را لایه بندی کنید.

تو در تو کردن کامپوننت ها اساس ساخت یک برنامه ری اکتی تحت وب است.

امیدوارم از این قسمت لذت کافی را برده باشید.

دیدگاه‌های شما (1 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

میلاد

08 فروردین 1399

سلام وقت بخیر ممنون از سایت خوب و اموزشهای خوبتون و سلام اقای ایمانی یه سوال داشتم درمورد ری اکت شما در درس روز سوم دو نمونه کد کامل کذاشتین(hello world) و من این کدهارو کامل بعضاوه تابعی که در اخر معرفی کردین و در phpstorm کپی کردم ولی خروجی نداره نتمم روشنه در ادیتور های انلاین هم امتحان کردم خروجی نداد اگر لطف کنین و راهنمایی کنین ممنون میشم