اموزش مبانی ریکت در ۵ دقیقه

ریکت در ۵ دقیقه: نگاهی اجمالی به ریکت

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

نصب

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

<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">  

/*   
ADD REACT CODE HERE 
*/  

</script>  
</body>  
</html>

همچنین ما کتابخانه ای (library) به اسم ‌Babel را هم import کردیم. از آنجایی که ریکت چیزی به اسم JSX استفاده میکند ما نیاز داریم که JSX را به‌ جاواسکریپت تبدیل کنیم، تا مرورگر بتواند آن را بفهمد.

دو تا چیزی که نیاز به توجه دارند:

‍‍۱- <div> با id به اسم #root، اینجا جایی هست که اپلیکیشن ما شروع میشود.

۲-تگ <script type=”text/babel”> جایی هست که ما کد ریکت را مینویسیم.

Components

هر چیزی در ریکت یک Component حساب می‌شود و Component ها در‌واقع یک فورم از کلاس‌های جاواسکریپت هستند، شما میتوانید یک Component بسازید باextend کردن از کلاس React-Component، پس بیایید یک کلاس به اسم Hello بسازیم

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

شما متود(method) هایی را برای Component تعریف میکنید که یکی از این متود ها render() نام دارد.

درون render() شما توضیحی از چیزی که میخواهید ریکت در صفحه نمایش دهد را برمیگردانید(return).

در این کیس ما میخواهیم تگ h1 را که حاوی hello world هست را نمایش دهیم.

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

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

اینجا جایی است که ما کامپوننت Hello را به‌ ای دی root در صفحه متصل میکنیم‌ (<div id="root"></div>)

بنابراین ما به سادگی میگوییم که:‌ریکت لطفاً کامپوننت Hello را درون ای دی root به نمایش در بیاور

و نتیجه به صورت زیر است.

آن سینتکس اچ تی ام ال که درون کامپوننت Hello بود در‌واقع اچ تی ام ال نبود بلکه کد JSX بود که بسیار کار آمد تر است.

قدم بعدی پردازش داده هاست

Handling Data یا پردازش داده‌ها

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

کلید تفاوت آن است که state کاملاً private هست و از درون کامپوننت تغییر داده میشود. Props ها خارجی اند(external) و بوسیله کامپوننت کنترل نمیشوند.

یک Component میتواند state های داخلی خود را تغییر دهد اما props ها را نمیتواند تغییر دهد.

Props

کامپوننت Hello ما کاملاً static هست و یک پیام را ارائه (render) میکند. اگرچه قسمت بزرگی از ریکت reusable هست یعنی دارای توانایی استفاده مجدد از آن. نوشتن یک کامپوننت برای یک بار و استفاده کردن آن در جاهای مختلف. برای مثال نمایش پیام‌های متفاوت.

برای اینکه ما به این نوع reusable برسیم، کافیست props را اضافه کنیم. به این‌گونه props را به کامپوننت اضافه میکنیم.

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

نتیجه آن به این صورت خواهد بود

دلیلی که ما {this.props.message} را با کرلی برکت مینویسیم آن است که ما نیاز داریم که به JSX بگوییم که ما میخواهیم جاواسکریپت را به آن اضافه کنیم، به این کار escaping میگویند.

حالا ما کامپوننتی داریم که قابل استفاده مجدد هست یا به اصطلاح دیگر reusable هست، که هرجا از صفحه که میخواهیم میتوانیم آن را استفاده کنیم.

State

راه دیگر ذخیره داده در ریکت استفاده از state هست. برخلاف prop که از درون component تغییر داده نمیشود state ها این قابلیت را دارند. اگر شما میخواهید که داده شما در اپلیکشنتان قابل تغییر باشد، باید جایی در state ها ذخیره شود.

مقدار دهی state

Initializing state

برای مقدار دهی اولیه اولیه state ها کافیست this.state را در constructor() قرار بدهیم. State ما در اینجا یک شی (object) هست که در کیس ما فقط یک key به اسم 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() را صدا بزنیم، که در مثال پایین 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 به اصطلاح bind کنیم در غیر اینصورت ما نمیتوانیم به this دسترسی پیدا کنیم.

کنترل کننده رویداد (Event Handler)

قدم بعدی اضافه کردن یک دکمه(button) است که بتوانیم آن را کلیک کنیم، که متود updateMessage() را فراخوانی کند.

پس بیایید دکمه ای (button) را به متود render اضافه کنیم:

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

متود updateMessage صدا میزند this.setState() را، که تغییر مقدار this.state.message را تغییر میدهد، و زمانی که دکمه را کلیک میکنیم این اتفاق می افتد.

تبریک میگویم شما دانش پایه‌ای از ریکت به دست آوردید. موفق باشید.

منبع FreeCodeCamp: Learn React in 5 minutes – A React.js tutorial for beginners

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *