آموزش جامع React.js و Node.js

راهنمای کامل توسعه برنامه‌های Full-Stack از صفر تا صد

مقدمه

این آموزش شما را با دنیای توسعه Full-Stack با استفاده از دو فناوری قدرتمند و محبوب، یعنی React.js برای فرانت‌اند (رابط کاربری) و Node.js برای بک‌اند (سمت سرور) آشنا می‌کند. این مسیر یادگیری به صورت گام‌به‌گام طراحی شده تا هم برای مبتدیان و هم برای توسعه‌دهندگان باتجربه مفید باشد.

React.js یک کتابخانه جاوااسکریپت برای ساخت رابط‌های کاربری پویا و کارآمد است، در حالی که Node.js یک محیط اجرایی سمت سرور است که به شما امکان می‌دهد با استفاده از جاوااسکریپت، سرورها و APIهای قدرتمند بسازید. در این آموزش، یاد می‌گیرید چگونه این دو فناوری را به هم متصل کرده و یک پروژه کامل راه‌اندازی کنید.

آموزش React.js

React.js که توسط فیسبوک توسعه یافته، به شما کمک می‌کند تا با رویکرد Component-Based، رابط‌های کاربری ماژولار و قابل استفاده مجدد بسازید. این بخش شامل تمامی مفاهیم از نصب تا بهینه‌سازی است.

۱. راه‌اندازی محیط توسعه

برای شروع، ابتدا باید Node.js و npm (مدیریت بسته Node.js) را نصب کنید.

نصب Node.js:
- از وب‌سایت رسمی Node.js، نسخه LTS (Long-Term Support) را دانلود و نصب کنید.
- پس از نصب، در ترمینال یا Command Prompt، نسخه‌ها را بررسی کنید:
```
node -v
npm -v
```
ایجاد پروژه React:
از ابزار Vite استفاده می‌کنیم که سریع‌تر و کارآمدتر از create-react-app است:
```
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
```
این دستورات یک پروژه React با Vite ایجاد کرده و سرور توسعه را در http://localhost:5173 اجرا می‌کنند.

ساختار پروژه:

my-react-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   ├── favicon.ico
  │   └── vite.svg
  ├── src/
  │   ├── App.jsx
  │   ├── App.css
  │   ├── main.jsx
  │   └── index.css
  ├── package.json
  └── vite.config.js

فایل main.jsx نقطه ورود برنامه و App.jsx کامپوننت اصلی است.

۲. مفاهیم کلیدی React

کامپوننت‌ها (Components):

هر بخش از رابط کاربری یک کامپوننت است. امروزه بیشتر از کامپوننت‌های تابعی استفاده می‌شود.

مثال یک کامپوننت تابعی ساده:


import React from 'react';

function Greeting({ name }) {
  return <h1>سلام، {name}!</h1>;
}

export default Greeting;

برای استفاده در App.jsx:


import Greeting from './components/Greeting';

function App() {
  return <Greeting name="کاربر" />;
}

export default App;

JSX:
سینتکس شبیه HTML که در جاوااسکریپت نوشته می‌شود.
```
const element = <h1>آموزش JSX</h1>;
```

State و Props:

Props: داده‌های ورودی به یک کامپوننت که فقط خواندنی هستند.

State: داده‌های داخلی که با useState مدیریت می‌شوند.

مثال useState:


import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>تعداد: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش</button>
    </div>
  );
}

export default Counter;

۳. هوک‌ها (Hooks)

هوک‌ها به کامپوننت‌های تابعی امکان مدیریت state و چرخه حیات را می‌دهند.

useState: برای مدیریت state (مثال بالا).

useEffect: برای مدیریت side effects.

مثال fetch کردن داده:


import React, { useState, useEffect } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .then(response => response.json())
      .then(data => setPosts(data))
      .catch(error => console.error('Error fetching posts:', error));
  }, []);

  return (
    <div>
      <h3>پنج پست اخیر</h3>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

useContext: برای دسترسی به داده‌های Context.

۴. مفاهیم پیشرفته React

در این مرحله، به تکنیک‌های پیشرفته برای پروژه‌های پیچیده‌تر می‌پردازیم:

مدیریت حالت با Context API:

برای مدیریت حالت در اپلیکیشن‌های بزرگ، از Context API استفاده کنید.


import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemeComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff', padding: '1rem' }}>
      <p>تم فعلی: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        تغییر تم
      </button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeComponent />
    </ThemeProvider>
  );
}

