شاید یکی از بزرگترین مشکلاتی که در شروع به یادگیری ReactJS با آن مواجه شده باشید، این باشد که ندانید از کجا و چگونه باید محیط توسعه‌ی ReactJS را راه‌اندازی کنید. البته قبلا در توضیحات ReactJS، به نحوه‌ی فراخوانی اسکریپت React در یک صفحه‌ی HTML و نوشتن یک مثال ساده‌ی Hello World پرداختیم؛ اما از آنجایی که در آن روش، با مشکلات زیادی از جمله سختی مدیریت و نگهداری پروژه رو به رو خواهیم شد، بهتر است از روش اصولی ایجاد و ساخت پروژه‌ی ReactJS استفاده کنیم؛ ولی قبل از ادامه‌ی بحث، ابتدا وارد هرکدام از لینک‌های زیر شده و با مفاهیم مربوطه آشنا شوید:
پس با توجه به توضیحات لینک‌های بالا، باید گفت که ReactJS، کتابخانه‌ی ساخت UI در جاوا اسکریپت می‌باشد. از طرفی، NodeJS یک اجراکننده‌ی جاوا اسکریپت (موتور JS) بوده و NPM نیز ابزار مدیریت پکیج مختص NodeJS است. پس راه‌اندازی پروژه‌ی ReactJS در NodeJS، کمک زیادی در توسعه‌ی کد به ما خواهد کرد.
ایجاد پروژه در NPM
نحوه‌ی ایجاد و راه‌اندازی یک پروژه‌ی ReactJS در NPM، روش‌های مختلفی دارد؛ اما ما قصد داریم تا یک ساختار از پیش آماده شده را برای توسعه‌ی ReactJS استفاده کنیم. البته در صورت تمایل نیز می‌توان به صورت دستی اقدام به ایجاد پروژه‌ی ReactJS کرده و پکیج‌های لازم و ضروری را قدم به قدم نصب کرد؛ ولی اینکار زمان‌بر بوده و دردسرهای پیکربرندی پروژه را به همراه خواهد داشت.
بنابراین ما در اینجا، از ابزار کمکی create-react-app برای راه‌اندازی یک پروژه‌ی ReactJS استفاده می‌کنیم.
شروع به کار
1- از نصب بودن NodeJS مطمئن شوید. سپس از منوی Start ویندوز، عبارت CMD را جستجو کرده و آن را در حالت Administrator اجرا کنید.
2- دستور زیر را تایپ کرده و Enter را بزنید؛ تا ابزار create-react-app به صورت سراسری نصب شود:
(توجه داشته باشید که ما این بسته را به صورت سراسری نصب می‌کنیم تا بتوانیم همیشه از آن برای ایجاد پروژه استفاده کنیم و فعلا با دستور زیر قرار نیست هیچ پروژه‌ای از ReactJS ایجاد شود.)
|
1 |
npm install -g create-react-app |
4- صبر کنید تا عملیات نصب و دریافت بسته از اینترنت تمام شود. سپس درایوری که قصد دارید پروژه‌ی خود را در آن بسازید را به صورت زیر وارد کرده و Enter را بزنید:
|
1 |
d: |
5- حالا با دستور زیر، به مسیری که قصد داریم پروژه‌ی ReactJS را در آن بسازیم، می‌رویم:
(توجه: مسیر نوشته شده تنها یک مثال است)
|
1 |
cd D:\projects\reactjs |
6- بنابراین داخل پوشه‌ی projects و سپس reactjs، قصد داریم پروژه‌ی خود را ایجاد کنیم؛ پس از دستور زیر استفاده می‌کنیم:
(به جای sample، نام پروژه‌ی خود را بنویسید؛ این نام، یک پوشه‌ی جدید در مسیر بالا خواهد بود که فایل‌های پروژه‌ی شما در آن قرار می‌گیرند.)
|
1 2 3 |
create-react-app sample یا npx create-react-app sample |
7- کمی طول خواهد کشید؛ پس از اتمام، از آنجایی که فعلا در مسیر قدیمی قرار داریم، از دستور زیر برای رفتن به پوشه‌ی sample (پوشه‌ی پروژه) استفاده می‌کنیم:
|
1 |
cd sample |
8- حالا بیایید پروژه را استارت کرده و خروجی آن را در مرورگر مشاهده کنیم:
|
1 |
npm start |
مرورگر با آدرسی شبیه به آدرس «localhost:3000» باز شده و شما یک صفحه‌ی نمونه را مشاهده خواهید کرد. و همچنتین داخل CMD، عباراتی شبیه به زیر را خواهید دید:
On Your Network: http://192.168.1.105:3000/
اگر به شبکه وصل شده باشید، مثلا مودم وایرلس منزلتان، آدرس On Your Network برای مشاهده‌ی پروژه‌ی شما در شبکه خواهد بود که برای مثال می‌توانید با گوشی متصل به همان شبکه‌ی وایرلس (وای فای) نیز آن را مشاهده کنید.
- اگر تغییری در کدهای پروژه رخ دهد، همه چیز به صورت خودکار ذخیره می‌شود و نیازی به استارت مجدد با دستور بالا وجود نداد؛ حتی نیازی به رفرش صفحه هم نیست و به محض ذخیره‌ی فایل، تغییرات در مرورگر ظاهرمی‌شوند.
- برای توقف سرویس، Ctrl+C را در CMD فشار دهید؛ سپس Y را تایپ کرده و Enter را بزنید.
کمی درباره‌ی Create React App
بسته‌ی create-react-app، یک پیکربندی و ساختاری برای پروژه‌ی ReactJS در نظر گرفته است که در ادامه شرح می‌دهیم. این پیکربندی، شامل پوشه‌های src, public, build خواهد بود)
– فایل public/index.html: وقتی اپلیکیشن استارت شود، این اولین صفحه‌ای خواهد بود که فراخوانی می‌شود. و البته این تنها فایل HTML در کل برنامه خواهد بود! چراکه React، به طور کلی با JSX نوشته می‌شود. این فایل، شامل خط زیر می‌باشد:
|
1 |
<div id=”root”></div> |
این خط خیلی مهم است؛ چرا که تمامی کامپوننت‌های اپلیکیشن، داخل این div بارگزاری خواهند شد. در ادامه با آن بیشتر آشنا خواهید شد.
– فایل src/index.js: این فایل جاوا اسکریپت، مربوط به index.html می‌باشد و شامل کد مهم زیر است:
|
1 |
ReactDOM.render(<App />, document.getElementById('root')); |
این خط، در حال گفتن این است که که کامپوننت App، باید به عنصر HTML ای شامل آیدی root می‌باشد تزریق شود. (یا به عبارتی، کامپوننت App، بایستی در عنصر HTML ای که آیدی آن برابر root است، بارگزاری شود)؛ که همان عنصر div موجود در فایل index.html می‌باشد.
– فایل src/index.css: فایل CSS مربوط به index.js
– فایل src/App.js: فایل اسکریپت مربوط به کامپوننت App؛ که کامپوننت اصلی بوده و تمامی کامپوننت‌های دیگر را دربرخواهد گرفت.
فایل src/App.css: فایل CSS مربوط به کامپوننت App
پوشه build: در حالت ساده، وقتی از دستور npm start برای اجرای پروژه استفاده شود، در واقع نسخه‌ی development build نمایش داده می‌شود؛ که همان نسخه‌ی در حال توسعه بوده و بهینه‌شده نیست؛ مثلا فایل‌ها فشرده نشده‌اند و یا اینکه خروجی نهایی گرفته نشده است. اما برای تولید نسخه‌ی production build یا محصول نهایی، بایستی از دستور زیر استفاده شود:
|
1 |
npm run build |
با اجرای این دستور، پوشه‌ی build در مسیر پروژه ایجاد خواهد شد.
حتما می‌دانید که React را می‌توان هم با JSX و هم با جاوا اسکریپت معمولی توسعه داد؛ اما استفاده از JSX، قطعا خیلی چیزها را برای برنامه‌نویس ساده‌تر می‌کند. ولی مشکل این است که مرورگرها از JSX پشتیبانی نمی‌کنند! بنابراین باید قبل از انتشار محصول، آن را به به جاوا اسکریپت معمولی تبدیل کنیم! و این تبدیل، با دستور بالا انجام خواهد شد و فایل‌ها در پوشه‌ی build ایجاد می‌شوند.
شما برای اجرای فایل index موجود در build، نیاز خواهید داشت تا serve را نصب کرده باشید: (تنها یک بار به صورت سراسری نصب می‌شود)
|
1 |
npm install -g serve |
پس از نصب، در مسیر پروژه‌ی خود، دستور زیر را بنویسید:
|
1 |
serve -s build |
آدرس‌های مورد نیاز برای مشاهده‌ی پروژه را خواهید دید که می‌توانید آنها را در مرورگر تایپ کنید. (آدرس لوکال به صورت خودکار به کلیپبورد کپی شده است)
ایجاد کامپوننت (قطعه)
یک کامپوننت در React، یک قابلیت خاصی را انجام می‌دهد. و در واقع، یک اپلیکیشن در React، چیزی جز مجموعه‌ای از قطعات (کامپوننت‌ها = اجزاء) نیست. همچنین، هر کامپوننتی می‌تواند چندین کامپوننت زیرشاخه داشته باشد و همه‌ی آنها می‌توانند با یکدیگر در ارتباط باشند.
شما کامپوننت App را در بالا دیدید، اما اجازه دهید تا یک کامپوننت جدید در React ایجاد کنیم.
داخل پوشه‌ی src، فایلی با نام FirstComponent.js ایجاد کرده و کد زیر را به داخل آن کپی کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, {Component} from 'react'; export default class FirstComponent extends Component { constructor(props) { super(props) } render() { const element = (<div>Text from Element</div>) return (<div className="comptext"> <h3>First Component</h3> {this.props.displaytext} {element} </div>) } } |
نام کامپوننت در اینجا، FirstComponent می‌باشد؛ که به صورت یک کلاس در این فایل تعریف شده است. این کلاس، بایستی از Component موجود در React به ارث رسیده باشد؛ سپس متدی با نام render در آن تعریف خواهد شد که UI کامپوننت را تولید می‌کند.
ورودی props در متد سازنده‌ی کامپونتت‌ها، شامل تمامی پارامترهایی خواهد بود که به کامپوننت ارسال می‌شود. برای مثال، از this.props.displaytext در داخل render استفاده شده است. و همانطور که می‌بینید، متد render یک خروجی JSX برمی‌گرداند. در ادامه خواهید دید که چگونه مقدار displaytext را برای این کامپوننت ارسال می‌کنیم.
JSX
JSX در واقع ترکیب HTML و جاوا اسکریپت است؛ که قدرت زیادی به آن اضافه می‌کند. شما در متد render بالا، یک ثابت به نام element می‌بینید که به صورت زیر می‌باشد:
|
1 |
const element = (<div>Text from Element</div>) |
این کد، یک المنت div با JSX ایجاد کرده و آن را به ثابت element اختصاص می‌دهد. توجه داشته باشید که در JSX، تنها می‌توانید یک المنت اصلی ایجاد کنید و نمی‌توانید برای مثال در کد بالا، پشت div یک div دیگر بنویسید؛ ولی می‌توانید داخل آن هر چقدر که خواستید از المنت‌های بیشتری استفاده کنید. و همچنین، اگر بخواهیم در چند خط بنویسیم، بایستی آن را داخل پرانتز قرار دهیم؛ که در بالا نیازی نبود که اینکار را بکنیم.
در ادامه‌ی کد، شما دستور return را مشاهده می‌کنید که یک JSX برای آن نوشته شده و همچنین ثابت تعریف شده‌ی element و مقدار this.props.displaytext نیز در آن استفاده شده‌اند. برای استفاده از آنها نیز یک براکت باز و بسته اطرافشان قرار گرفته است. (که این همان Expression ها می‌باشد)
استفاده از کامپوننت
اجازه دهید تا از کامپوننتی که ساخته‌ایم در کامپوننت اصلی یعنی App.js استفاده کنیم. بنابراین، فایل App.js را باز کنید. کد آن به صورت زیر خواهد بود: (البته ممکن است در آپدیت‌های جدید تغییر کرده باشد)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } } export default App; |
بیایید ابتدا این فایل را ساده‌تر کنیم و مواردی که create-react-app برایمان به صورت پیشفرض قرار داده است را حذف کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> </div> ); } } export default App; |
بنابراین یک div وجود دارد که از کامپوننت render خارج می‌شود و از کلاس css ای به نام App استفاده می‌کند. توجه داشته باشید که در اینجا از ویژگی class استفاده نمی‌کنیم و از className برای اختصاص کلاس سی‌اس‌اس استفاده شده است.
حالا به صورت زیر، از کامپوننتی که ساخته‌ایم در کامپوننت App استفاده می‌کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import FirstComponent from './FirstComponent' class App extends Component { render() { return ( <div className="App"> <FirstComponent displaytext="Welcome to FuLLKade.COM"/> </div> ); } } export default App; |
ابتدا کامپوننت را در قسمت بالا import کرده‌ایم تا بتوانیم از آن استفاده کنیم؛ و سپس این کامپوننت همانند یک تگ HTML رفتار خواهد کرد و همانطور که می‌بینید، ویژگی اختصاصی displaytext آن را هم تعیین کرده‌ایم. جذاب نیست؟!
امیدوارم از این آموزش خوشتان آمده باشد. در آینده به موارد بیشتری اشاره خواهیم کرد.
نظرات ثبت شده بدون دیدگاه