Get Faster Creating React Project with Vite

Moch Farras Fauzan — Sat, 17 Jul 2021 17:46:52 +0000

I am new in react and also still learning how to use react. I'm using create-react-app to make react project. The first thing that I notice whenever I created react project with create-react-app are;

The time it took to make a single project .
The time it took to start the project.

But all that changed when I got to know ViteJs

What is ViteJs?

According to vite website, Vite is a French word that means "Fast". So, vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. ViteJs is made by the creator of VueJS.

Why using Vite?

When starting the project server, a bundler-based build setup has seek to your application and build entire application before it can be served.

Vite improves the time that dev server took by dividing the modules in an application into two categories:

Dependencies, Vite pre-bundles dependencies using esbuild. Esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers.
Source code often contains non-javascript like JSX, CSS, or React components that used to be edited very often. Vite only needs to transform and serve source code on demand, as the browser requests it. Code behind conditional dynamic imports is only processed if actually used on the current screen.

Performance between Vite vs create-react-app

To do this testing, I measure the time that both of them took to create and launch react project. And here is the difference between both of them.

As you can see the result has significant difference. Either create project or launch project, Vite has a better performance.

How to create react with Vite

To make react project with Vite is very simple. All you need to do is follow this instruction.

npm init vite@latest
Enter project name and select framework (in this case I use React)
Then select react variant (I choose react)
Go to your project app folder and enter npm install command. Your project will be ready within a minute.

So that's it what I could share. I'm truly sorry if my English is not good because it isn't my mother tongue. But I keep learning English to make it better. Writing blog also my learning method to improve my English. So if you have any feedback related to the content or to my English, feel free to share!

References
Vite 2.0 Crash Course by codeSTACKr
Vitejs and React by Roberto Butti
Getting Started by Vite

Second Week at Gigih - a Weekly Reflection

Moch Farras Fauzan — Sat, 17 Jul 2021 14:02:42 +0000

How much did you know about the subject before we started?

I always started each session of the program by doing a prior research around the materials so I could get a better grasp beforehand. This method really helped me out to learn faster and to better understand the upcoming materials. The facilitators, the instructors, and also my fellow friends in this program gave a lot of references for me to learn from. Furthermore, I knew that if I learn while also practicing the material at the same time, it would really give me more comprehension towards the materials rather than just reading or watching the course given.

How do you feel about your work this week (homework, assignment)? What parts do you particularly like? Dislike? Why? What did/do you enjoy about this piece or work?

People say that time flies when you’re having fun. Now I genuinely understand the meaning behind that saying. I still can not believe now I am at second week in Gigih Program by Yayasan Anak Bangsa Bisa. I am truly having great time in this program. There are so many great facilitators, instructors and friends that helped me a lot during my journey at Gigih Program.

Even though it was quite a challenge because I just started my journey in web development but the atmosphere that I get from Gigih Program is quite relaxing and assuring for me to pursue this path. They always told me that it is okay to fail, but one thing that I keep in mind is I have to always try. Now I have been implementing that principal to my daily life. And since then I am always brave to try new things. I am convinced that I am not scared of failure because I know that I would be more disappointed if I did not try at all.

How can you use this knowledge in future work?

This knowledge has certainly changed my life forever. Previously, I only knew that frontend was only things such as html, css and js. I didn't really knew that frontend had so many things that I took interested in. Like React, Nodejs, Reactstrap and etc. This new knowledge gave me a fresh new passion to learn more. So that in the future I could build a professional website or application with the knowledge I got from here for collaborations with companies and also for the society.

Lastly, I want to quote a sentence from one of my favorite books, "Atomic habits", that said “You should be far more concerned with your current trajectory than with your current results”. So, with my current trajectory at Gigih Program, I believe that I will reach my goal to be a Frontend Engineer. I give my biggest applause for Gigih Program by Yayasan Anak Bangsa Bisa. Above all, thank you for this amazing opportunity!

Forem: Moch Farras Fauzan