react 12 hours course video 12 hours Des Ecommerce project [Music] re Q Cod screen details introduction rebook Ang Rea user interface performance reactjs react react JavaScript library user user p mob traditional HTML website HTML devops h reacts website HTML response in the web server facebook.com facebook.com facebook.com/ JBL Cod Facebook server X JavaScript library framework Rea create react stt index. HTML [Music] react using HTML text B react application react CDN links sears. [Music] caop reactop calone reop rea library. min.js [Music] ja hello world in the H World function statement compon statement hello world hell rea create root create function javascri doent get element comp open indt h worlding Hello World HTML outa HTML document CDN links JavaScript react Developers fors runtime environment create react app next next install node space I v.4 space create iph react iph app project space with react to tutorial createa create react react C react npm defaults comp Goa project website pagea Comm this s can't be reached window default default npm start GOOG Pro V window open the option open back [Music] start react Pro f manager Pro [Music] index [Music] [Music] created using created create app IND rea [Music] for react okay Lo [Music] page npm start Dev dep dep react SCP project rep C indexs Li packages C app rea JavaScript XML function [Music] element BS create root function busar reactop file index JS file index.css set index.js okaya [Music] function compon components El SRC f.s HML JavaScript code Javas jsx JavaScript JavaScript name okay HTML self cling Devol IND for h l H hellers Local Host static JS folder bundle.js open hoders children react forx IND single bundle app.js fers comp the function elements in the round H2 element jsx element hi I am a car component self cling H1 heading it who lives inside my garage car Expressions must have one parent element comp comp who lives inside my garage hi I am comp comp the root IDE elements interface elements comps comp export default car car from current folder SRC folder SL components folder SLS hi I am a car [Music] G IND export default garage IND import not found can't resolve components react the component the car component resolve in the PA SRC folder components folder comp current folder comp resolve comp 16th components comple Apple import react in the react Library import EXA react component class okay function comp H1 sorry H2 heading I'm Apple in thetic export default in the class Apple in the component import Apple f component element self cling function props state car templ aiue comp comp prop props properties comp theand equal to [Music] is not defined function comp F parameter props props props variable con I am a for I a Ferrari comp color comp I am a black Ferrari caror a red Ferrari card out and the field value ferr value color property PA value black okay comp [Music] info the car info a black feri comp car fun component function comp CL compon Apple info [Music] INF the Apple compon props Apple info and render this [Music] Apple info color in the Apple info I'm uh color up space brand sorry type red fu react Rea toolsa devop toolsa extension add to Chrome react developer tools toolss develop tools El components inspecting ret okay refresh comp brand Ferrari Color black okay comp F comp Apple info car info [Music] extension conditional rendering conditional rendering black comp JavaScript object Sy I am undefined undefined compon open in the car INF not equal toed car info color value undefined out false INF out component expression question is door opened Conant garage door is open okay open OPP door is closed open open output G door is closed closed constant show car info constant f false show info symbol component outut hi I am a black Ferrari car in the headline ised rendering I am AER l s BMW for other color green Tesla brand black color garage door is open element car car component car component car list constant the con function AR function the arrow function the list item [Music] INF [Music] the garage door closed hi I BMW car hi I am a green for card hi I am a black T function function comp console each child in a list should have a unique key prop for l for car [Music] HTML [Music] number constant g r map function call back function [Music] function number s each child in a list should have unique [Music] key IND IND CS [Music] functional component functional component component H1 heading Hing hello styling add a little sty default header comp heading the El color inline cssy CSS [Music] value CS backr backgr [Music] color the CSS [Music] the object font family Sans [Music] Sheriff JavaScript C HTML as 28 2 c 3 4 black color but black [Music] and white padding 40el from font family Sans text align prop Center CSS styling single dot current folder components folder header CSS HTM El CS comp C blue big blue CS property do blue adding 40 pixel font family [Music] s text align Center St head okay CL hello styling St in the class hell stying element the CSS head. [Music] CS htl B [Music] BL state for IND component compon favorite color JS function my favorite color is default favorite color indexs favorite color comp my favorite color is blue okay function call function variable okay angle bracket open close element okay save re curly braces state funun state function in the function const square brackets equal to coloror my favorite color BL f f state State function and the component car in the car component class component Class Car extends react componenta react and the H1 heading my car color is in the value JavaScript Constructor [Music] the this Red Dot State DOT color ACC access change color Tex on click function in the state in the property state blue alignment export default car the index component Import in the comp comp [Music] the functional compon F comp comp functional compon multiple State value compunction H1 heading my scooter paragraph color up model model Activa 6G [Music] model year 2020 in the okay mod stare color and the state function set brand model activ value State value PA model function set model year 2020 to value State value pair year and the function [Music] PA model model State variable is here in the year export default scooter indexs in the car component scooter comp component [Music] f for and the state scooter scoter Boolean value object okay brand property model prop 2020 okay in the color property access scooter model proper access access object H1 button chck F update color function value object value blue blue okay for model console loog State current state comp develop tools IND Street mod save comp prop up mod scoter function call function call function prev St previous state value color model Val class component component color is this dot state model my car color is red and model is okay curly Braes return prev in the previous [Music] state the Val me and the component list in the list comp or unorder list list element H1 listate list set list list item list State value item element access list element element Str compon out default element value index index [Music] okay test one test two I item cck add item the function pair set count than the function pairer use State One item name item in the count account item one item two item set list function function square brackets prev values stue the previous previous state value previous previous 1 okay 4 current state console cons item one item item item one item two item previous state values use effect use effect use effect function use statement St timer JS function comp H1 heading I have rendered count times okay r the H1 I have rendered count times log screen refreshed okay screen refreshed the screen screen render function increase count text the button on click event update count function call back [Music] function and the previous count the previous count plus one okay sorry in the index JS in the favorite color component default okay State function okay State value State value I have render zero times scener I have rendered one times increase count but prop INE the property value check count function in the function count Function One refresh refresh count inrease for effect back fun I have render Z comp set count refresh motion element stue set time out call function prev function parameter return previous value + one in the set time out fun function one second value increase per forms Rea submit form comp compon my form form. JS functional component comp okay form in the form element element element label element input element enter your name in the form export the component my form my form El form element lab text input form St okay document object get element by ID for event on change back name function function call F [Music] Target tget Val and the console log name the state prop consle sorry current state e s hue ACC thebel input submit formex handle submit the function cons form submitted console LR form element on submit event listen form listen form submission forms ref browser refresh function prevent [Music] default onm list prowser refresh for my form component AG [Music] enter your AG inut text the input on [Music] stess set email set AG set email console log current state name age em tag brake tag one self [Music] cling okay name age up email in the name AG set name set age inputs object set name functions input St object Target value set inputs function in the object in okay age the function the set fun F call back function call function previous state in the set input call back function function body return return statement previous state for ag28 jbloc at gmail.com [Music] AG [Music] form m for on change hand set PR function change function call function that call function previous state other object name attribute name attribute in the [Music] input name tet Square in the name Square El name form fill CH function 32 rul for phone on change list handle change age 28 email in the phone number submit form in9 uh plus [Music] [Music] 919 [Applause] input state fi9 gmail.com UE gmail.com rea El element form self cling option aalia A options India cardia United States okay okay okay options in the [Music] El States subm AG email name country United States value HTM in the select element Tex are field enter about you deta HTML the text student in the inputs state Val about default inputs ini I am a student I am a student I love programing open [Music] sub the number re project okay the number [Music] re appss for [Music] 15 the container container padding border radius 16 pixel display Flex box f name font bottom elements guess the number between 1 to 10 ID ter ID [Music] h [Music] text okay inut [Music] element inut Focus background color soory temporary state use St handle change in the handle change function element CH f for result. JS function component comp compx elements element3 heading element default comps import self cling secret number ma random for secret secret refh guess the number between 1 to 10 answer component function uh secret [Music] num terue Secret numberer term term value Secret lowerer correct enter valid in term the if for [Applause] one the number between one and two number 1 to for number but react Local Host 8000 comp refesh apps [Music] compon app home.js [Music] export default function element homeage okaya comp about about function contact contact details heading import homeage home compon Conta local comp contact us [Music] SC npm I installer react router Dom react router [Music] [Music] ows rout comp okays [Music] r open and closing routes comp self cling opening cling Lo the for element [Music] [Music] element home home page comp output compon compon about [Music] us slash contact us element contact component contact contact details compon outut contacts owser [Music] ref browser [Music] router the browser [Music] [Music] findum [Music] home [Music] browser router routes rout link compty [Music] the home component link element [Music] okay homeage [Music] [Music] comp [Music] SL contact link about contact us contact contact cont link comp route parameters user SL ID 1 2 3 4id user user profile page [Music] user ID is Boulder or value C 1 2 3 Ro element [Music] user L user us user user cck the user profile page us ID the route parameters sorry [Music] us the userb [Music] [Music] for SL user slash2 okay one [Music] Val react function function use par f con ID one [Music] 2 1 2 1 2 1 [Music] two nent P old books JS compon books new books [Music] [Music] yes l slash old books old underscore Books Okay books SL newcore books [Music] SA [Music] old books component new books comp book types [Music] l [Music] so rout rout book [Music] types new books old books BS [Music] okay books navigation homeage component log Lo and the Link login link text Lo on submit code for checking user credentials if credentials this valid login success dashboard dashbo the appj appj use navigate react router [Music] on okay on [Music] fation [Music] liary comp Pro resp post reest method get delete name email website j. meod delete [Music] HTTP request blueprint JS npm I at blueprints toode inst normal CS [Music] import normal CSS blueprints BL CSS blueprint ions CS F CSS attributes framework like boot Bo tails back placeholder gole free fake rest API us free fake AP forend okay okay app comp name email website action action TR table loish loish at JBL code.com up website on ww. J code.com [Music] HTML table class modif class t place use state point use f AP request HTP reest function f respon function function Jon Jon US map function element CL 1 2 3 4 userid website website delete action user. ID name user do name email user. [Music] email p is here user. website Del blue [Music] button but delete okay save up editable text [Music] em in the um okay [Music] editable new name name new name [Music] state new [Music] email new website TR Element table row box input group group or inut box sorry function new name placeold box [Music] okay group theun set new email ENT fun new website placeholder enter website button blue user okay add user the function St new name in the state valm function values email new email website new website in the own values the name erson email ERS website HTTP reol developer tools Jon placeholder get placeholder code.com users us reest re string meod name up email up website okay headers property reest object content type value one the application [Music] slash the caret equal to UTF funon Jon function set users user spread operator Val [Music] comp app toaster value in the toaster function sorry the component cre in the function message user the user user added successfully int out lo.com isia website ww. Jil code.com us request us add successfully l.com in the set new name set new email new name new email and new website mahes and uh mahes at table Lo loj code.com www. Jil code.com website [Music] okay us loish loish at code.com reest [Music] fake we comp comp us function hand we field in the uh sorry website the usange the list dat list data us us [Music] us previous user fun f user ACC St us end point the Json place [Music] call function call function update user us IDI add user in the fetch request on re poest re sorry in the syntax us reest string object us add user updated successfully we us function uh Lan at gmail.com gram the user function us loish loish at gmail.com www.j.com [Music] Dev place up users l gmail.com www.j code.com Jon placeholder for f delete delete user delete delete user Del delete f us users not equal to deleted sucessfully message success 300 3,000 Mill Del okay delete erson NB us lo lo J code code.com www. JBL code.com app for delete request delete us Del [Music] [Music] t Rea comp comp test test test devop sucessful [Music] [Music] compon the component login.js about the login component export default function lo1 heading and the heading log heading input inut typ text text type password but text sign in logged in em email and R State set email function State password function password on change the event Target the element value set password okay sign in Handler function email one logage at JV code. and password test at 123 sucessfully lged Fage message successfully logged in message message the element Lo code.com email password 23ed invalid credentials set time out function set out function function function setage set message and invalid credentials message so test 1 2 3 Lo successful Lo inval comp Fest jaas testing or checking component loaded steps for so Comm Lo test.js checking component loaded for snapshotting compon for testing heading element loaded okaying element import function render function testing Library react Lo component in thex element okay expect F function screen object HTML me regession cap to be in the document f checking component screen usess W to show more w Lo comp f checking email and password inputs are empty okay me in the screen comp query by placeholder T element expect to have value password Place password value test case so test gmail.com password value test at 23 checking component loaded close checking email password inputs are t. in Leda developer eom project set back man space in it app JS app back application f npm spde start recommand node mod space appjs npm start framework npm expr expr framewor expr listening to Port 8 8 in the the terminal Ling to 8,000 number [Music] config node production npm i. NB in option config config the en [Music] SA routes require Express SL products controller resp true message get products working get a get single product get single product working get single product default router in module. exports equal to router the mod the f controller export function reest response success object success true M message order works create order require method do/ controllers SL order controller module do exports equal to router require meod file Lo routes folder order orders order [Music] AP slv1 SL prod thunderer exension exensions local 3,000 local develop HTTP slash Local Host upo slash API SL response success true message get products working response success true message get products working great products okay get product uh get single product get single product working order reest Works response create order in the dat go self managed downlo window window comp comp connection local add con hours hours connect datab connect datab module exports connection compass command Mong page page mne Mong modu mongus con datab connection process mongod DB DB connected to host connection connection property host con connect database con the config folder connected to the host Local Host contr model mongos mongos Mong description Des ratings string [Music] images string seller string stock string number of reviews string is created ATU scha model do exports equal to product model contruct product model constant function modelsold model model find [Music] me me prod Ecommerce product products IM C re datab Con in the get sings API slv1 SL products single get single product API AP V1 product request pars ID field access [Music] ACC in the product model find by ID f in the get single product request theu sing application [Music] catch block theat block the L error message the error sucess false in the error okay unable to get product with that ID to get with s single mod order model sorry Js items creat creat at one model the mongia the mod model sorry order controller order model require in the model body console [Music] data it [Music] to object [Music] quantity okay re app use for okay items field data jaas meod total am value call function function f initial Val Val [Music] am amount am 7919 791 number Constructor [Music] okay and [Music] fix [Music] St amount and the field state yes Sy word cre sucess true order create order URL form apb1 SL order okay items amount status ID o f logu option count description in the backend backal npx create react create react start react project rows screen react project the terminal close in the front and rea compon comp the local main page okay logo uh CSS mini e-commerce c c the templates the templates folder temp CSS IND okay link element self cling sty sheet type text/css 4st styling framework aw Now homepage [Music] logg report set [Music] test app. test F home.js default function home component return temp tempate okay fragment from react and temp index nav bar heading section footer okay CL ah self cling [Applause] IND IND IND Imes f PES accur okay home comp head header. JS the component compon elements okay elements and elements the comp home head and comp [Music] app import import from components header file footer footer home comp footer head and products AP El comp for product Cod the the in the elements comp get products St function set products use effect refh the react appcore [Music] process ENB [Music] do react in the sorry response jonon set products refresh [Music] re the access to F access to fetch [Music] Access Control follow back resp NP npm course course require cost so access Access Control orb okay response comp funct okay save products map it's not function okay products products [Music] image SRC images okay products the IM first image image object product uh price product price okay expression okay rating so style proper object product dot ratings access in the product ratings [Music] 3.5 sorry 4.5 3.5 2 [Music] four import link from the package react router Dom inst npm I react r reactjs uh the router comp router the header rou router routes route self flow rout component home compon r okay okay element view details link sorry prodid okay link okay okay get product home compon search [Music] Bo search controllers product keyword [Music] qu request object reest query prop key name operator key ler options Val [Music] okay keyword keyword bluetoo okay search comp export default function search search comp search search component import US state work from react so in the US state set keyword okay function function parameter set key target. value and the Handler search Handler use [Music] rea function naate search slash search question keyword equal to in the state value on click [Music] search UR home home component search one search par and the value set search the search so search parameter value [Music] so r [Music] logo save SE okay in the input onar product detail JS default export default function product deta El element up [Music] alignment slash product slash ID Ida componenta single product product detail component import state from react empty object prod single product slash id id use function reest request resp use effect is not defined use effect import use effect [Music] prod [Music] temp [Music] cannot read properties of null reading images access condition okay name3 product product name prodct ID uncore product card price status status out condition product product. stock greater than zero in out of stock [Music] Z out of stock class name text danger text success so text sucess TT Danger sucess sorry text success [Music] okay to in the information Amazon okays okay product detail page home items and state function items it [Music] DRS items okay State value F set C items property functiona handle to items and items it items items new item Quan qu function set okay initial value typ number Val [Music] new add to item to it is not a function okays one C items and the state l find function f product undid function item exist already OPP not item exist add project terminal front NM react I to the to toasttify container toy container to to dark info so sucess blue [Music] [Music] color elements inst CS St uh to package to function added successfully item added successfully the message top top position top Center top Center value [Music] copy the meth message [Music] okay increase quantity function in the function St on click listener increase quantity increase quantity the quantity equ C decrease quantity value State minus one [Music] on click listener okay [Music] if in the state value quantity the quantity value okay Maxim but disa [Music] disabled dis out of stock CJs component temp temp image self cling okay element for okay l compon link component two d items fragment component from react Items Map function the map function items length Al item [Music] product link element link import react rou page okay price product price increase decrease quantity delete okay okay in the [Music] okay product detail page increase Quan decrease quty prod access in the quantity and stock incre qu okay increase quantity okay sorry items ID quantity set C items the prop St de [Music] de decrement operator on decrease okay in the Lenovo laptop in the Asus Vivo quantity refresh okay remove item from card item line items it [Music] if not equal okay delete cck call function okay your is empty message sorry fragment fragment [Music] okay in the in the C items greater than Z two heading Marin top your C is empty product in the order in the the D call 12 okay contr in the item value [Music] UNS uh item [Music] ini into 1 create uh place order Handler react product prodct detail order order Jon data content [Music] type application SL Json body string set items is empty your order has been placed set complete [Music] complete true set complete true condition complete state not order complete your order has been placed [Music] successfully bre place function react toyage import react to to do [Music] success order [Music] success [Music] [Music] CL colle the col [Music] [Music] for updating product stock items for each statement product model the product model find function find by ID product value ass product stock minus in the [Music] item dat [Music] okay dat SU V outcom and in so Mini e-commerce J mini e-commerce l