https://app.learngit.io/component---src-pages-templates-lesson-js-…66196478-e-71-b-mdx-e65c79b339c16e544f23.js

1"use strict";(self.webpackChunklearn_git=self.webpackChunklearn_git||[]).push([[7931],{5911:function(e,t,n){n.r(t),n.d(t,{Head:function(){return z},default:function(){return P}});var l=n(98587),a=n(21585),s=n.n(a),r=n(58156),o=n.n(r),i=n(62193),c=n.n(i),m=n(28453),d=n(96540);function u(e){const t=Object.assign({p:"p",h2:"h2",h3:"h3",code:"code",pre:"pre",strong:"strong",hr:"hr"},(0,m.RP)(),e.components),n=t.GitTooltip,l=t.InfoBlock;return n||g("GitTooltip",!0),l||g("InfoBlock",!0),d.createElement(d.Fragment,null,d.createElement(t.p,null,"Finally, your project files are being ",d.createElement(n,{term:"tracked"},"tracked")," by Git and you're ready to put in some serious coding work. In this lesson, you'll learn the fundamental Git workflow that allows you to record code changes to your repository. We'll review how to move files between the states (modified, committed, staged), and how to periodically save snapshots of your work."),"\n",d.createElement(t.h2,{id:"the-commit-workflow"},"The Commit Workflow"),"\n",d.createElement(t.p,null,"As you work on your project, you'll inevitably edit existing files, create new files, and delete old ones. These actions may seem obvious, but when using version control, these modifications are precisely the ones you want to track."),"\n",d.createElement(t.p,null,"With Git, rather than worrying about each individual action, you simply work on your project as normal: start developing features, fixing bugs, etc., but when you get to a stopping point (for example: you fixed a bug, or you finished the feature) ",d.createElement(n,{term:"commit"},"commit")," your work to the Git repository for safe keeping."),"\n",d.createElement(t.h3,{id:"1-check-file-status"},"1. Check File Status"),"\n",d.createElement(t.p,null,"As you edit, create and delete files, Git keeps track in the background. Use the ",d.createElement(t.code,null,"git status")," command to get a list of all your changes:"),"\n",d.createElement(t.pre,null,d.createElement(t.code,{className:"language-shell"},"git status\n")),"\n",d.createElement("small",null,d.createElement(t.strong,null,"Output")),"\n",d.createElement(t.pre,null,d.createElement(t.code,{className:"language-shell"},"On branch main\nChanges not staged for commit:\n    modified:   homepage.html\n    deleted:   styles.css\n\nUntracked files:\n    about_me.html\n    profile_pic.jpg\n\n")),"\n",d.createElement(t.p,null,"In the output, you'll notice Git knows which files have been modified, created and deleted. In this example, I've been working on a website and I've added ",d.createElement(t.code,null,"about_me.html")," and ",d.createElement(t.code,null,"profile_pic.jpg"),", modified ",d.createElement(t.code,null,"homepage.html"),", and deleted ",d.createElement(t.code,null,"styles.css"),"."),"\n",d.createElement(t.p,null,"Recall from the previous lesson that new files are not yet tracked by Git, thus ",d.createElement(t.code,null,"about_me.html")," and ",d.createElement(t.code,null,"profile_pic.jpg")," are marked as ",d.createElement(t.strong,null,"Untracked files"),". This makes sense; without a previous version of the file for reference, Git would not know if a file has been modified or deleted, it simply knows this is the first time it's seeing the file."),"\n",d.createElement(t.h3,{id:"2-stage-files"},"2. Stage files"),"\n",d.createElement(t.p,null,"Now that you've gotten to a good stopping point in your project, you can start the process of recording your changes to your Git repository. Start by ",d.createElement(n,{term:"staging-area"},"staging")," any files you'd like to include in your snapshot with the ",d.createElement(n,{term:"add"},"add command"),". This action moves the files from the working directory to the ",d.createElement(n,{term:"staging-area"},"staging area"),":"),"\n",d.createElement(t.pre,null,d.createElement(t.code,null,"git add homepage.html styles.css about_me.html profile_pic.jpg\n")),"\n",d.createElement(t.p,null,"The action of moving files to the staging area is called ",d.createElement(t.strong,null,"staging"),'; thus, we would say that we\'ve "staged the files." After staging your file changes, you can run ',d.

1createElement(t.code,null,"git status")," again to confirm:"),"\n",d.createElement(t.pre,null,d.createElement(t.code,null,"git status\n")),"\n",d.createElement("small",null,d.createElement(t.strong,null,"Output")),"\n",d.createElement(t.pre,null,d.createElement(t.code,null,"On branch main\nChanges to be committed:\n    new file:   about_me.html\n    new file:   profile_pic.jpg\n    deleted:   styles.css\n    modified:   homepage.html\n")),"\n",d.createElement(t.p,null,'You can see there is now a section titled "Changes to be committed," which tells you which files are in your staging area.'),"\n",d.createElement(l,null,d.createElement(t.p,null,d.createElement(t.strong,null,"Stage multiple files at once")),d.createElement(t.p,null,"Instead of listing each file individually, stage ALL untracked/modified files in the working directory using the ",d.createElement(t.code,null,".")," wildcard:"),d.createElement(t.pre,null,d.createElement(t.code,null,"git add .\n")),d.createElement(t.hr),d.createElement(t.p,null,d.createElement(t.strong,null,"Make a staging mistake?")),d.createElement(t.p,null,"If you accidentally added a file to the staging area and want to move it back into your working directory (i.e. ",d.createElement(t.strong,null,"unstage")," the file), simply use the ",d.createElement(n,{term:"restore"},"restore command"),". For example, to unstage ",d.createElement(t.code,null,"profile_pic.jpg"),", run:"),d.createElement(t.pre,null,d.createElement(t.code,null,"git restore --staged profile_pic.jpg\n"))),"\n",d.createElement(t.h3,{id:"3-commit"},"3. Commit"),"\n",d.createElement(t.p,null,"Now that the changes are moved to the staging area, tell Git to take a snapshot of that staging area, bundle those file changes in a ",d.createElement(n,{term:"commit"},"commit"),", and save it to the repository. To do this, use the ",d.createElement(t.code,null,"git commit")," command."),"\n",d.createElement(t.pre,null,d.createElement(t.code,null,"git commit -m 'Added an About page'\n")),"\n",d.createElement(t.p,null,"Remember to pass a descriptive commit message for future posterity using the ",d.createElement(t.code,null,"-m")," flag. Commit messages (along with other metadata, like author and date) are attached to each commit. This extra information makes it easy to discern which changes were introduced by the commit. Git-based cloud hosting providers like GitHub also use this information to display project history."))}var p=function(e){void 0===e&&(e={});const t=Object.assign({},(0,m.RP)(),e.components).wrapper;return t?d.createElement(t,e,d.createElement(u,e)):u(e)};function g(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var h=n(24794),E=n(3529),f=n(74423),y=n(2125),v=n(4907),w=n(23191),b=n(54755),k=n(79479),x=n(66452),N=n(18726),_=n(82358),A=n(64238),T=n(69478),j=n(8762),G=n(16304),I=n(39796),L=n(18565);const C=["data","children"];function F(e){let t=e.data,n=e.children;(0,l.A)(e,C);const a=(0,f.As)(),s=a.user,r=a.isLoading,i=o()(t,"contentfulLesson"),m=o()(i,"quiz"),u=o()(i,"exercise"),p=o()(i,"body.body"),g=o()(i,"module[0]"),h=o()(g,"course[0]"),y=o()(g,"draft",!0),w=o()(i,"video"),G=o()(w,"vid")?atob(w.vid):null,F=o()(i,"visualizations"),z=!!w&&!y,P=!c()(F),B=j.M.filter((e=>"read"===e.id||"watch"===e.id&&z||"explore"===e.id&&P)),R=(0,d.useState)(z?"watch":B[0].id),W=R[0],q=R[1],M="watch"===W&&z,H="explore"===W&&P,U=!M&&!H,Q=(0,d.useState)({[z?"watch":B[0].id]:!0,read:!0}),Y=Q[0],Z=Q[1],$=(0,L.y)(o()(g,"id"),o()(h,"modules")),J=$.next_module,D=$.previous_module,K=(0,L.u)(i.id,o()(g,"lessons"),J,D),V=K.next_lesson,X=K.previous_lesson,ee=!!V&&o()(J,"lessons[0].id")===V.id,te=o()(ee?J:g,"plans")||[],ne=!r&&!(0,f.w)(te,s);return d.createElement(E.A,{currentPageObject:i,plansWithAccessByUid:o()(g,"plans")||[],contentMaxWidth:m&&!w?840:void 0},d.createElement("header",{style:{marginBottom:"var(--s-6)"}},g&&g.title&&d.createElement("div",{className:"eyebrow",style:{color:"var(--brand-deep)"}},g.title),d.createElement("div",{className:"ds-cluster ds-cluster--between ds-cluster--wrap ds-gap-4",style:{marginTop:"var(--s-2)"}},d.createElement("div",{className:"ds-cluster ds-gap-3"},d.createElement("h1",{className:"h1"},i.title),u&&d.createElement(I.m_,{placement:"bottom"},d.createElement(I.k$,null,d.createElement("span",{className:"stat-pill stat-pill--reward",style:{cursor:"help",textTransform:"uppercase",letterSpacing:"0.5px"}},"Beta")),d.createElement(I.ZI,null,"Please report issues using the thumbs up/down icons below."))),d.createElement("div",{className:"ds-cluster ds-gap-3"},d.createElement(v.A,{slug:o()(i,"slug",""),readOnly:!(!m&&!u),readOnlyHint:u?"Complete all goals to mark complete":void 0,variant:"header"}),d.createElement(O,{slug:o()(i,"slug",""),next_lesson:V,locked:ne}))),m&&!w&&d.createElement("p",{className:"lead",style:{marginTop:"var(--s-3)"}},"Test your knowledge!"),u&&!w&&d.createElement("p",{className:"lead",style:{marginTop:"var(--s-3)"}},"Your turn — type commands to complete the exercise.")),u?d.createElement(d.Fragment,null,d.createElement(T.A,{exercise:u,lessonSlug:o()(i,"slug","")}),!y&&p?d.createElement("div",{className:"content",style:{marginTop:"var(--s-8)"}},n):null):d.createElement(d.Fragment,null,B.length>1?d.createElement("div",{className:"lesson-mode-switcher",style:{marginBottom:"var(--s-6)"}},d.createElement(j.A,{tabs:B,active:W,onChange:e=>{Z((t=>t[e]?t:Object.assign({},t,{[e]:!0}))),q(e)}})):d.createElement(d.Fragment),z&&(Y.watch||M)?d.createElement("div",{className:"lesson-video-header",style:{display:M?void 0:"none"}},"vimeo"===w.hostingPlatform?d.createElement(b.A,{videoId:G,borderRadius:"8px",shadow:!0}

1):d.createElement(_.A,{videoId:G,borderRadius:"8px",shadow:!0})):d.createElement(d.Fragment),P&&(Y.explore||H)?d.createElement("div",{style:{display:H?void 0:"none"}},d.createElement(A.A,{visualizations:F})):d.createElement(d.Fragment),Y.read||U?d.createElement("div",{style:{display:U?void 0:"none"}},d.createElement(k.A,{content:p}),d.createElement("div",{className:"content"},y?d.createElement("p",null,d.createElement("strong",null,"Lesson not found."),d.createElement("br"),"If you suspect this to be in error, please submit a help request."):n,m?d.createElement(d.Fragment,null,d.createElement(x.A,{title:"Quiz",questions:m.questionsJson.questions,lessonSlug:o()(i,"slug","")})):d.createElement(d.Fragment))):d.createElement(d.Fragment)),d.createElement("div",{style:{marginTop:"var(--s-8)",marginBottom:"var(--s-4)"}},d.createElement(v.A,{slug:o()(i,"slug",""),readOnly:!(!m&&!u),readOnlyHint:u?"Complete all goals to mark complete":void 0})),d.createElement(S,{previous_lesson:X,next_lesson:V,nextLocked:ne}),d.createElement("div",{className:"ds-cluster ds-cluster--center ds-gap-3",style:{marginTop:"var(--s-9)",color:"var(--muted)",fontSize:"var(--fs-small)"}},d.createElement("span",null,"Was this lesson helpful?"),d.createElement(N.A)))}const O=e=>{let t=e.slug,n=e.next_lesson,l=e.locked,a=void 0!==l&&l;const r=(0,w.p)(),i=r.data,c=r.isPending,m=o()(n,"fields.path"),u=s()(i,t)>=0,p=(0,d.useState)(!1),g=p[0],E=p[1],f=(0,d.useRef)({slug:null,complete:null});if((0,d.useEffect)((()=>{if(c)return;const e=f.current;f.current={slug:t,complete:u},e.slug===t&&!1===e.complete&&u&&E(!0)}),[t,u,c]),!m||!u)return null;const y=d.createElement(h.Link,{to:m,className:"btn btn-primary btn-sm btn-nudge lesson-next"+(g?" lesson-next--enter":""),"aria-label":"Next lesson: "+n.title,onAnimationEnd:()=>E(!1)},a?d.createElement(G.LM,{size:12}):null,d.createElement("span",null,"Next"),d.createElement(G.Qp,{size:16}));return a?d.createElement(I.m_,null,d.createElement(I.k$,{asChild:!0},y),d.createElement(I.ZI,{className:"Tooltip"},"The next module is part of a paid plan")):y},S=e=>{let t=e.previous_lesson,n=e.next_lesson,l=e.nextLocked,a=void 0!==l&&l;const s=o()(t,"fields.path"),r=o()(n,"fields.path"),i=t&&s,c=n&&r;return i||c?d.createElement("nav",{className:"lesson-pager","aria-label":"Lesson navigation"},i?d.createElement(h.Link,{to:s,className:"lesson-pager-btn lift"},d.createElement("span",{className:"eyebrow lesson-pager-dir"},d.createElement(G.nk,{size:14})," Previous"),d.createElement("span",{className:"lesson-pager-title"},t.title)):d.createElement("span",{className:"lesson-pager-spacer"}),c?d.createElement(h.Link,{to:r,className:"lesson-pager-btn lesson-pager-btn--next lift"},d.createElement("span",{className:"eyebrow lesson-pager-dir"},"Next ",a&&d.createElement("span",{className:"lesson-pager-lock"},d.createElement(G.LM,{size:12})," Paid")," ",d.createElement(G.Qp,{size:14})),d.createElement("span",{className:"lesson-pager-title"},n.title)):d.createElement("span",{className:"lesson-pager-spacer"})):null},z=e=>{let t=e.data;return d.createElement(y.A,{title:o()(t,"contentfulLesson.title")})};function P(e){return d.createElement(F,e,d.createElement(p,e))}}}]);