export default App;

بهینه‌سازی عملکرد:

Lazy Loading: برای کاهش زمان بارگذاری.

مثال:


import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>در حال بارگذاری...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Memoization: از React.memo و useMemo برای جلوگیری از رندر غیرضروری.

مثال:


import React, { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const computedValue = useMemo(() => {
    return data.reduce((sum, num) => sum + num, 0);
  }, [data]);

  return <p>جمع: {computedValue}</p>;
}

export default React.memo(ExpensiveComponent);

تست: از Jest و React Testing Library برای تست.

مثال:


import { render, screen } from '@testing-library/react';
import Greeting from './Greeting';

test('renders greeting message', () => {
  render(<Greeting name="کاربر" />);
  const element = screen.getByText(/سلام، کاربر!/i);
  expect(element).toBeInTheDocument();
});

۵. نکات حرفه‌ای React

TypeScript: برای تایپ‌دهی دقیق‌تر.
Server-Side Rendering (SSR): با Next.js برای بهبود SEO.
ابزارهای توسعه: از Webpack، Babel، و ESLint برای بهینه‌سازی.

آموزش Node.js

Node.js یک محیط اجرایی سمت سرور است که امکان اجرای جاوااسکریپت را خارج از مرورگر فراهم می‌کند.

۱. راه‌اندازی محیط و ساخت اولین سرور

نصب Node.js:
- از Node.js نسخه LTS را نصب کنید.
- بررسی نسخه:
```
node -v
npm -v
```

ایجاد پروژه:

mkdir my-node-app
cd my-node-app
npm init -y

سرور ساده:

مثال:


const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });
  res.end('سلام، Node.js!');
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

با دستور node index.js سرور را اجرا کنید.

۲. ساخت API با Express.js

نصب Express:
```
npm install express
```

API ساده:

مثال:


const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json());

app.get('/', (req, res) => {
  res.send('خوش آمدید به API!');
});

app.get('/api/users', (req, res) => {
  const users = [
    { id: 1, name: 'کاربر ۱' },
    { id: 2, name: 'کاربر ۲' },
  ];
  res.json(users);
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

۳. اتصال به پایگاه داده (MongoDB)

نصب Mongoose:
```
npm install mongoose
```

اتصال و ذخیره داده:

مثال:


const express = require('express');
const mongoose = require('mongoose');
const app = express();
const PORT = 3000;

app.use(express.json());

mongoose.connect('mongodb://localhost/myapp', {
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('اتصال به MongoDB برقرار شد'))
  .catch(err => console.error('خطا در اتصال:', err));

const userSchema = new mongoose.Schema({
  name: String,
  email: String,
});

const User = mongoose.model('User', userSchema);

app.post('/api/users', async (req, res) => {
  const user = new User(req.body);
  await user.save();
  res.status(201).json(user);
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

۴. مفاهیم پیشرفته Node.js

در این مرحله، به تکنیک‌های پیشرفته برای توسعه APIهای حرفه‌ای می‌پردازیم:

احراز هویت با JWT:

برای احراز هویت کاربران از JSON Web Tokens استفاده می‌کنیم.


const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const PORT = 3000;

app.use(express.json());

const SECRET_KEY = 'your_super_secret_key';

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });
  res.json({ token });
});

app.get('/api/protected', (req, res) => {
  const token = req.headers['authorization'];
  if (!token) return res.status(401).send('دسترسی غیرمجاز');

  jwt.verify(token, SECRET_KEY, (err, decoded) => {
    if (err) return res.status(403).send('توکن نامعتبر');
    res.json({ message: 'دسترسی مجاز', user: decoded });
  });
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

مدیریت خطا:

مثال:


const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json());

app.get('/api/error', (req, res, next) => {
  try {
    throw new Error('خطای نمونه!');
  } catch (err) {
    next(err);
  }
});

app.use((err, req, res, next) => {
  res.status(500).json({ error: err.message });
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

امنیت API:

از helmet برای افزودن لایه‌های امنیتی استفاده کنید:


const express = require('express');
const helmet = require('helmet');
const app = express();
const PORT = 3000;

app.use(helmet());
app.use(express.json());

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

۵. نکات حرفه‌ای Node.js

تست:

از Supertest برای تست APIها استفاده کنید:


const request = require('supertest');
const express = require('express');
const app = express();

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'کاربر ۱' }]);
});

