Introduction to the React + vite

---

Welcome to React..
React is an application design framework and development platform for creating efficient and sophisticated single-page apps. It helps you to build modern applications for the Desktop, Web and Mobile.
Welcome to vite..
is a build tool that aims to provide a faster and leaner development experience for modern web projects.

Getting Started

---

Setting up the local environment and workspace

This guide explains how to set up your environment for vite development using the React tool. It includes information about prerequisites, installing this, creating an initial workspace and starter app, and running that app locally to verify your setup.

For getting started an React Application you needs 2 things as Prerequisites.

Prerequisites

To use the React Framework, you should be familiar with the following:

• React
• vite
• CSS
• JavaScript

Knowledge of JavaScript is helpful.
To install vite on your local System, you need the following:

Node.js

vite requires a current, active LTS (long term support) or maintenance LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Npm package Manager

The vite and React applications depend on npm packages for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window (cmd)

For better understanding React we suggest you once go through official documentation of React from React Documentation and for vite Vite documentation

vite Setup

---

Create a workspace and initial application

You develop apps in the context of an vite-React workspace.
To create a new workspace and initial starter app just follow the below steps

1. Run the command , as shown below

First step :

npm create vite@latest

This new command prompts you for the information about features to include in the initial app. Accept the defaults by pressing the Enter 
or Return key.
Second step:
provide your project name as my-app

Project name : my-app

Third step: 

select your required framework you are familiar with,

Select a framework: React

Fourth step: 
select your required script language you are familiar with,

Select a variant: javascript	

The vite installs the necessary React npm packages and other dependencies. This can take a few minutes. This creates a new workspaces and
a simple Welcome app, ready to run.

			

Run the application

The vite includes a server, so that you can build and serve your app locally.

1. Navigate to the workspace folder, such as my-app.
2. Run the following commands:

cd my-app
 npm run dev
								 

The yarn or npm serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. The run dev just Option automatically opens your default browser to http://localhost:5173/.

valex Setup

---

If you have already download and install node.js and React then ignore prerequisites.

Prerequisites

Node.js

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

React

To install the React using npm, open a terminal/console window and run the following command.

npm install react
  (or)
yarn install react

Setup an valex Template by

1. Download the valex rar/zip file.
2. Extract it and then go in to Folder here you will see a valex Folders
3. For Example
4. Here, I'm Choosing vite-file.
5. Now from a terminal window, navigate to the directory containing your application

valex/vite-file>

6. You can import all dependency by installing npm command

npm install
(or)
yarn install

7. Now you are in stage to successfully run sash using below command:

npm run dev
(or)
yarn run dev
			

Once you serve your application by default it will take their default port using http://localhost:5173/

Note

npm install

If your are using npm install, You have to delete the

yarn-lock file

(or)

yarn install

If your are using yarn install, You have to delete the

package-lock.json file

we have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file

Build Application

Build your application for host on server using below command:

yarn run build
(or)
npm run build