How to start with Sitecore JSS using react framework ?

Hope you are already aware of the basics of Sitecore JSS and react as well. Here in this article, we are going to 

• Setup Sitecore JSS app with React framework
• Connect/Map JSS app with Existing Sitecore Instance
• Deploy JSS App to Existing Sitecore Instance

NOTE: I did a setup with Sitecore 10.2, but you can choose as per your need.

The steps are as below

• Sitecore 10.2 setup - without SXA [ex: sc.dev.local]
• Sitecore PowerShell extension 6.3
• install Sitecore package by clicking JSS compatible module 
• create JSS key in masterdb /sitecore/system/Settings/Services/API Keys/
• goto Repo location (where wanted to create Sitecore JSS Application)
• install jss cli by cmd/powershell as admin and run below command
• >npm install -g @sitecore-jss/sitecore-jss-cli
• To create Sitecore JSS app using react framework run below command
• >jss create jssapp react
• >jss start [to check it's working]
• add new site binding dev.local instance as jssapp (HTTP) and make host entry in C:\Windows\System32\drivers\etc
• run and check http://jssapp/
• run command >"jss setup" and add details as requested
• please verify hostname from JSSAppLocation/sitecore/config/jssapp.config
• run command >"jss deploy config" [To deploy Sitecore JSS Application config to Sitecore instance]
• run command >"jss deploy app -c -d" [To deploy everything from Sitecore JSS Application to Sitecore instance]
• verify again "http://jssapp" [To verify JSS application changes on hosted Sitecore instance]

Hope this will help you to set up quick with the Existing Sitecore instance.

All about Package.json ?

Usually, when we are going to start development with any Javascript Framework related project, Package.json is the first step to know all about. And today we will know all about Package.json

What is Package.json?

It's a plain JSON file
Kind of manifest for the project
Help others to easily use, manage and install dependencies
List packages on which project depends on
Packages are in ranges or the specific version
File must contain packages in "name" and "version" format
Used to give information to npm that allows it to identify the project
And help to handle the project's dependencies
Also contain other metadata such as license, distribution, configuration data
Also recommended to put DevDependencies, which makes dev life smooth by fast development

Package.json contains?

All the information are listed in ascending order as below:

name
 sets the application/package name
version
indicates the current version
description 
is a brief description of the app/package
main
set the entry point for the application
private
if set to true prevents the app/package to be accidentally published on npm
scripts
defines a set of node scripts you can run
dependencies
 sets a list of npm packages installed as dependencies
devDependencies
 sets a list of npm packages installed as development dependencies
engines
sets which versions of Node this package/app works on
browserslist
is used to tell which browsers (and their versions) you want to support


Role of package.json?

Whenever user run "npm install" command on root level, all the dependencies related to project which is listed in Package.json will be installed.
and put all dependencies to "node_modules" directory