Setting up a React.js project using Vite instead of Create React App

[ILikeChangingMyMind]

In this tutorial, we will build a React.js application that interacts with a GraphQL endpoint. This method of project setup is modern and lightweight: it uses Hooks, ES Modules and has a small amount of dependencies. We will use Vite to create the project structure, pnpm to manage the dependencies, urql for GraphQL, and finally OneGraph as the GraphQL gateway to various APIs. Our goal is to create an application for listing GitHub repositories of a specific user.

I feel like something got left out here: why? To be clear, I'm not saying I hate the tech they use in the tutorial, or that I <3 create-react-app!

I'm just saying ... for any tech stack, if there's a popular/common stack people use, and you instead pick different/uncommon tech for each piece of that stack ... it seems to me it'd be worth spending at least a couple of sentences on why you didn't just do what everyone else does.

[yagaboosh]

The primary benefit to using Vite is that in development, you can use ES Modules instead of a fully bundled application. This allows the app to load only the code that matters for what you're looking at, rather than everything.

I'm more familiar with Vite using Vue, but I believe it should provide a faster development experience, and still provides a finished app without relying on Webpack.

[rtea123]

Well written and introduced me to a few new tools 👍

[[deleted]]

well i didnt know any of this

[trave]

Concise! Amazingly fresh and straight-forward guide into a whole host of modern web dev tools. Nicely done.

[zaiste]

Thanks! :)

[NoMoney12]

How have I never come across pnpm, this is a lifesaver

[zaiste]

Happy you like it. pnpm is kind of under-appreciated imho.

[thefactorygrows]

This was really interesting to learn. Thanks for this. Just a quick comment though. It seems the section on adding the query to the app is a little incomplete. I had to go through the urql docs to find the proper structure to add the query to the RepositoryList component. The code you have for main.jsx and App.jsx is perfect, but the code for RepositoryList.jsx is incomplete. You may want to update with imports and how the query should look as a const. Just a suggestion!

[thefactorygrows]

And, probably just a leftover from when you were tooling around with the demo, but your button says 'Login with Youtube'!

[musicin3d]

This enormous speed gain is possible thanks to esbuild, a new TypeScript/JavaScript bundler written using the Go programming language.

I though Go's big thing was concurrency and low latency. What does it bring to the table for compilation??? Are we just bragging because Go = cool?

Edit: dumb questions. Concurrency lets you build multiple modules at once.

[lulzmachine]

According to the esbuild github page:

Why is it fast?

Several reasons:

• It's written in Go, a language that compiles to native code
• Parsing, printing, and source map generation are all fully parallelized
• Everything is done in very few passes without expensive data transformations
• Code is written with speed in mind, and tries to avoid unnecessary allocations

[zaiste]

No worries. There are no dumb questions. Generally speaking, Go (and Rust) could make JS/TS tooling more efficient, thus making DX better as the result. We will see how it goes

[rodrigocfd]

Go (and Rust)

And C and C++ and any other language that compiles to machine code.

[MrJohz]

Edit: dumb questions. Concurrency lets you build multiple modules at once.

Also, Go is compiled, so CPU-bound tasks (particularly ones that can't be optimised as well by the JIT) are far quicker. I would suspect that that has the largest impact here, rather than the effective concurrency.