آموزش ساخت یک برنامه وب با استفاده از React.js

React.js یک کتابخانه توسعه front-end محبوب است که برای ساخت رابط‌های کاربری تعاملی (UI) استفاده می‌شود. React.js که توسط فیس‌بوک توسعه داده شده است، توسط بسیاری از شرکت‌های بزرگ، از جمله اینستاگرام، Airbnb و واتس‌اپ، مورد استفاده قرار گرفته است. اگر به دنبال ساخت برنامه‌های وب مؤثر، سریع و واکنش‌گرا هستید، React.js ممکن است انتخاب مناسبی برای شما باشد.

پنداهولوان

قبل از شروع، مطمئن شوید که Node.js و npm (مدیریت بسته‌های Node) را روی رایانه خود نصب کرده‌اید. Node.js و npm ضروری هستند زیرا محیط و ابزارهای لازم برای توسعه برنامه‌های وب با استفاده از React.js را فراهم می‌کنند.

مرحله ۱: مقداردهی اولیه پروژه React

برای ایجاد یک برنامه React.js جدید، می‌توانیم از Create React App، ابزاری برای ایجاد برنامه که پیکربندی اولیه را به حداقل می‌رساند، استفاده کنیم. دستور زیر را در ترمینال یا خط فرمان خود اجرا کنید:

«باش
npx create-react-app my-app
سی دی من-اپ
npm شروع
""

این دستور یک دایرکتوری جدید به نام `my-app` ایجاد می‌کند، تمام وابستگی‌های لازم را دانلود و نصب می‌کند و سرور توسعه را راه‌اندازی می‌کند. اکنون می‌توانید یک مرورگر باز کنید و به `http://localhost:3000` دسترسی پیدا کنید تا برنامه پیش‌فرض React.js را ببینید.

مرحله ۲: ساختار پوشه

بیایید نگاهی به ساختار پوشه‌ای که Create React App ایجاد کرده است، بیندازیم:

""
برنامه من/
├── ماژول‌های گره/
├── عمومی/
│ └── index.html
└── src/
├── فایل CSS برنامه
├── App.js
├── App.test.js
├── فایل CSS
├── فایل index.js
└── لوگو.svg
""

– `node_modules/`: شامل تمام وابستگی‌های پروژه شما می‌شود.
– `public/`: شامل فایل‌های استاتیک، از جمله `index.html` که نقطه ورود برنامه است، می‌باشد.
– `src/`: جایی که بیشتر وقت خود را در آن خواهید گذراند. شامل کامپوننت‌های React، فایل‌های CSS و سایر فایل‌های ضروری است.

مرحله ۳: حذف فایل‌های غیرضروری

برای شروع با یک صفحه تمیز، بیایید برخی از فایل‌های غیرضروری را حذف کنیم. فایل‌های `logo.svg` و `App.test.js` را از داخل پوشه `src/` حذف کنید. سپس، فایل‌های `App.css` و `index.css` را باز کنید و تمام کدهای CSS داخل آنها را حذف کنید تا با یک فایل stylesheet تمیز شروع کنیم.

مرحله ۴: ایجاد اولین کامپوننت

React.js مبتنی بر کامپوننت است. کامپوننت‌ها بلوک‌های سازنده‌ی برنامه‌ی وب شما هستند. بیایید فایل «App.js» را تغییر دهیم تا اولین کامپوننت خود را ایجاد کنیم.

فایل `src/App.js` را باز کنید و کد زیر را جایگزین آن کنید:

"Jsx
import React از 'react';
وارد کردن './App.css';

تابع تابع () {
برگشت (

);
}

صادرات برنامه پیش فرض.
""

کد React را درون `App.js` با استفاده از JSX (JavaScript XML) مقداردهی اولیه کنید، که به ما امکان می‌دهد سینتکس شبیه HTML را درون جاوا اسکریپت بنویسیم. تغییرات خود را ذخیره کنید و نتایج را در مرورگر خود مشاهده کنید.

مرحله ۵: اضافه کردن کامپوننت‌های جدید

حالا بیایید چند کامپوننت جدید اضافه کنیم. یک پوشه جدید به نام `components` در پوشه `src` ایجاد کنید. سپس یک فایل جدید به نام `HelloWorld.js` در پوشه `components` ایجاد کنید.

