Two-timing the frontend — from Vue to React, basic concepts
Preface
In the frontend world, there is a major revolution every few years. The weapon you hold in your hand today might well be weathered away by history a few years later. If you stick to one technology forever, you may be wasting both your youth and your paycheck.
Rather than saying frontend is overly competitive, it would be more accurate to say that choosing frontend as a career means turning yourself into a “playboy” — as long as you are handsome and talented enough, you can pick up any technology smoothly without getting your hands dirty.
The hot frameworks in the recent frontend market are Vue and React (Angular auntie, please wait until I grow up). There are plenty of articles online comparing the pros and cons of the two; but as a “playboy”, just appreciate the different beauty of both, and conquer them one by one!
That said, since I learned Vue first and applied it at work, then learned React on my own afterward, most of the perspective here will start from a Vuer’s view of how a React project differs.
(This series will use Vue3 and React18 + Typescript to build SPA websites as the reference setup.)
Basic difference between Vue and React — project structure
If your local machine doesn’t have a node environment or npm yet, I recommend nvm, and then download and manage node versions through nvm. (Previously I used Homebrew on macOS to install node, which made my environment a complete mess — I ended up rolling back with Time Machine and switching to nvm.) After setting up node, for initializing a Vue project you can refer to the intro of vue-cli; for the React side, you can directly run npx create-react-app {project name} --template typescript in the terminal, e.g. npx create-react-app demo-app --template typescript.
- Vue3+Typescript initial project
- React+Typescript initial project
To the naked eye, the biggest difference is the .vue files in the Vue project versus the .jsx files in React. The rest is not exactly the same, but pretty close to identical.
Vue’s .vue
This is one of Vue’s charming spots. <template> is where you write the view (HTML), <style> is where you write CSS, and <script> is of course where you write JavaScript/TypeScript — then export the whole thing as a reusable component. The difference between Vue2 and Vue3 lies in whether <script> uses the Options API or the Composition API (I’ll cover this later when I have a chance).
As you can see, .vue files compose components in this way — clean and clear, which I think is what makes Vue beginner-friendly.
React’s .jsx
If Vue takes the originally massive blob of HTML+CSS+JavaScript and uses .vue to break it into small bundles of HTML+CSS+JavaScript, then React can be said to write everything as JavaScript/TypeScript.
To write a JSX component, there are two approaches: Class-based or Functional. Recent React projects, however, are mostly built with Functional + react hooks. The shared trait of both is that, just by using {}, you can write JavaScript inside your HTML — unlike Vue, where you can only use framework-provided APIs like v-if, v-for, etc. This gives a huge boost to flexibility!
Conclusion
Most of my work projects use Vue, and I’m pretty used to writing Vue. But people always look at the other bowl while eating from their own — the freedom of React’s JSX style has caught my eye too. I’ll gradually go deeper and compare the differences between the two!
ChangeLog
- 20220817 init
- 20260501–translate by claude code