DEV Community

Ranjani R
Ranjani R

Posted on

INSTALLING NODE.JS

#react #webdev #javascript

Today i am going to tell the steps involved in installing Node.js

Node.js is a free, open-source, cross-platform JavaScript runtime environment that lets you run JavaScript outside the browser—primarily on servers.

Here are the steps involved in downloading and installing:

  • Go to the official Node.js download page - https://nodejs.org/en/download
  • Choose the LTS version (Long-Term Support) for stability.
  • Download the .msi installer for Windows (32-bit or 64-bit depending on our system).
  • Double-click the downloaded .msi file.
    • Follow the setup wizard:
    • Accept the license agreement.
    • Use the default installation settings.
    • Ensure npm (Node Package Manager) is selected for installation.
  • Click Install and wait for the process to finish.
  • Click Finish when done.

Now in order to check if it has been installed correctly, open command prompt/powershell and type in the following command and press enter:
node -v
npm -v

It should display the version of node.js and npm installed. Once installed we need to create our very own REACT app.

1.Open Visual Studio and create a local folder with any name of your choice. Once created ,right click on the folder name and select Open in Integrated Terminal which will then open the terminal in your VS code and the path to your folder will be displayed.

2.Type in the command npx create-react-app folder name and press Enter. Note that the folder name should be only in small letters and no space. Once you press enter the you will be asked a question:
_
Need to install the following packages:
create-react-app@5.1.0
Ok to proceed? (y) y_

Enter y and a new React app will start creating.....it might take sometime depending upon the network speed and RAM memory (typically 5-8mins).

3.Once the app is created we need to start the server. To do this type in npm start to start the server.

3.Once the app is created it will be visible under your folder structure. It will contain many folders and I will explain what each folder means and contains. The following will be the folder structure once the app is successfully created:

my-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ ├── index.css
│ └── ...
├── .gitignore
├── package.json
├── README.md

  1. node_modules:
    • Contains all installed dependencies from npm.
    • We don’t edit this manually.
    • Automatically generated when we run npm install.

2.public:

  • Holds static files that don’t go through Webpack.
  • Key files:
  • index.html: The single HTML file React injects into.
  • favicon.ico, manifest.json: Icons and metadata for our page.
  • We can add images, fonts, or other assets here if we want them served directly.

3.src:

  • The heart of our React app—where all our code lives.
  • Key files:
  • index.js: Entry point. Renders into index.html.
  • App.js: Root component. You build our UI from here.
  • App.css, index.css: Styles for our components.

4.gitignore:

  • Tells Git which files/folders to ignore (e.g., node_modules).
  1. package.json:
    • Lists dependencies, scripts, and metadata.
    • We can run commands like npm start, npm build from here.

6.README.md:

  • Documentation for our project. Helpful for collaborators or future us!.

These are the steps involved in installing and creating React app.

Top comments (0)