How To: Two Ways To Install React Js Enter a brief summary for this post

Two Easy Ways to Installing React Js

If you are new to front end development or new to React Js you must know there are different ways to installing it. I found this out when I noticed on some blogs (and Stack Overflow) there were references to http://localhost:3000 but in other cases it was http://localhost:5173.

Confusing? I thought so too.

React Create App

It may be down to personal preferences however there could be more to it. The first way of installing React Js is using the official way: npx create-react-app project where project is the directory you'll be working from for your application.

It's quick and easy and installs the default framework. You cd project and then use npm start to begin.

This approach will give you the famous spinning React logo on http://localhost:3000.

React with Vite

On the other hand, if you're working with Laravel on the back end perhaps using Vite will be better? This is my preferred way of installing React actually on http://localhost:5173. Although being honest, http://localhost:3000 is easier to remember.

In which case you use: npm create vite@latest project --template and choose a few options to configure your installation. Again, project is the root directory from where your application will take root from.

Once you cd project you use npm install to install the default packages specified in the package.json file. I have a list of packages I use regularly with React, so I then also install those.

npm i axios react-bootstrap bootstrap react-hook-form @hookform/resolvers yup react-toastify react-router-dom @tanstack/react-query -D @tanstack/eslint-plugin-query

I have:

  • bootstrap
  • react hook forms
  • yup form validation
  • react router dom and query
  • toastify

For me this is the basic installation setup before I begin a new project in earnest.

Once the installation has finished you use npn run dev to start. Entering http://localhost:5173 in your browser address bar will take you to the splash page.

Hopefully this has cleared up a lot of confusion for you because I see the internet littered with tutorials and most of them are not clear on this matter.