چطور با react یک فروشگاه اینترنتی بسازیم

قسمت اولبا سلام و درود خدمت دوستان عزیز خیلی وقت مقاله ننوشتم ؛ امیدوارم با قدرت همیشه این مقاله بنویسم.project structureاولین پروژه که با react,cssاگه دقت کنید با Link بنویسید کدتون تو html به a تبدیل میشه و نمایش داده میشهفرق این کد عکس با html >div<>ul<>li><a></a></li</>div<what Fragment?این یکی از لایبری های react که انگار پدر همه تگ ها وهر تگی تمام میشه بعد از اون پیام بعدی نمایش میده مثل این کد>fragment<>div<>h1>felan</h1</>div<>div<>h2>chetory</h2</>div</>fragment<از کپی پیست پرهیز کنیدشما این وقتی این کد به این کوتاهی نوشته خودش اینو همون کدی که تو اسکرین بعدی نشون دادم تغییر میده پس نیازی نیست کد تکراری بنویسید به گیت هاب رجوع کنید و این طور کد بنویسید.https://github.com/pooriavakili/onlineShop/blob/master/src/components/One.jsخروجی این کد به html تبدیل میشه ایناگه قرار بود هی کپی پیست کنیم الان تقریبا همین صفحه ۱۰۰۰ خط می شد ولی بدون کپی پیست ۴۴ خط شدو صفحات دوم و سوم به این ترتیب است.مثلا این طوری میشد >div<>h1>salam </h1</>div<>div<>h1> salam2 </h1</>div<>div<>h6>chetory </h6</>div<>div<>h3>checkhabar </h3</>div<>div<>h4>chikarmikony </h4</>div<هی من این تکرار کنم تا ۱۰۰۰ دفعه مثلا من ۲۰۰ نوشته داشته باشم این طوری بنویسم یا بهتر یا همه توی یک object بگذارم واز طریق map یا filter معرفی کنم. شما فرض می کنید یک سایت موزیک بزنید که قراره ۳۰تااهنگ با ۳۰ عکس تو یک صفحه بگذارید ایا منطقی اینه مثل کد بالا که div نوشتم همه بنویسه که تقریبا ۵۰۰ خط که نصف کدش کپی پیست یا یک دفعه توی یک object بنویسه بعد با map و filter صداش کنید.این جور کد نوشتن زشت نبود که نوشتم بهتر نبود از object استفاده کنیم.اینم از هوک که عاشقش حسابی هستم...قبلا این طوری مینوشتیم export default class felan extends Component }componentDidmount }()پیغامی که قرار بعد از فراخوانی بالا بیاد}render(){return)>div</>div<({{این کوتاه تر یا کد عکسقسمت router های پروژه که بهترین کار اینه که همه روت ها در یک object نوشته شده و اینطور نمایش دهیم.یا این کار به نظر شما const routing=( <Router> <Route exact={true} path='/sevom' render={(props)=><Sevom{...props} sevom={props.Sevom}/>}/> <Route exact={true} path='/chaharom' render={(props)=><Chaharom{...props} sevom={props.Chaharom}/>}/> <Route exact path='/' render={(props)=><App {...props} app={props.App}/>}/> <Route exact={true} path='/signin' render={(props)=><SignIn {...props} signin={props.SignIn}/>}/> <Route exact={true} path='/app' render={(props)=><App {...props} app={props.App}/>}/> <Route exact={true} path='/about' render={(props)=><About {...props} about={props.About}/>}/> <Route exact={true} path='/download' render={(props)=><Download {...props} download={props.Download}/>}/> <Route exact={true} path='/header' render={(props)=><Header {...props} header={props.Header}/>}/> <Route exact={true} path='/next' render={(props)=><Next {...props} next={props.Next}/>} />> </Router>)ReactDOM.render(routing, document.getElementById('root'));// If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();پس ببنید چقدر خوبه جاوااسکریپت قشنگ بلد باشید بعد react کار کنید. پس شعار من به شماجاوا اسکریپت یاد بگیر بعد بیا react کار کنبقیه پروژه می تونید در آدرس گیت هاب من ببنید.https://github.com/pooriavakili/onlineShophttps://nasir.liara.run/پروژه دوم با react, material-uiHeaderخروجی این صفحه من فقط قسمت هایی که با material-ui نشون میدم و بقیه که به جای cssبا jsx نوشته شده است.خروجی کد اسکرین شات ￼Drawerبقیه پروژه هم در این ادرس ببنید.jsxhttps://github.com/pooriavakili/producthttps://onlineshop.liara.runقسمت دوم این مقاله در مورد after.js , tdd این پروژه توضیح می دهیم.