How to run create-react-app project & hello world in VS Code

Prerequisites : Microsoft Visual Studio Code 

Create a react app 

1. First create a react app in the visual studio code. 

npx create-react-app .






Though I tried to fix the vulnerabilities using "npm audit fix --force", I keep getting the vulnerabilities. So, I've done the following:

1. First add a field resolution with the dependency version you want to fix your package.json 

"resolutions": {

  "hoek": "4.2.1"

}

Check the latest version here. 

{
"name": "animatic_reversible_sorting",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^2.1.3"
},
"resolutions": {
"hoek": "4.2.1"
}
}

 2. Run the following: 

rm -r node_modules
npx npm-force-resolutions
npm install

Again this led to the same vulnerabilities, so I had to uninstall the global installation of create-react-app

Shirleys-MacBook-Air:animatic_reversible_sorting shirley$ which create-react-app
/usr/local/bin/create-react-app
Shirleys-MacBook-Air:animatic_reversible_sorting shirley$ sudo rm -rf /usr/local/bin/create-react-app
Password:
Shirleys-MacBook-Air:animatic_reversible_sorting shirley$ 

I  deleted the created files in the folder 'animatic_reversible_sorting' and reran the npx create-react-app, it worked. 

Shirleys-MacBook-Air:animatic_reversible_sorting shirley$ npx create-react-app .
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in /Users/shirley/Documents/Project/animatic_reversible_sorting.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

added 1384 packages in 9s
192 packages are looking for funding
  run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
added 52 packages in 6s
192 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...

removed 1 package, and audited 1436 packages in 1s
192 packages are looking for funding
  run `npm fund` for details
6 high severity vulnerabilities
To address all issues (including breaking changes), run:
  npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created animatic_reversible_sorting at /Users/shirley/Documents/Project/animatic_reversible_sorting
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 /Users/shirley/Documents/Project/animatic_reversible_sorting
  npm start
Happy hacking!
Shirleys-MacBook-Air:animatic_reversible_sorting shirley$ 

If you don't see the following files in the explorer, wait for some time. If those don't appear, start fresh installation. 



Run the Project

Execute "npm start" on the terminal and you will see the following.

"npm start" is the shortcut for  "npm run start" with the definition at package.json

"start": "react-scripts start"


Automatically browser window will open and you will see the react logo running. 



If you see this, the react project is successfully installed. 

The package.json defines a bunch of scripts which define the actual flow.





"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},



The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:

  • npm run start
  • npm run build

The grey boxes are commands which can be executed from the command line.

So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.

Stop the project 


To stop it, press ctrl+c in the terminal window of the Visual studio code. 

Just leaving the server and making the code changes is okay. It is not always mandatory to stop the server by pressing 'ctrl+c'. 

When the files are saved, the code will be automatically compiled and the browser is refreshed. 

Hello world Program

After successfully launching the react project, certain pruning is needed to run the "Hello world" program

app.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;


Modify app.js as below


import './App.css';

function App() {
  return (
    <div className="App">
    <h1> Hello World </h1>
    </div>
  );
}

export default App;


Delete the logo.svg, setupTests.js, App.test.js. Now the code is clean & clear. 

If you run the program, it will give the following output. 


How to find the Javascript version of your program?

Click on this link to see which version your BROWSER is using: http://jsfiddle.net/Ac6CT/

You should be able filter by using script tags to each JS version.

References:

SO link1 - vulnerability issues

SO link2 - npm start command


Comments

Post a Comment