Shopping Cart App in React | What is useContext ? | React JS Complete Tutorial in Tamil | Day - 18

hi friends first use Contex react for accessing shared values across components without manually passing props through each level comp second cont then then comp npm create V at latest name prop drill and then JavaScript property Dr that is prop Dr project folder npmp and then sample app sample app nice name grandar component.js grandar comp andc commands child component. jsx comp comp Grand constant data equal to hello from grandparent grandar name grandar par sorry grandparent component component import child comp H1 H3 border 5 pixel solid hash tri2 and then padding equal comp props the particular comp the Quick Fix disable reactr types for entire files component dis nice component Drilling function function comp butt that on function l El Grand so export default const Grant context create comp particular comp actually the then equal so user create vat at latest project name theage inst npm install react rou rea so so npm space run welcome soce and then reset Google The Source F comp components the component FSX so so logo so import link from router uh react router so same viewss browser router Router package component so component cart. jsx and then right new f rout routes stand so just home and then in the routes in the routes actually comp comp page paragraph This is Page this is homeage Rowser router link component link tag to in the particular address header do CSS l head import slash header 100 and then so logo and then display display flux it then padding top and bottom Z pixels left and right or 20 pixels and then list Style check color equal to so 20 fcts ID name amount import data variable from slash asset asset assets assets SS ETS SSS assets slash and the file name products. Json function just product products equal to State variable state product map function sorry slash div product do name folder file and the file name product. jsx the particular product details props equal and then particular product amount CSS F product. CSS in the file particular dets IMG thenon so product Dot the particular IMG select with 100 perc height 150 pixels in thect actually IM IMG image 100 height 100 product CSS border 1 pixel hash solid CC CSS in the particular home. CSS fileimport home product sorry home. jsx file import do slash home CSS justify content prodcts so detailsg bottoms details top and bottom um five pixels left and right top and bottom 5 pixels uh margin margin top 5 pixels wow back [Music] then Rus sorry border radius pi object fit cover then Maxim character 25 constant name equal to and the product name order do length greater thaner than 21 name dot subring function 0a 20 in detag so product. CSS piels font font weight 300 500 nice hash uh triple 3 Triple 8 sty sheet comp stet CSS import SL C ccaps card do CSS eru Class C iph product product duct IMG just then product details do car product Ty details and the product name H3 and the product name price soice 45 mple and then total amount amount put [Music] rupes am 45 45 90 90 plus 45 135.com 100 products container display Direction IMG 100 Piel height 100 Piel and then picture 100 100 it Class C amount font weight 600 font weight 600 border one pixel solid ccs import state from react props in the particular detail home comp home component single that in the particular VAR Dr set function constant add C remove dot includes function C DS AR function particular remove from remove from C in case the product colonary operator that is conditional rendering b b product. CSS background on click on click add Remer sott filter function fter Open Bracket particular ID not equal to important important soete statei so use total set total St use State and then default total value Z the total Val map function use State variable props so so 29 comp AR variable so reduce functionr value current orange juice 70 select 6 uh chicken 65 220 ration navigation component tag sorry div span span span tag close G name compon head comp header cssg yellow GRE then I height 30s 15 pixels 15 pixels 20 20 nice 11 pixels and then text alignment center sorry text align 20 color hash2 so ni normal comp comp particular comp connection set in then so and then appx in the particular property remove just use particular comp file name right cck rame c. jsx view. jsx comp cont by and then create cont equal to create C context equal to and the create context function call particulars fragment cont so value equal home particular use context constant upate function use context hook M use context hook m then same and set r then comp conts import and the context name and C context automatically and then then membership exclusive membership bootst and mersh mersh Javas full 22 hours 449 one time thank you friends

Channel: Tutor Joe's Stanley

Views: 7,951

Keywords: useContext in tamil, React shopping cart tutorial, React useContext tutorial, React shopping cart example, React useContext example, React state management tutorial, React functional components tutorial, React hooks tutorial, Building a shopping cart with React, React global state management, React useContext hook explained, React useContext vs Redux, react app in tamil, react complete tutorial

Id: a7ed3ZnSK8M

Length: 79min 52sec (4792 seconds)

Published: Mon Feb 26 2024