Thursday, October 26, 2023

Intall React-JS dengan server Node-JS di Windows

1. Download installer node.js. Node JS adalah virtual environment untuk framework lain, termasuk React. 

2. Lalu install sampai selesai.Buatlah folder baru untuk install react. Contohnya di D:\React-JS folder instalasi react js

3. jalankan CMD

Microsoft Windows [Version 10.0.17134.1304]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\fuad hasan>e:

E:\>cd React-JS

E:\React-JS>npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages in 19s

5 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New patch version of npm available! 10.2.0 -> 10.2.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.1
npm notice Run npm install -g npm@10.2.1 to update!
npm notice

E:\React-JS>npm install -g npm@10.2.1

added 1 package in 28s

29 packages are looking for funding
  run `npm fund` for details

Microsoft Windows [Version 10.0.17134.1304]
(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\fuad hasan>e:

E:\>cd React-JS

E:\React-JS>npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages in 19s

5 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New patch version of npm available! 10.2.0 -> 10.2.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.1
npm notice Run npm install -g npm@10.2.1 to update!
npm notice

E:\React-JS>npm install -g npm@10.2.1

added 1 package in 28s

29 packages are looking for funding
  run `npm fund` for details

E:\React-JS>npm fund
React-JS


E:\React-JS>create-react-app web-react

Creating a new React app in E:\React-JS\web-react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1462 packages in 18m

242 packages are looking for funding
  run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    at tryGitInit (E:\React-JS\web-react\node_modules\react-scripts\scripts\init.js:46:5)
    at module.exports (E:\React-JS\web-react\node_modules\react-scripts\scripts\init.js:276:7)
    at [eval]:3:14
    at runScriptInThisContext (node:internal/vm:144:10)
    at node:internal/process/execution:109:14
    at [eval]-wrapper:6:24
    at runScript (node:internal/process/execution:92:62) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 5492,
  stdout: null,
  stderr: null
}

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 1m

246 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1531 packages in 9s

246 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created web-react at E:\React-JS\web-react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd web-react
  npm start

Happy hacking!


E:\React-JS>cd web-react

E:\React-JS\web-react>npm start

> web-react@0.1.0 start
> react-scripts start

(node:8792) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:8792) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!

You can now view web-react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.43.13:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

React-JS



No comments:

Post a Comment