یادگیری ReactJs در 5 دقیقه

1399/04/29

زمان مطالعه 8 دقیقه

اگر می‌خواهید یکی از محبوب‌ترین کتابخانه‌های جاوا اسکریپتی را در ۵ دقیقه یاد بگیرید این مقاله به شما کمک خواهد کرد.

در این آموزش قصد نداریم در مورد دلایل یادگیری ReactJs صحبت کنیم اگر فکر می‌کنید نیاز نیست ReactJs یاد بگیرید پیشنهاد می‌کنم مطلب «10 دلیل محبوبیت ReactJs» را مشاهده بفرمایید:

این آموزش به‌وسیله‌ی ساخت یک اپلیکیشن ساده ReactJs، به شما مفاهیم مقدماتی را می‌آموزد. من در این مقاله قصد دارم هر چیزی که برای شروع لازم است را بیان کنم و به جزئیات حرفه‌ای هر بخش نمی‌پردازم.

وقتی بخواهید یک اپلیکیشن ReactJs بسازید دو راه برای شما در نظر گرفته شده است:

راه اول ساختن یک فایل Html و افزودن کتابخانه ReactJs به آن
راه دوم استفاده از Create React App است که در این مقاله به آموزش آن نمی‌پردازیم.

ساده‌ترین راه ممکن همان راه اول است، پس یک فایل html می‌سازیم و کتابخانه‌های ReactJs را به آن می‌افزاییم. دو فایل جاوا اسکریپت برای ReactJs مد نظر است.

یکی خود ReactJs و دیگری ReactDOM همچنین ما فایل babel را نیز اضافه کنیم. در نهایت قطعه کد زیر را خواهیم داشت:

<html>

<head>
    <script src="https://unpkg.com//umd/react.development.js"></script>
    <script src="https://unpkg.com//umd/react-dom.development.js"></script>
    <script src="https://unpkg.com//babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">


    </script>
    
</body>

</html>

ReactJs از Syntaxای استفاده می‌کند که JSX گفته می‌شود و این Syntax برای مرورگر قابل فهم نیست. برای این که مرورگر درک کند چه چیزی نوشته ایم باید از babel استفاده کنیم.

دو نکته‌ی دیگری که باید به آن‌ها توجه کنید:

ما یک div قرار دادیم که شناسه root به خود گرفته است؛ یعنی این div جایی است که کل اپلیکیشن ما روی آن پیاده می‌شود.
داخل تگ اسکریپت که از نوع text/babel است، باید هر آنچه مربوط به کدهای ReactJs است را بنوسیم.

کامپوننت در ReactJs

در reactjs هر کلاسی یک Component است، این کامپوننت ها چیزی به‌جز یک کلاس جاوا اسکریپتی نیستند. شما به‌وسیله‌ی ارث بری از Recat.Component می‌توانید یک کامپوننت جدید بسازید مثل قطعه کد زیر:

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

در اینجا نام این کلاس را hello قرار دادیم و تا انتهای آموزش با Hello کار خواهیم کرد.

حال می‌توانیم هر تابعی که خواستیم، داخل کلاس طراحی کنیم. در این مثال ما فقط یک تابع render داریم که مقداری را بر می‌گرداند.

داخل render شما توضیح می‌دهید که react چه چیزی را روی صفحه طراحی کند. در مثال بالا ما فقط می‌خواهیم یک h1 ساده را روی صفحه با مقدار Hello World نمایش دهیم.

برای اینکه بتوانیم اپلیکیشن ساده خود را روی صفحه بیندازیم در تگ اسکریپت باید ازReactDOM.render استفاده کنیم. مثل عبارت زیر:

ReactDOM.render(
    <Hello />,
    document.getElementById("root")
);

تا اینجا ما کامپوننت hello را در قسمت اصلی اپلیکیشن خود طراحی کردیم و وقتی خروجی بگیریم چیزی شبیه به تصویر زیر را باید ببینیم.

خروحی از ReactJs

به‌طور خلاصه ما به React دستور دادیم که کامپوننت Hello را روی div که شناسه root دارد بیندازد.

Syntax ای که دیدید در قسمت <h1> و همچنین تگ </Hello> صرفاً شبیه Html است ولی ماهیت آن JSX است و به همین دلیل از babel استفاده کردیم، چون برای مرورگر قابل فهم نیست.

مرحله بعد این است که برنامه ما برای مدیریت اطلاعات آماده شود.

مدیریت داده در ReactJs

دو نوع داده در React وجود دارد یکی «props» و دیگری «state»

دانستن تفاوت بین این دو برای کسانی که تازه با ReactJs آشنا شده‌اند کمی دشوار است، پس اگر کمی شما را گیج کرده است به هیچ عنوان نگران نباشید. وقتی شما به کار با ReactJs بپردازید به‌راحتی تفاوت‌هایشان را متوجه خواهید شد.

تفاوت کلیدی بین این دو این است که state حالت خصوصی دارد و در داخل یک کامپوننت امکان تغییر آن وجود دارد.

پراپرتی ها (props) حالت خارجی دارند و به‌وسیله‌ی خود کامپوننت کنترل نمی‌شوند، این نوع داده از کامپوننت پدر به فرزندان منتقل می‌شود و برای ارسال داده از کامپوننتی به کامپوننت دیگر مناسب است.

