Skip to main content

React Js Commands

React JS Commands and Useful purposes 

To Install react app: npx create-react-app app-name
To Install react app: npx create-react-app .

To check npm version: npm --version

Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

node -v (To check node version)

The latest recommended command to create a new React app is:

npx create-react-app@latest my-app

Replace my-app with your desired project name. This approach uses the latest version of Create React App and works if Node.js (version 14+) and npm (version 5.2+) are installed

Modern Alternatives
If you prefer a faster, lighter setup, many developers now use Vite for new React projects:

This command also creates a new React app but with the Vite build tool.

# Using npx directly
npx create-vite@latest my-app --template react

# Or without specifying template (interactive mode)
npm create vite@latest my-app

Either option gives you a complete React project structure—just navigate into your project folder and start coding with npm start or yarn start.
The double dash syntax ensures that npm properly forwards the --template react argument to the create-vite tool rather than trying to interpret it as an npm argument

Comments

Popular posts from this blog

Laravel form validations

 Laravel Validations: List of types "first_name" => 'required|alpha:ascii|min:3|max:100',// alpha:ascii (only accepts a-z) "middle_name" => 'string', "last_name" => 'required|string', "email" => 'required|email|unique:users,email', "password" => 'required|string|confirmed', "sex" => 'required|string', "phone_no" => 'required|string', "account_type" => 'required|string', "dob" => 'required|date_format:d-m-Y', // date with format "nationality" => 'required|string', "company" => 'required|string', "company_sector" => 'required|string', "company_address" => 'required|string' "bank_account_no" => 'required|min_digits:3|max_digits:5', "role" => 'required|in:admin,editor,viewer', ...

Advanced Objects Introduction in JS

  Advanced Objects Introduction Remember, objects in JavaScript are containers that store data and functionality. In this lesson, we will build upon the fundamentals of creating objects and explore some advanced concepts. So if there are no objections, let’s learn more about objects! In this lesson we will cover these topics: how to use the this keyword. conveying privacy in JavaScript methods. defining getters and setters in objects. creating factory functions. using destructuring techniques. The this Keyword Objects are collections of related data and functionality. We store that functionality in methods on our objects: const goat = {    dietType : 'herbivore' ,    makeSound () {      console . log ( 'baaa' );   } }; In our  goat  object we have a  .makeSound()  method. We can invoke the  .makeSound()  method on  goat . goat . makeSound (); // Prints baaa Nice, we have a  goat  ob...