DEV Community

Cover image for React Introduction
Karthick (k)
Karthick (k)

Posted on

React Introduction

ReactJS is a component-based JavaScript library used for building dynamic and interactive user interfaces. It enables developers to create reusable UI components and develop fast, scalable single-page applications (SPAs) with efficient rendering and updates.

What is Vite, and why has it replaced Create React App?

Vite (pronounced "veet", French for "fast") is a modern frontend build tool and development server used to scaffold, run, and optimise React applications. It acts as the infrastructure for your project. React handles the user interface, while Vite compiles your code, serves it locally during development, and bundles it for production.

NodeJS NPM

NPM (Node Package Manager) is the default package manager for Node.js. It helps manage project dependencies, scripts, and third-party libraries, and is automatically installed when you install Node.js.

Using NPM with NodeJS
To start using NPM in your project, follow these simple steps

Step 1: Install NodeJS and NPM

First, you need to install NodeJS. NPM is bundled with the NodeJS installation.

Step 2: Verify the Installation

After installation, verify NodeJS and NPM are installed by running the following commands in your terminal:

node -v
npm -v

Step 3: Initialise a New NodeJS Project

In the terminal, navigate to your project directory and run:

npm init -y

This will create a package.json file, which stores metadata about your project, including dependencies and scripts.

Step 4: Install Packages with NPM

To install a package, use the following command

npm install <package-name>

For example, to install the Express.js framework

npm install express

This will add express to the node_modules folder and automatically update the package.json file with the installed package information.

Step 5: Install Packages Globally

To install packages that you want to use across multiple projects, use the -g flag:

npm install -g <package-name>

Step 6: Run Scripts

You can also define custom scripts in the package.json file under the "scripts" section. For example:

{
    "scripts": {
        "start": "node app.js"
    }
}
Enter fullscreen mode Exit fullscreen mode
{% embed Then, run the script with

npm start

React

CRD-Create Read App (not recommended)

Vite=build config tool

What is vite in React? (important)

React is not important.


React installation is node important.

npm is The full form of npm is Node Package Manager

JSX-javascript xml


HTML-Xml

HTML-predefined tags
XML-user-defined tags

XML stands for Extensible Markup Language


components are stated with a capital value.

what is re useable compontes?


There are two types of components

The two primary types of components in React are Functional Components and Class Components
 %}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)