به‌طور کلی یک کامپوننت به‌طور مستقیم می‌تواند state را تغییر دهد ولی نمی‌تواند به‌طور مستقیم props را تغییر دهد.

حال بیاید به props نگاه دقیق‌تری داشته باشیم.

پراپرتی ها در ReactJs

کامپوننت Hello ثابت است و هیچ تغییری نخواهد کرد. آن کامپوننت پیام را چاپ می‌کند و توجهی ندارد که پیام چه چیزی است.

به هر حال، بخشی بزرگی از ReactJS و ماهیتش این است که کامپوننت ها به‌دفعات مورد استفاده قرار بگیرند. به این معنی که یک بار یک کامپوننت بنویسیم و در جاهای مختلف پروژه از آن استفاده کنیم.

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

برای پیاده سازی این قضیه ما از props استفاده می‌کنیم. به شکل زیر:

ReactDOM.render(
    <Hello message="my friend" />,
    document.getElementById("root")
);

این پراپرتی که ما تعریف کردیم message نام دارد و مقدار my friend را در خود قرار داده است.

برای اینکه بتوانیم از این مقدار در کامپوننت Hello استفاده کنیم باید عبارت this.props.message را به شکل زیر بنویسیم:

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

کار با props در ReactJs

دلیل اینکه ما {this.props.message} را داخل دو براکت نوشتیم این است که به JSX بگوییم قرار است یک عبارت جاوا اسکریپتی را بنویسیم.

حالا ما کامپوننتی داریم که می‌توانیم در قسمت‌های مختلف پروژه عبارت‌های مختلف را به آن پاس دهیم و آن هم برای ما نمایش دهد.

حال اگر ما بخواهیم خود کامپوننت امکان تغییر مقدار را داشته باشد باید چه‌کار کنیم؟

باید به سراغ state برویم.

State ها در ReactJs

راه دیگر ذخیره‌ی اطلاعات در ReactJs که خیلی مهم است State است.

State قابل تغییر توسط خود component است؛ برخلاف props که به‌صورت مستقیم توسط component قابل تغییر نیست.

پس برای اینکه داده را ذخیره کنیم برای مواقعی مثل تعامل کاربر با سایت حتماً باید داخل یک state این داده ذخیره شود.

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

نحوه تعریف State در ReactJs

برای تعریف state به‌سادگی می‌توانید با نوشتن this.state داخل construtor یک کلاس داده را در آن ذخیره کنید.

در اینجا مثالی در نظر گرفته‌ایم؛ State ما یک object است که با کلید message قابل دسترسی است. به قطعه کد زیر توجه کنید:


class Hello extends React.Component {

constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}

render() {
return <h1>Hello {this.state.message}!</h1>;
}
}

چون this قبل از اینکه super تعریف شود قابل استفاده نیست؛ قبل از اینکه state را تعریف کنیم باید تابع super را صدا بزنیم.

اگر همه چیز درست استفاده شده باشد خروجی باید مثل تصویر زیر باشد:

تغییر state در reactjs

تغییر State در ReactJs

برای تغییر state شما می‌بایست this.setState را فراخوانی کنید.

ما این کار را در یک تابع جداگانه به اسم updateMessage که خودمان نوشته ایم انجام خواهیم داد. به قطعه کد زیر توجه کنید:

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }        render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

توجه: برای انجام این کار ما مجبوریم که کلمه کلیدی this را اصطلاحاً bind کنیم. به‌طور خلاصه ما به this در updateMessage دسترسی نداریم و برای این که به this دسترسی داشته باشیم حتما باید عمل bind انجام شود.

نکته: البته راه‌های دیگری برای استفاده نکردن از bind وجود دارد که من در اینجا به آن‌ها نمی‌پردازم.

مدیرت رویدادها در ReactJs

رویدادها در جاوا اسکریپت را می‌شناسید مثل: OnClick و OnMouseOver و ...

در اینجا می‌خواهیم به‌وسیله‌ی ReactJs به مدیریت رویدادها بپردازیم.

در این قسمت باید به‌وسیله‌ی تگ button یک دکمه بسازیم و رویداد onClick را مدیریت کنیم که در هنگام کلیک شدن تابع updateMessage را فراخوانی کند.

render() {
    return (
        <div>
            <h1>Hello {this.state.message}!</h1>
            <button onClick={this.updateMessage}>Click me!</button>
        </div>
    )
}

این قطعه کد تمام آن چیزی است که در کلاس Hello نوشته‌ایم:

class Hello extends React.Component {
    constructor() {
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);

    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    
    render() {
        return (
            <div>
                <h1>Hello {this.state.message}!</h1>
                <button onClick={this.updateMessage}>Click me!</button>
            </div>
        )
    }
}

پس از نوشتن عبارت بالا اگر همه چیز را درست انجام داده باشید به هنگام کلیک روی دکمه، متن پیام تغییر خواهد کرد.

تبریک می‌گوییم! اکنون درک اساسی از مهم‌ترین مفاهیم ReactJs را دارید.

اگر قصد دارید در مورد نحوه‌ مطالعه ReactJs بیشتر بدانید پیشنهاد می‌کنم مطلب بهترین روش یادگیری ReactJs چیست؟ را بخوانید.