React class type is available

Published Jun 29 2021 09:00 AM 701 Views
Microsoft

React class type is available 

React is a popular JavaScript library for building user interfaces (UI). It is a declarative way to create reusable components for your website. Learn how to create a lab that uses React and some popular JavaScript libraries Redux and  JSX.  We describe how to install NodeJS, which is a convenient way to run a web server for your React application. 

 

We created two example classes so you could use the operating system of your choice. 

 

The React Development on Windows class type shows how to install Visual Studio 2019 for your development environment.  The article includes: 

  • Lab Account settings needed to use Visual Studio 2019 marketplace image. 
  • Recommended lab settings. 
  • How to install debugger extensions for your browser. 
  • How to allow teacher to view student’s website. 
  • Example costing for the class. 

The React Development on Linux class type shows how to install Visual Studio Code for your development environment.  The article includes: 

  • Recommended lab settings. 
  • How to install Visual Studio Code and needed extensions. 
  • How to install debugger extensions for your browser 
  • How to allow teacher to view student’s website. 
  • Example costing for the class. 

 

Thanks, 

Azure Lab Services Team 

%3CLINGO-SUB%20id%3D%22lingo-sub-2493713%22%20slang%3D%22en-US%22%3EReact%20class%20type%20is%26nbsp%3Bavailable%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2493713%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EReact%20class%20type%20is%26nbsp%3Bavailable%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233279%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Freactjs.org%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EReact%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%E2%80%AFis%20a%20popular%20JavaScript%20library%20for%20building%20user%20interfaces%20(UI).%26nbsp%3BIt%26nbsp%3Bis%20a%20declarative%20way%20to%20create%20reusable%20components%20for%20your%20website.%26nbsp%3BLearn%20how%20to%20create%20a%20lab%20that%20uses%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Freactjs.org%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EReact%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Band%20some%26nbsp%3Bpopular%20JavaScript%20libraries%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fredux.js.org%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ERedux%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Band%26nbsp%3B%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Freactjs.org%2Fdocs%2Fintroducing-jsx.html%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EJSX%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%26nbsp%3B%26nbsp%3BWe%26nbsp%3Bdescribe%26nbsp%3Bhow%20to%26nbsp%3Binstall%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fnodejs.org%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ENodeJS%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%2C%20which%E2%80%AFis%20a%20convenient%20way%20to%20run%20a%20web%20server%20for%20your%20React%20application.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-ccp-props%3D%22%7B%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22none%22%3EWe%20created%20two%20example%20classes%20so%20you%20could%20use%20the%20operating%20system%20of%20your%20choice.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22none%22%3EThe%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Flab-services%2Fclass-type-react-windows%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EReact%20Development%20on%20Windows%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22none%22%3E%26nbsp%3Bclass%20type%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3Eshows%26nbsp%3Bhow%20to%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3Einstall%E2%80%AF%3CA%20href%3D%22https%3A%2F%2Fvisualstudio.microsoft.com%2Fvs%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EVisual%20Studio%202019%3C%2FA%3E%E2%80%AFfor%20your%20development%20environment.%26nbsp%3B%20The%20article%20includes%3A%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%221%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ELab%20Account%20settings%20needed%26nbsp%3Bto%20use%20Visual%20Studio%202019%20marketplace%26nbsp%3Bimage.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CUL%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%221%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ERecommended%20lab%20settings.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%222%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EHow%20to%20install%20debugger%20extensions%20for%20your%20browser.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%223%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EHow%20to%20allow%20teacher%20to%20view%20student%E2%80%99s%20website.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%224%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EExample%20costing%20for%20the%26nbsp%3Bclass.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22none%22%3EThe%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fazure%2Flab-services%2Fclass-type-react-linux%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EReact%20Development%20on%20Linux%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22none%22%3E%26nbsp%3Bclass%20type%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3Eshows%3C%2FSPAN%3E%3CSPAN%20data-contrast%3D%22none%22%3E%26nbsp%3Bhow%20to%20install%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fcode.visualstudio.com%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EVisual%20Studio%20Code%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22none%22%3E%E2%80%AFfor%20your%20development%20environment.%26nbsp%3B%20The%20article%20includes%3A%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%221%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ERecommended%20lab%20settings.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%222%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EHow%20to%20install%20Visual%20Studio%20Code%20and%20needed%20extensions.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%223%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EHow%20to%20install%20debugger%20extensions%20for%20your%20browser%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%224%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EHow%20to%20allow%20teacher%20to%20view%20student%E2%80%99s%20website.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3CLI%20data-leveltext%3D%22%EF%82%B7%22%20data-font%3D%22Symbol%22%20data-listid%3D%222%22%20aria-setsize%3D%22-1%22%20data-aria-posinset%3D%225%22%20data-aria-level%3D%221%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EExample%20costing%20for%20the%26nbsp%3Bclass.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%26quot%3B134233117%26quot%3B%3Atrue%2C%26quot%3B134233118%26quot%3B%3Atrue%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EThanks%2C%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20data-contrast%3D%22auto%22%3EAzure%20Lab%20Services%20Team%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2493713%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Freactjs.org%2F%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EReact%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%E2%80%AFis%20a%20popular%20JavaScript%20library%20for%20building%20user%20interfaces%20(UI).%26nbsp%3BIt%26nbsp%3Bis%20a%20declarative%20way%20to%20create%20reusable%20components%20for%20your%20website.%26nbsp%3BLearn%20how%20to%20create%20a%20lab%20that%20uses%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Freactjs.org%2F%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EReact%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Band%20some%26nbsp%3Bpopular%20JavaScript%20libraries%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fredux.js.org%2F%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ERedux%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%26nbsp%3Band%26nbsp%3B%E2%80%AF%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Freactjs.org%2Fdocs%2Fintroducing-jsx.html%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CSPAN%20data-contrast%3D%22none%22%3EJSX%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E.%26nbsp%3B%26nbsp%3BWe%26nbsp%3Bdescribe%26nbsp%3Bhow%20to%26nbsp%3Binstall%26nbsp%3B%3C%2FSPAN%3E%3CA%20href%3D%22https%3A%2F%2Fnodejs.org%2F%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%20target%3D%22_blank%22%3E%3CSPAN%20data-contrast%3D%22none%22%3ENodeJS%3C%2FSPAN%3E%3C%2FA%3E%3CSPAN%20data-contrast%3D%22auto%22%3E%2C%20which%E2%80%AFis%20a%20convenient%20way%20to%20run%20a%20web%20server%20for%20your%20React%20application.%3C%2FSPAN%3E%3CSPAN%20data-ccp-props%3D%22%7B%7D%22%3E%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2493713%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELab%20Services%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Jun 29 2021 09:00 AM
Updated by: