Trying to use SPFX + React. Error “yo : The term 'yo' is not recognized as the name of a cmdlet”

Question

I want to build my first SPFX React web part, so i am following this article:-

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/use-fabric-react-components

first step i want to install the @microsoft/generator-sharepoint, so i open my sharepoint online management shell, and i run this command , as follow:-

PS C:\> npm i @microsoft/generator-sharepoint

> spawn-sync@1.0.15 postinstall C:\node_modules\spawn-sync
> node postinstall

i got these warning :-

then i want to create a new web part by running the Yeoman SharePoint generator, so i run this command:-

yo @microsoft/sharepoint

but i got this error:-

PS C:\documentcardexample-webpart> yo @microsoft/sharepoint
yo : The term 'yo' is not recognized as the name of a cmdlet, function, script
file, or operable program. Check the spelling of the name, or if a path was
included, verify that the path is correct and try again.
At line:1 char:1
+ yo @microsoft/sharepoint
+ ~~
    + CategoryInfo          : ObjectNotFound: (yo:String) [], CommandNotFoundE
   xception
    + FullyQualifiedErrorId : CommandNotFoundException

so can anyone advice why i am unable to create my web part?

EDIT

I run this command:-

PS C:\windows\system32> npm install -g yo gulp

but i got this result that the yo version is outdated:-

npm WARN invalid config proxy="http://:/"
npm WARN invalid config Must be a full url with 'http://'
npm WARN invalid config proxy="http://:/"
npm WARN invalid config Must be a full url with 'http://'
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, follo
wing the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for comp
atibility with current and future versions of Node.js
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher
 to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher
 to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compa
tibility with current and future versions of Node.js
C:\Users\****\AppData\Roaming\npm\gulp -> C:\Users\****\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js
C:\Users\****\AppData\Roaming\npm\yo -> C:\Users\****\AppData\Roaming\npm\node_modules\yo\lib\cli.js
C:\Users\****\AppData\Roaming\npm\yo-complete -> C:\Users\****\AppData\Roaming\npm\node_modules\yo\lib\completion\in
dex.js

> yo@2.0.5 postinstall C:\Users\****\AppData\Roaming\npm\n
ode_modules\yo
> yodoctor


Yeoman Doctor
Running sanity checks on your system

V Global configuration file is valid
V NODE_PATH matches the npm root
V Node.js version
V No .bowerrc file in home directory
V No .yo-rc.json file in home directory
V npm version
× yo version

Your yo version is outdated.

Upgrade to the latest version by running:
npm install -g yo@latest


Found potential issues on your machine :(
+ gulp@3.9.1
+ yo@2.0.5
updated 2 packages in 50.326s

so i run this command, as per the above error message:-

PS C:\windows\system32> npm install -g yo@latest

but i got this error:-

npm WARN invalid config proxy="http://:/"
npm WARN invalid config Must be a full url with 'http://'
npm WARN invalid config proxy="http://:/"
npm WARN invalid config Must be a full url with 'http://'
C:\Users\****\AppData\Roaming\npm\yo -> C:\Users\***\AppData\Roaming               npm\node_modules\yo\lib\cli.js
C:\Users\****\AppData\Roaming\npm\yo-complete -> C:\Users\
****\AppData\Roaming\npm\node_modules\yo\lib\completion\in
dex.js

> yo@2.0.5 postinstall C:\Users\****\AppData\Roaming\npm\n
ode_modules\yo
> yodoctor


Yeoman Doctor
Running sanity checks on your system

V Global configuration file is valid
V NODE_PATH matches the npm root
V Node.js version
V No .bowerrc file in home directory
V No .yo-rc.json file in home directory
V npm version
× yo version

Your yo version is outdated.

Upgrade to the latest version by running:
npm install -g yo@latest


Found potential issues on your machine :(
+ yo@2.0.5
updated 1 package in 9.169s

Answer 1

It seems like you don't have correct config proxy url. Please try to set the proxy url by using the following command. It may help you to resolve the issue.

npm config set https-proxy "full proxy url"
npm config set proxy "same url"
npm config set strict-ssl false

To check the current config list use the below command.

npm config list

Answer 2

You need to run npm install -g yo gulp to install yo and gulp from global first so that you can have yo and gulp command ready. Please reference Set up your SharePoint Framework development environment for detail