https://handsonreact.com/assets/js/85118946.75d52960.js

1"use strict";(self.webpackChunkhandsonreact=self.webpackChunkhandsonreact||[]).push([[7684],{3905:(e,t,a)=>{a.d(t,{Zo:()=>m,kt:()=>d});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?o(Object(a),!0).forEach((function(t){r(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):o(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function i(e,t){if(null==e)return{};var a,n,r=function(e,t){if(null==e)return{};var a,n,r={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=n.createContext({}),s=function(e){var t=n.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},m=function(e){var t=s(e.components);return n.createElement(p.Provider,{value:t},e.children)},u="mdxType",k={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},c=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,p=e.parentName,m=i(e,["components","mdxType","originalType","parentName"]),u=s(a),c=r,d=u["".concat(p,".").concat(c)]||u[c]||k[c]||o;return a?n.createElement(d,l(l({ref:t},m),{},{components:a})):n.createElement(d,l({ref:t},m))}));function d(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,l=new Array(o);l[0]=c;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[u]="string"==typeof e?e:r,l[1]=i;for(var s=2;s<o;s++)l[s]=a[s];return n.createElement.apply(null,l)}return n.createElement.apply(null,a)}c.displayName="MDXCreateElement"},585:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>i,toc:()=>s});var n=a(7462),r=(a(7294),a(3905));const o={title:"Computer Setup",sidebar_label:"Computer Setup",slug:"/computer-setup"},l=void 0,i={unversionedId:"ComputerSetup",id:"ComputerSetup",title:"Computer Setup",description:"Your computer should have:",source:"@site/docs/00-ComputerSetup.md",sourceDirName:".",slug:"/computer-setup",permalink:"/docs/computer-setup",draft:!1,tags:[],version:"current",sidebarPosition:0,frontMatter:{title:"Computer Setup",sidebar_label:"Computer Setup",slug:"/computer-setup"},sidebar:"someSidebar",previous:{title:"Architecture",permalink:"/docs/architecture"},next:{title:"VS Code Setup",permalink:"/docs/visual-studio-code-setup"}},p={},s=[{value:"Your computer should have:",id:"your-computer-should-have",level:4},{value:"\u2714\xa0\xa0 You have completed the computer setup.",id:"-you-have-completed-the-computer-setup",level:4}],m={toc:s};

1function u(e){let{components:t,...a}=e;return(0,r.kt)("wrapper",(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h4",{id:"your-computer-should-have"},"Your computer should have:"),(0,r.kt)("ol",null,(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"A ",(0,r.kt)("strong",{parentName:"p"},"recent")," version of ",(0,r.kt)("strong",{parentName:"p"},"Windows")," (10 or later), ",(0,r.kt)("strong",{parentName:"p"},"macOS"),", or ",(0,r.kt)("strong",{parentName:"p"},"Linux"),", with:"),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("em",{parentName:"li"},"current system updates")),(0,r.kt)("li",{parentName:"ul"},"at least ",(0,r.kt)("inlineCode",{parentName:"li"},"4 GB")," of ",(0,r.kt)("inlineCode",{parentName:"li"},"RAM")))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Node.js")," installed, a recent ",(0,r.kt)("strong",{parentName:"p"},"20.x or 22.x LTS")," version."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Why? The latest version of the React Router requires Node >= 20 on your local development machine (not on the server)")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Visit")," ",(0,r.kt)("a",{parentName:"p",href:"http://nodejs.org/"},"http://nodejs.org/"),".")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Click")," the ",(0,r.kt)("inlineCode",{parentName:"p"},"Download Node.js (LTS)")," (or similar) ",(0,r.kt)("strong",{parentName:"p"}," button ")," to ",(0,r.kt)("strong",{parentName:"p"},"download")," the ",(0,r.kt)("strong",{parentName:"p"},"installer")," file.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Run")," the ",(0,r.kt)("strong",{parentName:"p"},"installer"),", accepting all ",(0,r.kt)("em",{parentName:"p"},"default")," ",(0,r.kt)("em",{parentName:"p"},"settings"),".")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"After installation, ",(0,r.kt)("strong",{parentName:"p"},"confirm")," that the ",(0,r.kt)("inlineCode",{parentName:"p"},"Path")," environment variable on your computer has been modified to include the path for ",(0,r.kt)("inlineCode",{parentName:"p"},"node")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"npm")," by following these steps."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Open")," a ",(0,r.kt)("inlineCode",{parentName:"li"},"command prompt")," (Windows) or ",(0,r.kt)("inlineCode",{parentName:"li"},"terminal")," (Mac).",(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},"In Windows, click the Start button and type ",(0,r.kt)("inlineCode",{parentName:"p"},"cmd")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Run")," the following ",(0,r.kt)("strong",{parentName:"li"},"commands"),":",(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-shell"},"node -v\nnpm -v\n"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Verify")," the ",(0,r.kt)("strong",{parentName:"li"},"version")," of each program is ",(0,r.kt)("strong",{parentName:"li"},"returned"),"."))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Please ",(0,r.kt)("strong",{parentName:"p"},"DO use")," a recent Node.js (Long Term Support (LTS)) versions for this class."),(0,r.kt)("ul",{parentName:"li",className:"contains-task-list"},(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!0,disabled:!0})," ",(0,r.kt)("inlineCode",{parentName:"li"},"20.x")),(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!0,disabled:!0})," ",(0,r.kt)("inlineCode",{parentName:"li"},"22.x")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Please ",(0,r.kt)("strong",{parentName:"p"},"DO NOT use")," Node.js versions that are not long-term support (LTS)for this class."),(0,r.kt)("ul",{parentName:"li",className:"contains-task-list"},(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!1,disabled:!0})," ",(0,r.kt)("del",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"del"},"8.x"))),(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!1,disabled:!0})," ",(0,r.kt)("del",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"del"},"11.x"))),(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!1,disabled:!0})," ",(0,r.kt)("del",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"del"},"13.x"))),(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!1,disabled:!0})," ",(0,r.kt)("del",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"del"},"15.x"))),(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!1,disabled:!0})," ",(0,r.kt)("del",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"del"},"19.x"))),(0,r.kt)("li",{parentName:"ul",className:"task-list-item"},(0,r.kt)("input",{parentName:"li",type:"checkbox",checked:!1,disabled:!0})," ",(0,r.kt)("del",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"del"},"21.x"))))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"Why?"),(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},'Major Node.js versions enter Current release status for six months, which gives library authors time to add support for them. After six months, odd-numbered releases (9, 11, etc.) become unsupported, and even-numbered releases (10, 12, etc.) move to Active LTS status and are ready for general use. LTS release status is "long-term support", which typically guarantees that critical bugs will be fixed for a total of 30 months. Production applications should only use Active LTS or Maintenance LTS releases.'))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"If you are using one of the older or experimental versions of ",(0,r.kt)("inlineCode",{parentName:"p"},"Node.js")," listed above, uninstall it and reinstall a recent ",(0,r.kt)("strong",{parentName:"p"},"LTS")," version."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://stackoverflow.com/a/20711410/48175"},"How to remove Node.js from Windows"))),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre"},"tldr;\n1. Uninstall from Programs & Features with the uninstaller.\n2. Reboot (or you probably can get away with killing all node-related processes from Task Manager).\n")),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://stackabuse.com/how-to-uninstall-node-js-from-mac-osx/"},"How to Remove Node.js from Mac OSX")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"If you are ",(0,r.kt)("strong",{parentName:"p"},"using another version of Node")," and ",(0,r.kt)("strong",{parentName:"p"},"do not want to uninstall it")," because you need to support an existing application that uses that version I would recommend using a N",(0,r.kt)("strong",{parentName:"p"},"ode Version Manager")," so you can install multiple versions of ",(0,r.kt)("inlineCode",{parentName:"p"},"Node.js")," on a machine."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"For details on how to do this ",(0,r.kt)("a",{parentName:"li",href:"https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/"},"see this article"),"."),(0,r.kt)("li",{parentName:"ul"},"Note: As explained in the article, depending on your operating system there are two different open-source projects for installing multiple versions of ",(0,r.kt)("inlineCode",{parentName:"li"},"Node.js"),": one is named ",(0,r.kt)("inlineCode",{parentName:"li"},"nvm")," (Mac) and the other ",(0,r.kt)("inlineCode",{parentName:"li"},"nvm for Windows"),"...make sure you use the appropriate one."))))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Verify")," you can use ",(0,r.kt)("strong",{parentName:"p"},"Vite")," to create a React project."),(0,r.kt)("ol",{parentName:"li"},(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Create a ",(0,r.kt)("inlineCode",{parentName:"p"},"working")," directory for the course somewhere on your computer that you will remember.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Open")," a ",(0,r.kt)("inlineCode",{parentName:"p"},"command prompt")," (Windows) or ",(0,r.kt)("inlineCode",{parentName:"p"},"terminal")," (Mac).")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Change directory")," (",(0,r.kt)("inlineCode",{parentName:"p"},"cd"),") into the ",(0,r.kt)("inlineCode",{parentName:"p"},"working")," directory you created.")),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Run")," the following ",(0,r.kt)("strong",{parentName:"p"},"commands"),":"))),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-shell"},"npm create vite@latest my-app -- --template react\ncd my-app\nnpm install\nnpm run dev\n")),(0,r.kt)("ol",{parentName:"li",start:5},(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"After the application builds, you should see:"),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre",className:"language-sh"},"\u279c  Local:   http://localhost:5173/\n"))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"Hold down the CTRL (Windows) or COMMAND (Mac) key and simultaneously click the localhost link in the terminal.  "),(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},"If the link is not clickable copy the URL and paste it the location/address bar of a browser"))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Verify")," a page with the heading ",(0,r.kt)("strong",{parentName:"p"},"Vite + React")," is displayed in the browser.")))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"An ",(0,r.kt)("strong",{parentName:"p"},"IDE")," (Integrated Development Environment) ",(0,r.kt)("em",{parentName:"p"},"or")," code ",(0,r.kt)("strong",{parentName:"p"},"editor")," of your choice."),(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},"Students may use any IDE/editor that they are comfortable with using.")),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"We ",(0,r.kt)("strong",{parentName:"p"},"recommend")," ",(0,r.kt)("strong",{parentName:"p"},"Visual Studio Code"),"."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"It is ",(0,r.kt)("strong",{parentName:"p"},"free"),", ",(0,r.kt)("strong",{parentName:"p"},"cross-platform")," has a small download, and is a quick install.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Visit")," ",(0,r.kt)("a",{parentName:"p",href:"https://code.visualstudio.com/"},"code.visualstudio.com")," to ",(0,r.kt)("strong",{parentName:"p"},"install"),"."),(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},"Don't confuse Visual Studio Code with the heavier Visual Studio IDE used for .NET development."))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Configure Visual Studio Code")," for the course by ",(0,r.kt)("a",{parentName:"p",href:"/docs/visual-studio-code-setup"},"following these directions"),"."))),(0,r.kt)("admonition",{parentName:"li",type:"success"},(0,r.kt)("ul",{parentName:"admonition"},(0,r.kt)("li",{parentName:"ul"},"Don't miss the above link to configure Visual Studio Code with the appropriate extensions for the course")))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"WebStorm")," or ",(0,r.kt)("strong",{parentName:"p"},"IntelliJ IDEA Ultimate")," both made by ",(0,r.kt)("inlineCode",{parentName:"p"},"JetBrains")," are also great choices."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},"In summary, these IDEs are heavier but have more features built-in.")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Visit")," ",(0,r.kt)("a",{parentName:"p",href:"https://www.jetbrains.com/webstorm/download/"},"Download WebStorm")," to ",(0,r.kt)("strong",{parentName:"p"},"install"),"."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"OR"))),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Visit")," ",(0,r.kt)("a",{parentName:"p",href:"https://www.jetbrains.com/idea/download/"},"Download IntelliJ IDEA")," to ",(0,r.kt)("strong",{parentName:"p"},"install"),"."),(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},"Note: IntelliJ IDEA Ultimate includes TypeScript support while the Community Edition does not.")),(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},"Each download comes with a free 30-day trial."))))))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("inlineCode",{parentName:"p"},"Google Chrome")," browser."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Visit")," ",(0,r.kt)("a",{parentName:"li",href:"http://www.google.com/chrome/"},"http://www.google.com/chrome/")," to ",(0,r.kt)("strong",{parentName:"li"},"install"),".",(0,r.kt)("blockquote",{parentName:"li"},(0,r.kt)("p",{parentName:"blockquote"},"Any recent version will work for the class."))),(0,r.kt)("li",{parentName:"ul"},"Also, any other browsers that you plan to support"))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},(0,r.kt)("strong",{parentName:"p"},"Internet access in the classroom is required")," because attendees will download additional software packages and material from github.com as part of the class. This can be confirmed by following these steps."),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Visit"),": ",(0,r.kt)("a",{parentName:"li",href:"https://github.com/facebook/react/"},"https://github.com/facebook/react/")),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("strong",{parentName:"li"},"Verify")," the ",(0,r.kt)("strong",{parentName:"li"},"page")," ",(0,r.kt)("strong",{parentName:"li"},"loads")," successfully on your company's network.\ns"))),(0,r.kt)("li",{parentName:"ol"},(0,r.kt)("p",{parentName:"li"},"You will need to have ",(0,r.kt)("strong",{parentName:"p"},"Git")," installed. To verify it is installed open a terminal or command-prompt and run the command:"),(0,r.kt)("pre",{parentName:"li"},(0,r.kt)("code",{parentName:"pre"},"git --version\n")),(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"Any version should work."),(0,r.kt)("li",{parentName:"ul"},"Here is a link to a ",(0,r.kt)("a",{parentName:"li",href:"https://git-scm.com/book/en/v2/Getting-Started-Installing-Git"},"page describing the process for installing git")," if you need to install it.")))),(0,r.kt)("hr",null),(0,r.kt)("h4",{id:"-you-have-completed-the-computer-setup"},"\u2714","\xa0","\xa0"," You have completed the computer setup."),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("ul",{parentName:"admonition"},(0,r.kt)("li",{parentName:"ul"},"If you need to configure npm to use a corporate proxy server the following article may be helpful but it will likely be more helpful to ask a co-worker that has already done it within your organization.",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://medium.com/@ogbemudiatimothy/using-npm-install-behind-a-corporate-proxy-server-db150c128899"},"Using NPM Install Behi

1nd A Corporate Proxy Server\n"),"\n:::")))),(0,r.kt)("hr",{parentName:"admonition"})))}u.isMDXComponent=!0}}]);