چطور با 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/onlineShop

https://nasir.liara.run/

پروژه دوم با react, material-ui

Header

خروجی این صفحه

من فقط قسمت هایی که با material-ui نشون میدم و بقیه که به جای cssبا jsx نوشته شده است.

خروجی کد اسکرین شات



Drawer

بقیه پروژه هم در این ادرس ببنید.

jsx

https://github.com/pooriavakili/product

https://onlineshop.liara.run

قسمت دوم این مقاله در مورد after.js , tdd این پروژه توضیح می دهیم.