آموزش React در 5 دقیقه! یادگیری شروع کار با ری اکت به زبان ساده

آخرین بروزرسانی 20 تیر 1402

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

React چیست؟

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

شروع به کار و راه اندازی React

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

<html>
<head>  
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>  
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.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">  
      
    /*   
    REACT CODE HERE 
    */  
      
    </script>  
</body>  
</html>

<html>

<head>

</head>

<body>

REACT CODE HERE

</script>

</body>

</html>

در کد بالا همانطور که مشاهده میکنید، Babel هم جهت استفاده در پروژه ایمپورت شده است. از این کامپایلر برای تبدیل ساختار JSX استفاده شده توسط ری اکت به کد ساده جاوااسکریپت قابل درک برای مرورگر ها استفاده میکنیم.

دو نکته دیگر نیز در کد بالا وجود دارد که باید به آنها توجه کنید. اول اینکه div دارای شناسه root نقطه آغازین اپ ماست و اپ ما به طور کامل در این div قرار میگیرد. دوم اینکه تگ <script type=”text/babel”> قرار گرفته در body نگهدارنده کد React ما خواهد بود.

کامپوننت ها

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

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

class Hello extends React.Component {

render() {

return <h1>Hello world!</h1>;

}

بعد از این باید متد های کامپوننت را تعریف کنیم. در این مثال فقط یک متد به نام render() خواهیم داشت. در این متد شرح چیزی که میخواهیم React روی صفحه ترسیم کند را بر میگردانیم. در این مثال میخواهیم صرفا یک تگ h1 را در صفحه نمایش بدهیم که در آن نوشته شده Hello World!

برای اینکه بتوانیم محتوا را در صفحه رندر کنیم باید از ReactDOM.render() استفاده کنیم :

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

ReactDOM.render(

<Hello />,

document.getElementById("root")

);

همانطور که مشاهده میکنید در اینجا کامپوننت Hello را به نقطه آغازین اپ متصل کردیم. (<div id=”root”>)

در اینجا در واقع داریم میگوییم “ری اکت، لطفا کامپوننت Hello را در نقطه DOM با شناسه root به نمایش بگذار!” و نتیجه، چیزی مشابه تصویر زیر خواهد بود :

عبارت <Hello/> که در کد قبلی استفاده کردیم در واقع کد JSX است. این کد HTML واقعی نیست ولی آنچه نوشته اید در نهایت در DOM تبدیل به تگ های HTML قابل درک برای مرورگر شده است. مرحله بعد در این اپلیکیشن، کار کردن با اطلاعات است.

کار با داده ها

با داده ها میتوانید به دو طریق کار کنید. یکی از طریق Prop ها (خواص) و یکی از طریق state یا حالت. تفاوت اصلی بین این دو روش استفاده این است که state خصوصی است و فقط از طریق خود کامپوننت قابل تغییر است. اما props میتواند به صورت خارجی تحت کنترل قرار بگیرند. پراپ ها قابل ارسال از کامپوننت های بالاتر به صورت سلسله مراتبی هستند و اطلاعات آنها به صورت بیرونی قابل کنترل خواهد بود.

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

اجازه بدهید ابتدا به پراپ ها بپردازیم.

Prop ها در ری اکت

کامپوننت Hello که در اینجا ایجاد کردیم ایم کاملا استاتیک است. این کامپوننت به صورت ثابت، همیشه یک پیام را به نمایش میگذارد. این در حالی است که یکی از مهمترین ویژگی های React امکان استفاده مجدد از کد است. این مسئله به این مفهوم است که شما بتوانید یک کامپوننت را یک بار ایجاد کرده و سپس بتوانید از آن در محل های دیگر، برای مقاصد دیگر بهره بگیرید. مثلا بتوانید از آن برای نمایش پیام های گوناگون استفاده کنید.

برای دستیابی به هدف امکان استفاده مجدد، باید در کامپوننت خود از Props استفاده کنیم. به شیوه زیر میتوانید پراپ ها را به کامپوننت خود پاس بدهید :

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

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>;  
    }  
}

class Hello extends React.Component {

render() {

return <h1>Hello {this.props.message}!</h1>;

}

نتیجه ای که به آن دست پیدا میکنید، مشابه تصویر زیر خواهد بود :

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

حالا ما یک کامپوننت با قابلیت استفاده مجدد داریم که میتواند هر پیامی ما بخواهیم را در صفحه به نمایش بگذارد. اما مد نظر داشته باشید که اگر بخواهیم کامپوننتی داشته باشیم که بتواند اطلاعات خودش را تغییر دهد باید بجای پراپ ها از state استفاده کنیم.

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>;  
    }  
}

class Hello extends React.Component {

constructor(){

super();

this.state = {

message: "my friend (from state)!"

};

}

render() {

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

}

قبل از ست کردن state باید super() را در constructor صدا کنید. این مسئله به این دلیل است که قبل از اینکه super صدا شود، this مقدار دهی اولیه نشده.

برای تغییر 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>;  
    }  
}

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>     
  )  
}

render() {

return (

<div>

<h1>Hello {this.state.message}!</h1>

<button onClick={this.updateMessage}>Click me!</button>

</div>

)

}

اینجا یک event listener را به دکمه متصل کرده ایم که به رویداد onClick گوش میکند. وقتی این رویداد اتفاق بیفتد، متد 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>     
        )  
    }  
}

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 آشنا نمیکند اما حالا آماده هستید تا کار با ری اکت را شروع کنید و رفته رفته، بیشتر و بیشتر با امکانات آن آشنا شوید.

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

دسترسی آسان به این مطلب لینک کوتاه :

آموزش برنامه نویسی مقالات آموزشی