In this lecture we will understand what is npm and how to create your first react application. in the previous lecture we had learned how to download node JS in your local computer. now we will understand what is npm and how to use it to create react application.
When you install node JS npm is automatically install in your system.
npm is the package manager for JavaScript and the world’s largest software registry. It is use to Discover packages of reusable code.
npm consists of three distinct components:
the website
the Command Line Interface (CLI)
the registry
Use the website to discover packages, set up profiles, and manage other aspects of your npm experience.
The CLI runs from a terminal, and is how most developers interact with npm.
The registry is a large public database of JavaScript software and the meta-information surrounding it.
Now let’s understand what is the use of npm.
Adapt packages of code for your apps, or incorporate packages as they are.
Download standalone tools you can use right away.
Run packages without downloading using npx.
Share code with any npm user, anywhere.
Restrict code to specific developers.
Create Orgs (organizations) to coordinate package maintenance, coding, and developers.
Manage multiple versions of code and code dependencies.
Update applications easily when underlying code is updated.
Discover multiple ways to solve the same puzzle.
Find other developers who are working on similar problems and projects.
Not understand how most of the developer use npm to install packages in their application.
using cli component of npm you can install any packages from the repository.
To install any packages in your application you need to say a command.
Npm install packageName
But before you execute this command make sure you install the latest version of npm in your system to check that you just need to type.
Npm -v
this command will return the npm version on the console And you know that node JS is installed in your computer.
after you get your version you wanted to create react application using this command.
You can also install package using npx command.
npx is identical to the npm command.
we will talk about the difference in npm and npx in the future tutorials.
to use npx in the command you need to have a higher version of node JS.
npx comes with npm 5.2+ and higher
It is really beneficial to use npx other than using npm.
so to check npx is working or not I will just say.
Npx -v
so you will get npm version on the console right.
Now let’s create react application using npm cli
Make sure you have internet connection to install this packages from the npm repository.
First in order to create react application you need to install globally create react app npm package.
npm install -g create-react-app
-g is the global install flag,The -g or --global argument will cause npm to install the package globally rather than locally.
And just specify the package name so I will say create react app here.
And press enter.
This will take some time to install this package globally.
Setting up the tools to develop a React application can be intimidating and time-consuming. There are a lot of moving parts. For example, setting up Babel to transpile JSX into browser-ready code and linking react and reactdom library to the document.
Create React App is a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration.
Now that we have the CLI installed globally, we can create our first React application:
To create your first react application you just need to say command
npx create-react-app my-app
this command will create your first react application.
Create React App provides a modern build setup for your React apps in no time. To get started, you’ll need to install Create React App globally.
You can create a new React project with the command create-react-app, followed by the name of your project. In my case we used npx create-react-app my-app.
Now when you have ready react application is ready you need to execute this on the browser to do that you have a simple npm command.
Npm start
npm start starts the development server and auto-reloads the page any time you make edits
Starting the server (npm start) automatically launches the app in the browser on localhost:3000.
So this is your default react app created using the npm.
Subscribe: https://www.youtube.com/channel/UCrG2Z0usOCCdUTAr4D1A8mw
#react #node
