React.js is a popular Javascript framework used for the front-end development for web applications.
React.js is a popular Javascript framework used for the front-end development for web applications. Most software developers often make comments on how creating a new react.js application takes a long time if you use the conventional provided React.js documentation.
npx create-react-app my-app cd my-app npm start
With the growth of the state of web development over the years there are tools like Vite and Parcel that have been created to support development while using modern frameworks and even programming languages.
In this case, we are talking about Vite, which is said to be the "Next Generation Frontend Tooling" that enables you to get ready for a development environment that can finally catch up with you. Vite offers these unique features:
// With NPM npm create vite@latest // With Yarn yarn create vite
$ yarn create vite
When you run the command you see output like this on your terminal and it requires you to select a vite-project name
// output yarn create v1.22.19 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Installed "[email protected]" with binaries: - create-vite - cva ? Project name: › vite-project
you can name it react-vite-1 just type it and it will replace highlighted vite-project
react-vite-1
when you enter the project name you'll get an output that requires you to select a framework you want to work with. You can scroll with down and up arrows to select the one you want to work then submit. For this case, we'll select React
// output ✔ Project name: … react-vite-1 ? Select a framework: › - Use arrow-keys. Return to submit. ❯ Vanilla Vue React Preact Lit Svelte Others
After selecting a framework we have to select a variant that is either Javascript or Typescript template
// output ✔ Project name: … react-vite-1 ✔ Select a framework: › React ? Select a variant: › - Use arrow-keys. Return to submit. ❯ JavaScript TypeScript JavaScript + SWC TypeScript + SWC
we can select the typescript one and our project will be scaffolded successfully we can run the following commands
cd react-vite-1 yarn yarn dev
With this, you can go ahead and build your react.js project of choice that uses typescript so you have to adhere to the different types also uses Vite to ease the development process like starting live on localhost, installing packages, and even bundling.
At times you're working on a project and you initialized using Vite but you get to some point while building and get some error like Vite not being able to bundle an import of images within a useEffect hook and you need to remove Vite since you can't debug the issue within the short time you have despite the fact Follow these steps to remove Vite:
Remove the Vite dependency from your project by running the following command :
npm uninstall vite
Remove the vite configuration file named vite.config.js from your project root folder
Update your package.json file to remove any vite-specific scripts or configurations:
"scripts": { - "start": "vite", + "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", ... }
Update any imports that may have been using Vite-specific aliases or paths e.g use of @ to import files from the src folder with vite. This might bring a lot of issues but take your time to ensure all imports are well imported.
Add index.html file public folder with a div that has a root id
Run npm install to ensure all dependencies are up to date and any unused packages are removed. At this point, Vite is removed from your project and you can continue building your project.
Ensure when you start the server it can detect some browsers by adding the defaults to your package.json file in your React app. Run the following commands in your terminal
npm install postcss autoprefixer npx browserslist // generates list of targeted browsers
Go back to your package.json file and add browserlist section at the top next to the scripts like this
{ "name": "my-react-app", "version": "0.1.0", "private": true, "dependencies": { // your dependencies }, "browserslist": [ "last 1 version", "> 1%", "not dead" ] }