ریاکت برای غارنشینان 1

غارنشینان رو میتونین اینجا بخونین..البته هیچ ربطی به این نوشته نداره و احتمالا چیزی دستگیرتون نمیشهخلاصه ش اینه که ما الان بروزترین ورژن از غارنشینان هستیم.کسی هست که مخالف باشه؟ ما قراره یه پروژه ی فرانت برای یه api آماده درست کنیم .دلم میخواد قدم به قدم با هم جلو بریم و چالش هایی که پیش میاد رو حل کنیم . پروژه عشقیه و احتمالا به سرانجام نرسه ولی میریم جلو ببینیم چی میشه.قراره از این ها استفاده کنیم و درگیر چالش هاش بشیم :git, react, next.js, express, nginx, docker, jest, eslint, typescript, styled-component, storybook, axiosاینا شاید بعضیا اسم هاشون گنده باشه ولی ما از هر کدوم به قدر نیازمون قراره استفاده کنیم پس نترسین و یادتون باشه زور هیچ کدومشون به استک اور فلو و ممارست شما نمیرسهمن قراره کلی اشتباه کنم که از همین الان ازتون میخوام خطاها رو بهم گوشزد کنین خب من به رمزارز ها علاقه دارم و برای خرید و فروش یکی از جاهایی که زیاد استفاده میکنم سایت اکسیر هست . داکیومنت api اکسیر رو میتونین از اینجا نگاه کنین . هدف اصلی من اینه که با استفاده از این api یه api کاستوم در بک اند خودم به کمک پایتون فلاسک درست کنم که به طور خودکار به خرید و فروش بپردازه .بک اند تقریبا آماده ست فعلا درگیر بک اند و api نمیشم و بریم که یه فرانت کول داشته باشیم.بنابراین در انتها ما یه سایت خواهیم داشت که مشابه یه اکسچنچ اطلاعات خرید و فروش بیت کوین و اتریوم رو نشونمون میده و میتونیم اوردر خرید و فروش بزاریم, سایر اوردر هارو ببینیم , با بک اند کاستوم شده مون ویژگی stop loss بهش اضافه کنیم و در انتها بتونیم ست کنیم که تحت شرایط مشخصی خودکار خرید و فروش کنه و از پنل فرانت قابل کنترل باشهمن وقتی با ریاکت آشنا شدم که هوک ها تازه اومده بودند و میشه گفت تا حالا کلاس کامپوننت با ریاکت ننوشتم .چند بار هم سمت استفاده از ریداکس رفتم ولی هر بار شکست خوردم و برام جا نیفتاد. پس اینجا قراره فقط از کانتکست استفاده کنم. خب من خیلی از اول میخوام توضیح بدمخانه ای برای نوشتن:اول از هر چیز لازمه که ما برای کار یه تکست ادیتور , محیط توسعه یا ide یا هر چی که اسمش رو میزارین داشته باشیم ..شک نکنین که سعادتتون در استفاده از vscode هست .پس بدون چون و چرا برید از اینجا نصبش کنید.vscode کلی افزونه داره که واقعا کارهارو دلنشین میکنه ..کم کم در آینده معرفیشون میکنمالبته اگه چون و چرا دوست دارین میتونین یه نگاه به این آمار استک فلو بندازیننودوقتی یکی واژه ی نود رو میبینه ممکنه فکرش بره سمت برنامه ی 90 ..یه عده هم ذهنشون میره سمت نقاط شبکه یا ماینر های ارزهای دیجیتال ...یه عده هم به فکر عکس های خاکبرسری میافتن ....ولی نود واسه ما محیطیه که بهمون اجازه میده تا جاوااسکریپت رو سمت سرور اجرا کنیم و قدرت جاوااسکریپت رو بیرون از مرورگر داشته باشیم. که میتونین از اینجا نصبش کنین .بعد از نصب دستورات زیر باید یه همچین خروجی هایی داشته باشنC:\Users\mehran>node -v v12.4.0 C:\Users\mehran>npm -v 6.9.0شروع ساخت پکیچ یه پوشه برای پروژه تون بسازید و برید توش و ترمینالتون رو باز کنید .اگه vscode نصب کردید کافیه اون پوشه رو با vscode باز کنید .توی vscode با زدن دکمه های ctrl+` میتونید ترمینال باز کنید . دقت کنید که ` زیر دکمه ی esc قرار داره نه اونی که کنار enter هست.بعد از باز کردن ترمینال کافیه npm init رو وارد کنید و چند بار enter بزنین تا فایل package.json ساخته بشه.فایل پکیج در ابتدا یه چیزی شبیه اینهاون scripts جاییه که ما دستوراتی رو که میخوایم توسط node اجرا بشه مینویسیم.به صورت دیفالت یه دستور test اونجا قرار گرفته که با صدا زدنش اون متن جلوش در ترمینال چاپ میشه و یه ارور برمیگردونه تا ما مجبور شیم دستورات خودمون رو اونجا بنویسیم.برای استفاده ازش باید از npm run استفاده کنیم و بعدش اسم اسکریپتمون رو بنویسیم .یه چیز مثل اینnpm run testخب کم کم باید بریم سراغ نصب پکیج ها ی مورد نیاز و شروع برای نصب از دستوری مشابه دستور زیر استفاده میکنیم npm install --save esme-packageبرای شروع من سه تا پکیج ریاکت, ریاکت دام و نکست رو با دستور زیر نصب میکنمnpm install --save react react-dom nextبعد از اجرای این دستور میبینین که اون پکیج ها به دپندنسی پروژه توی فایل package.json اضافه شدن و توی پوشه ی پروژه یه پوشه به اسم node_module ساخته شده که فایل های مربوط به این پکیج ها اونجا نگه داری میشهبرای کار کردن با نکست لازمه که ما اسکریپت هاش رو به فایل package.json اضافه کنیم . نکست چند تا اسکریپت داره که مهم هاش اینا هستن&quotdev&quot: &quotnext&quot, &quotbuild&quot: &quotnext build&quot, &quotstart&quot: &quotnext start&quot میدونم که هنوز نگفتم نکست چیه ولی جلوتر بهش میرسیم .بزار اول راه بیافته خب با توجه به این ما فایل پکیجمون رو تغییر میدیم و میشه این { &quotname&quot: &quotexir-front&quot, &quotversion&quot: &quot1.0.0&quot, &quotdescription&quot: &quot&quot, &quotmain&quot: &quotindex.js&quot, &quotscripts&quot: { &quotdev&quot: &quotnext&quot, &quotbuild&quot: &quotnext build&quot, &quotstart&quot: &quotnext start&quot }, &quotauthor&quot: &quot&quot, &quotlicense&quot: &quotISC&quot, &quotdependencies&quot: { &quotnext&quot: &quot^9.0.5&quot, &quotreact&quot: &quot^16.9.0&quot, &quotreact-dom&quot: &quot^16.9.0&quot } }الان هرکدوم از اسکریپت هارو که اجرا کنیم با خطا مواجه میشیم چون هنوز هیچی ننوشتیم و چیزی برای اجرا وجود نداره .نکست برای اجرا لازم داره تا فایل های پروژه رو بتونه از پوشه ای به نام pages بخونه و اجرا کنه که خب ما هنوز چنین پوشه ای نداریم . پس یه پوشه به اسم pages میسازیم.و حالا اگه مثلا اسکریپت dev با زدن دستور npm run dev اجرا کنیم . برنامه کار میکنه و یه سرور روی پورت 3000 میاره بالا که میتونیم توی مرورگرمون بازش کنیم و برنامه ی ریاکتمون رو که با استفاده از نکست ساختیم ببینیماجرای نکست در حالت دولوپ خروجی ابتدایی برنامهخب ما بعد از اجرا روی لوکال هاستمون صرفا یه صفحه ی 404 دریافت کردیم و چیزی برای نمایش وجود نداره . چون هنوز چیزی توی پوشه ی pages اضافه نکردیم اصلا.فک کنم دیگه از اینجا به بعد لازم باشه کمی در مورد نکست حرف بزنمبزار برم پست بعدی