چطور React.js را در ۵ دقیقه یاد بگیریم؟ :: طراحی سایت

چطور React.js را در ۵ دقیقه یاد بگیریم؟

پنجشنبه, ۲۷ تیر ۱۳۹۸، ۰۴:۵۶ ب.ظ

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

reactjs

راه اندازی(setup)

زمانی که با React.js شروع به کار می کنید باید از ساده‌ترین راه‌اندازی ممکن استفاده کنید: یک فایل HTML ساده که از کتابخانه های React و ReactDOM با استفاده از تگ های script استفاده میکند، مانند مثال زیر :

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

ما همچنین Babel را نیز به صفحه اضافه کرده ایم، زیرا React از چیزی به نام JSX برای نوشتن markup استفاده می‌کند. نیاز داریم این JSX را به کد ساده ی جاوا اسکریپت تبدیل کنیم تا در این صورت مرورگر بتواند آن را درک کند.

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

تگ <div> به همراه مشخصه Id که با مقدارroot# تنظیم شده است. این قسمت نقطه ورود به برنامه ماست. اینجا دقیقا مکانی است که اپلیکیشن ما شروع به کار می کند.
تگ <script type="text/babel"> در بدنه برنامه استفاده شده است. اینجا مکانی ست که قرار است کد های React.js را بنویسیم.

کامپوننت ها

هر چیزی در React.js یک کامپوننت است و اینها معمولا به شکل کلاس هایی از جاوا اسکریپت نمایش داده میشوند. میتوانید یک کامپوننت را با extend کردن از کلاس React-Component ایجاد کنید. اجازه بدهید کامپوننت ساده ایی به نام Hello را ایجاد کنیم :

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

شما سپس باید متدهایی را برای این کامپوننت تعریف کنید. در مثال ما تنها یک متد داریم که ()render نامیده شده است. داخل متد ()render توضیحی را که می خواهید بر روی صفحه نمایش نشان داده شود، قرار می‌دهید. در نمونه مثال بالا میخواهیم یک تگ h1 با متن Hello world! در صفحه نمایان شود.

به منظور اینکه اپلیکیشن ساده ما عنصر مورد نظر را بر روی صفحه نمایش رندر کند، باید از ()ReactDOM.render استفاده کنید :

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

بنابراین در اینجا کامپوننت Hello را به نقطه ورود برنامه خود یعنی <div id="root"></div> متصل می کنیم. نتیجه چنین کاری در شکل زیر نشان داده شده است :

react

قاعده نوشتاری شبیه به HTML ایی(<h1> و <Hello/>) که دیدید کد JSX نام دارد که قبلا در موردش صحبت کردیم.این کد در واقع html نیست اما هرچه در این قسمت بنویسید در نهایت به کدهای html در صفحه رندر خواهد شد. قدم بعدی که باید به آن بپردازیم مدیریت داده هاست.

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

دو نوع داده در React وجود دارد : props و state. شناخت تفاوت این دو نیاز به توضیح دارد و شاید درک آن در ابتدا کمی سخت باشد. بنابراین اگر این بحث کمی گیج کننده بود نگران نباشید. خود من وقتی شروع به کار با آنها کردم تازه درک آنها برایم ساده تر شد.

اما تفاوت کلیدی این است که state خصوصی است و تنها داخل خود کامپوننت قابل تغییر است. Prop ها external و عمومی هستند و تنها به وسیله کامپوننت ها کنترل نمی شود و از نظر سلسله مراتب بالاتر از کامپوننت ها قرار دارند. یک کامپوننت می‌تواند state داخلی خود را به طور مستقیم تغییر دهد اما نمی تواند به طور مستقیم prop مربوط به خود را تغییر دهد.

ابتدا اجازه دهید نگاه دقیق‌تری به prop ها بیندازیم.

Props

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

برای رسیدن به این نوع از استفاده مجدد باید prop ها را به سمت یک کامپوننت ارسال کنید :

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

نام prop به کار برده شده در مثال بالا message است که دارای مقدار “my friend” است. ما می‌توانیم به این prop در کامپوننت Hello با ارجاع به this.props.message به شکل زیر دسترسی داشته باشیم :

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

در نتیجه چیزی که در خروجی نمایش داده می شود به شکل زیر است :

react

دلیلی که ما از عبارت {this.props.message} به همراه {} استفاده می‌کنیم این است که نیاز است به JSX بگوییم می خواهیم یک عبارت جاوااسکریپتی را اضافه کنیم که escaping نامیده می‌شود. اکنون کامپوننتی با قابلیت استفاده مجدد داریم که می تواند هر پیغامی را که بخواهیم بر روی صفحه نمایش نشان دهد. با این حال اگر بخواهیم کامپوننت بتواند داده خود را تغییر دهد چه کاری میتوانیم انجام دهیم؟ در اینجا می توانیم از stateها استفاده کنیم.

State

روشی دیگر برای ذخیره سازی داده ها در فریمورک React استفاده از state های کامپوننت هاست. برخلاف prop ها که نمی توانند مستقیماً توسط کامپوننتها تغییر کنند، stateها می توانند به سادگی تغییر کنند. بنابراین اگر بخواهید داده ها در برنامه شما تغییر کنند - برای مثال بر اساس تعاملات کاربر - باید داده ها را داخل state ذخیره کنید.

مقدار دهی state

برای تنظیم state به سادگی this.state را داخل متد ()constructor از کلاس مقدار دهی کنید. در مورد مثال ما state یک شی است که دارای یک کلیدی به نام message است :

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

قبل از مقدار دهی state باید متد ()super را در سازنده فراخوانی کنید و این کار به خاطر کلمه this انجام می‌شود که قبل از ()super استفاده نشده است.

ویرایش state

برای ویرایش state به سادگی میتوانید ()this.setState را فراخوانی کنید و state جدید را به عنوان آرگومان برای آن ارسال کنید. ما این کار را داخل متدی که 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 را به متد updateMessage بایند کرده‌ایم. در غیر این صورت نمی توانیم به this در این متد دسترسی داشته باشیم.

قدم بعدی ساخت یک دکمه است که باید بر روی آن کلیک شود و در این صورت متد ()updateMessage را فراخوانی می کنیم. بنابراین بیایید دکمه ای را به تابع ()render خود اضافه کنیم :

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

در اینجا ما یک event listener را به یک دکمه متصل کرده‌ایم و در این صورت وقتی رویداد کلیک رخ می‌دهد، متد 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 (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}

متد ()updateMessage عبارت ()this.setState را فراخوانی می کند که مقدار this.state.message را تغییر می‌دهد. وقتی روی دکمه کلیک می کنید چیزی که نشان داده میشود به صورت زیر است :

react