React: Setting Up Dev Environment
How to set up Vite + React dev environment
npm create vite@latest
or
npm create vite@4.1.0
yrename project
select framework: React
select variant: Typescript
Create project directory
cd react-app
npm i
Open project in VS Code
Code .
Initialize localhost server
npm run dev
Open: http://127.0.0.1:5173/
Initialize git version control
git init
git add .
git commit -m "Initial commit"
Check commit history
git log --oneline
Dependencies and libraries
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm i styled-components
npm i @types/styled-components
npm i react-icons@4.7.1
npm i immer@9.0.19
npm i react-hook-form@7.43
npm i zod@3.20.6
npm i @hookform/resolvers@2.9.11
npm i axios
npm i styled-components
npm install bootstrap@5.2.3
import "bootstrap/dist/css/bootstrap.css";
Shortcut - React component utilizing an arrow function
rafce
Publish project and check for errors
npm run build
Manually create a repository in Github, then come back to the terminal and enter the following (change the URL):
git remote add origin https://github.com/aldrinrenzcruz/game-hub.git
git branch -M main
git push -u origin main
Publish in Vercel
npm i -g vercel
Open project
vercel
Update project
git push
Using Netlify
npm install -g netlify-cli
ntl init
ntl deploy
ntl deploy --prod