"Jsx
import React از 'react';

تابع HelloWorld() {
برگشت (

);
}

صادرات پیش‌فرض HelloWorld؛
""

فایل `App.js` را باز کنید و کامپوننت `HelloWorld` را که ایجاد کردیم، وارد (import) کنید:

"Jsx
import React از 'react';
وارد کردن './App.css';
دستور HelloWorld را از './components/HelloWorld' وارد کنید؛

تابع تابع () {
برگشت (

);
}

صادرات برنامه پیش فرض.
""

حالا، `App.js` کامپوننت `HelloWorld` را در صفحه اصلی رندر می‌کند.

مرحله 6: افزودن مدیریت حالت با useState

React هوک‌های بسیار قدرتمندی برای مدیریت حالت دارد. بیایید مقداری حالت به برنامه خود اضافه کنیم. برای مثال، بیایید یک شمارنده اضافه کنیم که هر بار که روی یک دکمه کلیک می‌شود، افزایش می‌یابد.

فایل `HelloWorld.js` را باز کنید و state و قلاب `useState` را اضافه کنید:

"Jsx
ایمپورت React، {useState} از 'react';

تابع HelloWorld() {
const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(count + 1);
}

برگشت (

);
}

صادرات پیش‌فرض HelloWorld؛
""

حالت `count` با مقدار 0 مقداردهی اولیه می‌شود و هر بار که روی دکمه کلیک می‌شود، تابع `incrementCount` این مقدار را افزایش می‌دهد.

مرحله 7: اضافه کردن استایل

برای اضافه کردن استایل، می‌توانیم از CSS در فایل `App.css` استفاده کنیم یا می‌توانیم از یک کتابخانه CSS-in-JS مانند styled-components استفاده کنیم. فعلاً به CSS استاندارد بسنده می‌کنیم.

فایل `App.css` را باز کنید و کمی استایل به آن اضافه کنید:

css
.برنامه {
تراز متن: مرکز؛
}

.هدر-برنامه {
رنگ پس‌زمینه: ۲۸۲c۳۴؛
حداقل ارتفاع: 100 ولت ساعت؛
نمایش: flex؛
فلکس-جهت: ستون؛
تراز وسایل: مرکز؛
justify-content: center;
اندازه فونت: calc(10px + 2vmin);
رنگ سفید؛
}

دکمه {
بالشتک: 10px 20px.
حاشیه بالا: 20px؛
اندازه قلم: 16px؛
}
""

مرحله ۸: اضافه کردن مسیریابی با React Router

برای اضافه کردن ناوبری بین صفحات مختلف در برنامه‌مان، می‌توانیم از React Router استفاده کنیم. React Router را با اجرای دستور زیر نصب کنید:

«باش
npm نصب react-router-dom
""

سپس، دو کامپوننت جدید به نام‌های `Home.js` و `About.js` در پوشه `components` ایجاد کنید.

فایل «خانه» (Home.js):
"Jsx
import React از 'react';

تابع Home() {
برگشت (

);
}

صادرات پیش فرض صفحه اصلی;
""

«درباره.js»:
"Jsx
import React از 'react';

تابع About() {
برگشت (

);
}

صادرات پیش فرض درباره;
""

سپس، `App.js` را باز کنید و مسیریابی را تنظیم کنید:

"Jsx
import React از 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
وارد کردن './App.css';
دستور HelloWorld را از './components/HelloWorld' وارد کنید؛
وارد کردن صفحه اصلی از './components/Home';
واردات درباره از './components/About';

تابع تابع () {
برگشت (

);
}

صادرات برنامه پیش فرض.
""

با این کار، ما ناوبری اولیه بین صفحات مختلف را در برنامه خود اضافه کرده‌ایم.

بستن

این یک آموزش مقدماتی برای ایجاد یک برنامه وب با استفاده از React.js بود. ما تنظیمات پروژه، ایجاد کامپوننت، مدیریت حالت، استایل‌بندی و مسیریابی را پوشش داده‌ایم. React.js دارای یک اکوسیستم غنی با کتابخانه‌ها و ابزارهای متعدد است که می‌تواند به شما در ساخت برنامه‌های وب پیچیده‌تر کمک کند.

موفق باشید، و امیدوارم این آموزش به شما کمک کند تا سفر خود را با React.js آغاز کنید!