Scribd
Upload
57 views4 pages

Create React App: NPM vs NPX Guide

There are two main ways to create a React app: 1. Using npm by installing create-react-app globally and then using it to generate a project. 2. Using npx to directly create a React app without needing to install create-react-app. Both methods will generate a project folder structure that includes a node_modules folder containing React code, public folder for the website structure, and src folder for application code including an index.js and App.jsx file. The index.js acts as the root file and App.jsx contains component code.

Uploaded by

Lovekush Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views4 pages

Create React App: NPM vs NPX Guide

There are two main ways to create a React app: 1. Using npm by installing create-react-app globally and then using it to generate a project. 2. Using npx to directly create a React app without needing to install create-react-app. Both methods will generate a project folder structure that includes a node_modules folder containing React code, public folder for the website structure, and src folder for application code including an index.js and App.jsx file. The index.js acts as the root file and App.jsx contains component code.

Uploaded by

Lovekush Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

WAYS TO CREATE REACT APP:

1st way using npm :


 Install the package globally
npm install create-react-app -g

Here -g represents we are installing globally.

 Create project

create-react-app proj_name

 In npm we install create-react-app globally and then we use package to


generate the project.
 After installation we are creating the project.

2nd way using npx :


 Directly creating react app without installation.
npx create-react-app proj_name

 npx it is a npm package runner it get installed when we installed the node.
 Here we are directly running react app without installing it.

create-react-app :
 It is a tool to create react applications.
npm (node package manager) :
 It is a library and registery for JS software.

npx (node package execute) :


 It is npm package runner.
Steps to follow for installation
 Download and install node.js
 cmd
 node -v
 Create a new folder in the desktop
 Open cmd in the folder which you have created
 npx create-react-app proj_name
 Happy Hacking
 cd proj_name
 code .
 npm start

Folder structure of ReactJS


After successful installation of reactjs app we will be getting default folder and
files.
1) node_modules :
 It is a folder there all the predefined codes of react will be present.
 Warning (do not touch this folder)
2) public :
 This folder contains the main structure of the web page.
 The only important file we have to maintain is “index.html”
3) src :
 It is a source folder where we are writing the code
 The 2 important file we have to maintain
 index.js (it is consider as aroot file)
 App.jsx(it is a Component)

4) package-lock.json & package.json:


 These to files are considered as directories of react folder which
contain some information
React Project SetUp :
 Delete the existing src folder and create our own src folder
 In src we have to maintain two important files.
1) index.js : It is a file acts as a connector or root between index.html and index.js
2) App.jsx: It is a component where we will be writing our own code to execute

Libraries needed for ReactJS :


1)react : The ‘react’ library provides fundamental tool and components needed
to build react app.
2) react-dom :
 The ‘react-dom’ library responsible for rendering React components in
the UI.
 createRoot( ) inside this method we need to target the <div id=”root”>
</div> present inside index.html
 render() method used to render the content on UI. Inside this method we
can pass either normal string, JSX, component.

index.js

You might also like