ساخت یک وب اپلیکیشن با ReactJS (ری اکت جی اس)
در این مقاله با شما همراه هستیم تا یک وب اپلیکیشن ری اکت جی اس را از پایه ایجاد کنید.
نصب ( Node.js وNPM و NPX )
در این گام ٬ باید node.js را بر روی سیستم خود نصب کنید. که در مقاله گذشته توضیح داده شد اگر فراموش کرده اید می‌توانید از اینجا مطالعه فرمایید.
شاید برای شما هم پیش آمده باشد که خب تفاوت NPM و NPX در چیست؟
NPM : node package manager که از نام کامل آن هم مشخص است این که شما با NPM هر پکیجی که می‌خواهید را نصب می‌کنید مانند npm install some-package
NPX : node package exact یک ابزار برای اجرای پکیچ‌ها از این دستور استفاده می‌کنند یکی دیگر از مزیت‌های عمده npx این است که توانایی اجرای یک بسته را که قبلا نصب نشده است را اجرا می‌کنید مانند npx some-package
ساخت پروژه
پس از نصب و راه‌اندازی نود جی اس، ترمینال (CMD) را در پوشه‌ای که قصد ایجاد پروژه را دارید باز کرده و دستور زیر را وارد کنید:
npx create-react-app my-app
این را هم به شما بگویم که my-app نام پروژه شما است شما می‌توانید به جای آن هر نام دلخواهی بنویسید.
بعد از دستور بالا کافی است به پوشه ساخته شده بروید و دستور npm start را در آن پوشه اجرا کنید. این دستور برنامه Node.js ای را اجرا می‌کند.
و در مرورگر خود به صورت اتوماتیک نمایش داده می‌شود اگر نمایش داده نشد خودتان به صورت دستی آدرس http://localhost:3000/ را در مرورگر خود وارد کنید درصورت درست بود مراحل شما باید خروجی همانند شکل زیر ببینید.
و در پوشه پروژه خود باید همانند شکل زیر پوشه‌ها و فایل‌ها پروژه اضافه شده باشند.
ساخت کامپوننت
یکی از بزرگترین مزیت ری اکت این است که شما می‌توانید از کامپوننت‌ها استفاده کنید، کامپوننت‌ها شما را قادر می‌سازند تا به راحتی رابط‌های کاربری پیچیده را خرد کنید، برای مثال شما صفحه را به چند قسمت تقسیم می‌کنید بخش headet-main-footer
خب حالا یک فولد به صورت دستی به نام Componentes در پوشه SRC می‌سازیم و همه کامپوننت را در آن قرار می‌دهیم.
می‌خوای یه فروشگاه به وسعت اینترنت داشته باشی؟
ما حرفه‌ای‌ترین فروشگاه آنلاین رو برات طراحی می‌کنیم.
برای ساخت کامپونت شما می‌توانید به دو روش این کار را انجام دهید.
-
به صورت دستی
یک فایل به نام js در پوشه components بسازید.
-
با ترمینال (CMD)
برای این کار به پوشه مورد نظر رفته و دستور زیر را وارد کنید.
npm install –save-dev create-react-component-foldernpx crcf footer
footer نام کامپونتی است که من با دستور بالا ساختم شما هم می‌توانید نام کامپوننت خود را بجای footer قرار دهید و با فشردن دکمه ENTER ساختار شما به صورت زیر می‌شود.
داخل پوشه کامپوننت
داخل هر کامپوننت
استفاده از کامپوننت‌ها
import Footer from ‘./components/footer/footer’;
در کامپوننت app.js که کامپوننت اصلی می‌باشد قرار دهید در تک کامپوننت را در return() قرار دهید به شکل زیر.
import React from 'react';
import logo from './logo.svg';import './App.css';import Header from './components/header/header';
import Footer from './components/footer/footer';import Main from './components/main/main';
function App() {
return (
<div className="App">
<Header/>
<Main/>
<Footer/>
</div>
);}
export default App;
خروج پروژه تا اینجا
داخل هر کامپوننت
استایل کامپوننت
برای اضافه کردن کلاس باید از کلمه className استفاده کنید
<h1 className=”title”>HEADER</h1>
استفاده از Semantic UI React در پروژه
Semantic UI React یک کتابخانه قدرتمند است که شرکت‌های همچون Amazon – Netflix – Microsoft از آن برای پروژه‌های خود استفاده کردن این کتابخانه شامل یکسری از کامپوننت‌های ری اکت است. می‌توانید کامپوننت‌های بسیار مفیدی را در این قسمت مشاهده کنید، کتابخانه‌هایی مانند App Bars، Auto Complete، Badges, Buttons، Cards، Dialog Boxes، Icons، Menus، Sliders و موارد دیگری که در ری‌اکت می‌توانید مشاهده نمایید.
برای اضافه کردن این کتابخانه شما باید دستور زیر را در پوشه اصلی پروژه بزنید تا پکیج آن در پکیج‌های پروژه دانلود شود .
$ yarn add semantic-ui-react
$ yarn add semantic-ui-css
بعد از اضافه شدن پکیج شما می‌توانید از تمام کامپوننت‌های آماده آن در پروژه خود اسفاده کنید، برای مثال می‌خواهیم یه دکمه Semantic به پروژه اضافه کنیم برای این کار شما کد را در کامپوننت مورد نظر اضافه می کنید و در render() از آن استفاده کنید. مانند شکل زیر:
