پرش به مطلب اصلی

شروع

نحوه‌ی ساخت پروژه و شروع کار با ری‌اکت

cra​

روشی هست که قدیمی شده و بسیار بسیار کند هست. ترجیح بر استفاده از vite هست چون برخی بهینه‌سازی هایی انجام داده که تبدیل به گزینه‌ی مطلوب تری میشه

npx create-react-app app-name

اگر توی دایرکتوریی که الان داخلش هستی میخوای بسازه و دایرکتوری جدید درست نکنه باید به جای app-name عبارت . بزنی

npx create-react-app .

vite​

خیلی بهینه تر از cra است.

npm create vite@latest

توضیح درباره‌ی کامنت npm create​

درکل این کامنت یک ساختار اولیه از پروژه میسازه. یعنی فایل‌های اولیه رو داخل دایرکتوری مدنظر قرار میده سپس با کامنت npm install پکیج‌های مدنظر رو نصب میکنه پس دلیل وجود فایل‌هایی مثل App.jsx و ... همین کامنت است

ساختار اولیه​

main.jsx
import React from "react";
import ReactDOM from "react-dom/client";

import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root").render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
));

  • ReactDom.createRoot : وظیفه‌ی سلکت کردن المنت اصلی را دارد و هرچی که توسط ری‌اکت رندر بشود را داخل #root میریزد

  • React.StrictMode : همونطور که از اسمش مشخصه سختگیری میکنه و وظیفش اینه که هر تغییر استیتی رو ۲ بار ران بکنه تا درصورتی که ایرادی داشته باشه، ایرادش مشخص بشه

App.jsx
import React from "react";

import "./App.css";

function App() {
    return (
        <>

        </>
    );
}

export default App;

درکل فایل App.jsx نباید شلوغ بشه و صرفا وظیفه‌ی رندر کردن باقی صفحات، هندل کردن route ها و ... را دارد

نکات نهایی​

  • eslint : مشکل کد رو بهمون میگه، برای مثال درصورتی که متغیری تعریف کرده باشی و ازش استفاده نکرده باشی، توی مرورگر بهت ارور میده و ...

  • jsx : مخفف javascript xml هست که برای نوشتن xml و html درون فایل‌های js هست

  • DOM : تمام ساختار کلی وبسایت داخل DOM هست. بدیهی هست که ساختاری مانند درخت دارد. برای مثال در ری‌اکت ریشه درخت همان html است و مرحله به مرحله عمیق میشیم توی درخت

  • Virtual DOM : یک ساختار DOM مجازی هست که ری‌اکت توسعه داده. به اینصورت هست که بسیار بهینه تر هست. ابتدا ری‌اکت تغییرات رو روی virtual dom اعمال میکنه و پس از تجمیع این تغییرات اونو با dom قبلی مقایسه میکنه (به این فرآیند diffing گفته میشود) و درصورت وجود تفاوت، تغییرات رو مستقیم روی dom اعمال میکنه

  • React Schedualing : در ری‌اکت اگر چند state پشت هم تغییر بکند ترتیب اعمال این تغییرات لزوما با توجه به اولویت زمانی آنها نیست. یعنی اگر یک state زودتر تغییر کند تغییرش لزوما زودتر اعمال نمیشود. این به این دلیل است که ری‌اکت اعمال تغییرات را بهینه کرده

  • State Batching : در ری‌اکت اگر چند state پشت هم تغییر کنند این تغییرات را در غالب ۱ رندر اجرا میکند و به ازای هر تغییر state یکبار dom را رندر نمیکند بلکه تمام تغییرات را اعمال میکند و تنها یکبار dom را رندر میکند