How to Create Your First React App

How to Create Your First React App

This post tells three quick steps to create your first react app

Step-1 : Install node and choose the version 8 or greater 

London:~ esumit$ nvm list

->       v6.0.0

        v11.7.0

         system

default -> v6.0.0

node -> stable (-> v11.7.0) (default)

stable -> 11.7 (-> v11.7.0) (default)

iojs -> N/A (default)

lts/* -> lts/dubnium (-> N/A)

lts/argon -> v4.9.1 (-> N/A)

lts/boron -> v6.16.0 (-> N/A)

lts/carbon -> v8.15.0 (-> N/A)

lts/dubnium -> v10.15.0 (-> N/A)

London:~ esumit$ nvm use v11.7.0

Now using node v11.7.0 (npm v6.5.0)

Step-2 : Execute below npx command to create the app 

NPX: Execute binaries from npm packages.

London:ReactSumit esumit$ npx create-react-app sumit-app

npx: installed 63 in 2.935s

Creating a new React app in /Users/esumit/Documents/ReactSumit/sumit-app.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts

yarn add v1.13.0

[1/4] 🔍  Resolving packages…

[2/4] 🚚  Fetching packages…

[3/4] 🔗  Linking dependencies…

warning “react-scripts > pnp-webpack-plugin > ts-pnp@1.0.0” has unmet peer dependency “typescript@*”.

[4/4] 🔨  Building fresh packages…

success Saved lockfile.

success Saved 4 new dependencies.

info Direct dependencies

├─ react-dom@16.8.3

├─ react-scripts@2.1.5

└─ react@16.8.3

info All dependencies

├─ react-dev-utils@7.0.3

├─ react-dom@16.8.3

├─ react-scripts@2.1.5

└─ react@16.8.3

  Done in 25.95s.

Initialized a git repository.

Success! Created sumit-app at /Users/esumit/Documents/ReactSumit/sumit-app

Inside that directory, you can run several commands:

  yarn start

    Starts the development server.

  yarn build

    Bundles the app into static files for production.

  yarn test

    Starts the test runner.

  yarn 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 sumit-app

  yarn start

Happy hacking!

London:ReactSumit esumit$

 

Step-3: Go to cd sumit-app and npm Start 

Woala :

 

Code in Editors:

 

 

Push Code to Github 

#1

London:sumit-app esumit$ git init
Reinitialized existing Git repository in /Users/esumit/Documents/ReactSumit/sumit-app/.git/
London:sumit-app esumit$ git status
On branch master
Changes not staged for commit:
(use “git add <file>…” to update what will be committed)
(use “git checkout — <file>…” to discard changes in working directory)

modified: src/App.js

Untracked files:
(use “git add <file>…” to include in what will be committed)

.idea/

no changes added to commit (use “git add” and/or “git commit -a”)

#2

London:sumit-app esumit$ git remote add ReactResearch https://github.com/esumit/ReactResearch.git

#3
London:sumit-app esumit$ git remote add origin https://github.com/esumit/ReactResearch.git

#4

London:sumit-app esumit$ git push –set-upstream origin master

Counting objects: 18, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (18/18), done.
Writing objects: 100% (18/18), 165.46 KiB | 0 bytes/s, done.
Total 18 (delta 0), reused 0 (delta 0)
To https://github.com/esumit/ReactResearch.git
* [new branch] master -> master
Branch master set up to track remote branch master from origin.
London:sumit-app esumit$

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s