How to Create React Application Using Npm Command


Creating a react application is very easy. You just need to write some commands and npm will automatically build the react app for you. but what is npm? Npm is a node package manager which allows us to install node packages in the application. We use npm commands using the command line. To work with the node you need to install node.js in the application.

react application

Just install node.js in the system and get started.

What is Npm?

When you install node JS npm is automatically installed in your system. npm is the package manager for JavaScript and the world’s largest software registry. It is used 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.

 

So if you 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 <package>

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.

Open a command line and type this command to check if the node is installed or not.

Npm 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.

So You can also install the 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.

Well, Using this command you can check npx version.

Create-react-app

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.

To install react package globally we used -g with npm install command. using create-react-app we will install the boilerplate of the react application. You are free to install it locally but you actually always need to execute this command before you create any react application. So it is very beneficial to install react globally.

-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.

So this command will Set up the tools to develop a React application There are a lot of moving parts. For example, setting up Babel to transpile JSX into the 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

or

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.

Run React 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 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:3000So this is your default react app created using the npm. it is very simple to create react application using npm. it only takes a few minutes to setup react application.

React File Structure

So Now let’s understand react file structure.

file structure

node_module

When you expand you’re react application the first folder you will see is node module. This folder will put various things on your computer. All packages are dropped in node module folder. you can access any packages from this folder using import keyword. we already learned how to create a package you can say create a module and import that found in the JavaScript file the same mechanism is used here.

if you wanted to import any package you just say import package name and the location where you want to import that package. The node_modules/ directory is where all of the dependencies get built/stored.

If you expand node module folder you will get plenty of packages installed in your application.

public

Just after that you will see public folder. in this folder we have 3 files. This fevicon the icon file then we have index.htm file and then we have minifest.json file.

The first favicon file is used to the icon that shows up in your browser’s address bar and is used as the icon for bookmarks. In the public folder you have main index.htm file. index.html is the main HTML file that includes your React code and application and provides a context for React to render to. Specifically, it includes a div that your react app will show up inside.

The <div id=”root”> bit is the important part: this is where your react application gets rendered in your browser!

Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension’s functionality, such as background scripts, content scripts, and browser actions.

src

Just below that we have source folder.The important directory for us as developers is the src/ directory. This stores all of our modifiable code. In this folder you will find index.js file. index.js stores our main Render call from ReactDOM. It imports our App.js component that we start off with and tells React where to render it.  then we have index.css for stores the base styling for our application.

Then we have app.js file. App.js is a sample React component called “App” that we get for free when creating a new app. We’ll actually be deleting the entire contents of the file and starting over!

Then we have app.css file to styling your targeting component.

App.test.js is our first set of tests to run against our sample App component that we start off with. logo.svg is just the React logo Which you will see when we start the default react application server.

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. Basic use of this file is to include features like push notifications and background sync.

Then we have gitignore file which used to see every file in your working copy as one of three things to track a file, to untrack the file and to ignore the file which git has been explicitly told to ignore.

package-lock.json

package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated.

readme file for your application. and this is the package.json file which we will describe just right now. Next, we have our package.json file. This is what stores the lists of dependencies for your application, as well as what describes your application (the name, the version number, etc).

package.json

Every react application need to have a package.json file. Package.json file used to describe your application.  it describes your application name version and if you want you can describe the application description as well. 

Along with that the package.json file lists the packages your project depends on, pecifies versions of a package that your project can use, and makes your build reproducible, and therefore easier to share with other developers.

In package.json file  two fields are required.

name and version.

the name field represent your application name. Name field must be lowercase and one word, and may contain hyphens and underscores.  The version field represent the version of your application. The “version” field must be in the semantic version form x.x.x.

In this file you will find dependencies. Well, the dependencies property takes an object that has the name and version at which each dependency should be used. This object represent the module which we are depends on. so we are depending on react and react script models. you can find these modules in node module folder.

Then we have script section where all the script used in the application names and version are specified. And here we have And here we have ESLint configuration file.

So the config is to share target browsers and Node.js versions between different front-end tools.

That’s it. I hope you understand what is react and react file structure. So I will see you in the next one.

 

Leave a Reply

Your email address will not be published. Required fields are marked *