Create React app on the mac

By igor.khromov, June 6, 2020

1. Install npm

1.1. Go to https://nodejs.org/en/download/

1.2. Download macOS Installer

1.3. Run installer.

2. Create react app with npx

npx is a tool intended to help round out the experience of using packages from the npm registry — the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry.
Source: https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b

Oficial create-react-app tool doc: https://github.com/facebook/create-react-app.

2.1. Run create command

npx create-react-app test-app

!!! Do not forget to change test-app to your specific app name.

The app will be created in test-app folder.

The output on mac:

usr@pro test-react-app % npx create-react-app test-app
npx: installed 98 in 6.89s

Creating a new React app in /Users/usr/test-app.

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


> fsevents@1.2.13 install /Users/usr/test-app/node_modules/jest-haste-map/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/usr/test-app/node_modules/watchpack-chokidar2/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.13 install /Users/usr/test-app/node_modules/webpack-dev-server/node_modules/fsevents
> node install.js

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> core-js@2.6.11 postinstall /Users/usr/test-app/node_modules/babel-runtime/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js@3.6.5 postinstall /Users/usr/test-app/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"


> core-js-pure@3.6.5 postinstall /Users/usr/test-app/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

+ cra-template@1.0.3
+ react-scripts@3.4.1
+ react@16.13.1
+ react-dom@16.13.1
added 1609 packages from 761 contributors and audited 1609 packages in 89.627s

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

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

+ @testing-library/jest-dom@4.2.4
+ @testing-library/user-event@7.2.1
+ @testing-library/react@9.5.0
added 36 packages from 57 contributors and audited 1645 packages in 10.473s

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

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
Removing template package using npm...

npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

removed 1 package and audited 1644 packages in 6.851s

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

found 1 low severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Created git commit.

Success! Created test-app at /Users/usr/test-react-app/test-app
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 test-app
  npm start

Happy hacking!

2.2. Check app folder content:

cd test-app

ls -la

You will see something like this:

drwxr-xr-x    10 usr  staff     320 Jun 25 18:29 .
drwxr-xr-x     3 usr  staff      96 Jun 25 18:27 ..
drwxr-xr-x    12 usr  staff     384 Jun 25 18:29 .git
-rw-r--r--     1 usr  staff     310 Jun 25 18:29 .gitignore
-rw-r--r--     1 usr  staff    2891 Jun 25 18:29 README.md
drwxr-xr-x  1033 usr  staff   33056 Jun 25 18:29 node_modules
-rw-r--r--     1 usr  staff  573847 Jun 25 18:29 package-lock.json
-rw-r--r--     1 usr  staff     744 Jun 25 18:29 package.json
drwxr-xr-x     8 usr  staff     256 Jun 25 18:29 public
drwxr-xr-x    10 usr  staff     320 Jun 25 18:29 src

3. Run application

3.1. It’s pretty easy to run an app. You should be aware that it will run its own application server by default on port 3000:

npm start

You should see the app starting like this:

Compiled successfully!

You can now view test-app in the browser.

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

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

The app will run on the default port with is 3000: http://localhost:3000

GOOD LUCK TP YUOR NEW PROJECT!!!