{"id":18319,"date":"2024-04-17T11:06:01","date_gmt":"2024-04-17T11:06:01","guid":{"rendered":"http:\/\/localhost\/netizens_12_aug\/?p=11510"},"modified":"2024-04-17T11:06:01","modified_gmt":"2024-04-17T11:06:01","slug":"vite-react-app","status":"publish","type":"post","link":"https:\/\/netizens.netizens.dev\/br\/blog\/vite-react-app\/","title":{"rendered":"Learn How to Set Up Your React App with Vite Today"},"content":{"rendered":"

If you have ever used Create React App (CRA), you are aware that it can be a slow process. It takes a while to start, and it reloads slowly after you make changes.<\/span><\/p>\n

Vite is not like that. It’s incredibly quick. The browser instantly updates when you make changes to your code. This is known as Hot Module Replacement, or HMR.<\/span><\/p>\n

Consider it this way: Vite is like teleporting to work instantly, whereas CRA is like walking slowly!<\/span><\/p>\n

What Do You Need?<\/span><\/h2>\n

Make sure you have Node.js installed before beginning (v16 or higher is ideal). A code editor such as Visual Studio Code, and a fundamental understanding of using the terminal to run commands<\/span><\/p>\n

That’s it! Nothing more is required of you.<\/span><\/p>\n

Step 1 \u2013 Create Your Project<\/span><\/h2>\n

Open your terminal and type:<\/span><\/p>\n

Terminal<\/div>\n
\n# Create a new React Vite app<\/span>\nnpm<\/span> create vite@latest my-react-app\n<\/code><\/pre>\n
It will ask you a few questions:<\/span><\/p>\n
    \n
  1. Project name \u2013 pick any name, like <\/span>my-react-app<\/span><\/li>\n
  2. Framework \u2013 choose React<\/span><\/li>\n
  3. Variant \u2013 pick JavaScript or TypeScript<\/span><\/li>\n<\/ol>\n
    This sets up a fresh React project using Vite.<\/span><\/p>\n
    Step 2 \u2013 Install and Explore<\/span><\/h2>\n
    Go into your project folder and install the packages:<\/b><\/p>\n
    Terminal<\/div>\n
    \n# Navigate to the project folder<\/span>\ncd<\/span> my-react-app\n\n# Install project dependencies<\/span>\nnpm<\/span> install\n<\/code><\/pre>\n
    Here\u2019s what your project looks like:<\/b><\/p>\n
    Project Structure<\/div>\n
    \nmy-react-app\/\n\u251c\u2500 index.html<\/span> \u00a0 \u00a0 \u00a0 <- Main HTML file\n\u251c\u2500 package.json<\/span> \u00a0 \u00a0<- Project info and dependencies\n\u251c\u2500 vite.config.js<\/span> \u00a0 <- Vite settings\n\u2514\u2500 src\/<\/span>\n   \u251c\u2500 main.jsx<\/span> \u00a0 \u00a0 <- React starting point\n   \u2514\u2500 App.jsx<\/span> \u00a0 \u00a0 \u00a0<- Main React component\n<\/code><\/pre>\n
    These are the files you\u2019ll mostly work with at the start.<\/span><\/p>\n
    Step 3 \u2013 Run Your App<\/span><\/h2>\n
    Start the app with:<\/b><\/p>\n
    Terminal<\/div>\n
    \n# Start the development server<\/span>\nnpm<\/span> run dev\n<\/code><\/pre>\n
    Open the URL, it shows (usually <\/span>http:\/\/localhost:5173<\/span>).<\/span><\/p>\n
    Modify something in App.jsx, and the browser will update immediately. You will save a great deal of waiting time with Vite’s lightning-fast HMR.<\/span><\/p>\n
    Step 4 \u2013 Vite Configuration (Optional)<\/span><\/h2>\n
    Vite comes with a simple config file: <\/span>vite.config.js<\/span>.<\/span><\/p>\n
    Here\u2019s an example:<\/b><\/p>\n
    JavaScript<\/div>\n
    \nimport<\/span> { defineConfig } from<\/span> 'vite'<\/span>\nimport<\/span> react from<\/span> '@vitejs\/plugin-react'<\/span>\n\nexport default<\/span> defineConfig({\n  plugins: [react()],\n  server: {\n    port: 3000,\n  },\n  base: '.\/'<\/span>,\n})\n<\/code><\/pre>\n
    You can use it to:<\/span><\/p>\n