describe('GET /api/users', () => {
  it('should return users', async () => {
    const res = await request(app).get('/api/users');
    expect(res.status).toBe(200);
    expect(res.body).toHaveLength(1);
    expect(res.body[0].name).toBe('کاربر ۱');
  });
});

بهینه‌سازی:

از clustering برای مقیاس‌پذیری:


const cluster = require('cluster');
const express = require('express');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  console.log(`Master ${process.pid} is running`);

  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }

  cluster.on('exit', (worker) => {
    console.log(`Worker ${worker.process.pid} died`);
  });
} else {
  const app = express();

  app.get('/', (req, res) => {
    res.send(`Hello from worker ${process.pid}`);
  });

  app.listen(3000, () => {
    console.log(`Worker ${process.pid} started`);
  });
}

اتصال React و Node.js (Full-Stack)

در این بخش، یاد می‌گیرید چگونه فرانت‌اند (React) و بک‌اند (Node.js) را به یکدیگر متصل کنید.

۱. فعال‌سازی CORS در Node.js

نصب cors:
```
npm install cors
```

فعال‌سازی CORS:

مثال:


const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

۲. برقراری ارتباط با API در React

مثال:


import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('http://localhost:3000/api/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h3>لیست کاربران</h3>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

مباحث پیشرفته و امنیتی

امنیت در توسعه برنامه‌های وب حیاتی است. این بخش به شما کمک می‌کند تا برنامه‌های ایمن‌تری بسازید.

۱. احراز هویت با JWT

نصب jsonwebtoken و bcryptjs:
```
npm install jsonwebtoken bcryptjs
```

احراز هویت:

مثال:


const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const app = express();
const PORT = 3000;

app.use(express.json());

const SECRET_KEY = 'your_super_secret_key';

app.post('/api/register', async (req, res) => {
  const { username, password } = req.body;
  const hashedPassword = await bcrypt.hash(password, 10);
  res.status(201).send('کاربر ثبت شد');
});

app.post('/api/login', async (req, res) => {
  const { username, password } = req.body;
  const isMatch = await bcrypt.compare(password, 'hashedPasswordFromDB');
  if (!isMatch) return res.status(401).send('نام کاربری یا رمز عبور اشتباه است');

  const token = jwt.sign({ username }, SECRET_KEY, { expiresIn: '1h' });
  res.json({ token });
});

const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (!token) return res.status(401).send('دسترسی غیرمجاز');

  jwt.verify(token, SECRET_KEY, (err, user) => {
    if (err) return res.status(403).send('توکن نامعتبر');
    req.user = user;
    next();
  });
};

app.get('/api/protected', authenticateToken, (req, res) => {
  res.json({ message: 'دسترسی مجاز', user: req.user });
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

۲. امنیت API و جلوگیری از حملات

حملات Injection: از ORMها مانند Mongoose یا Sequelize استفاده کنید.

XSS و CSRF: از helmet و csurf استفاده کنید.

مثال:


const express = require('express');
const helmet = require('helmet');
const csurf = require('csurf');
const cookieParser = require('cookie-parser');
const app = express();
const PORT = 3000;

app.use(helmet());
app.use(cookieParser());
app.use(csurf({ cookie: true }));
app.use(express.json());

app.get('/api/form', (req, res) => {
  res.json({ csrfToken: req.csrfToken() });
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

استقرار (Deployment)

پس از توسعه، باید برنامه خود را روی سرور مستقر کنید.

Docker:

مثال Dockerfile برای Node.js:


FROM node:16

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

پلتفرم‌های ابری: از Heroku، AWS، یا Vercel برای استقرار استفاده کنید.
مثال استقرار در Vercel (برای React):
```
vercel --prod
```