How a dummy approaches web dev

React is probably the most used js library out there and I've always felt guilty not using it, writing my websites in pure vanilla html + css + javascript.

The fact is that React is HARD and COMPLEX and I always wondered if the game was worth the candle.

Why do we actually need React for?

The big deal with React is the use of JSX.

JSX (sometimes referred to as JavaScript XML) is an XML-like extension to the JavaScript language syntax.

So JSX isn’t a separate language. It’s a syntax extension that lets you write something that looks different from normal JavaScript, but gets compiled (by a compiler like Babel) into regular JavaScript function calls.

Example:

const element = <h1>Hello, world!</h1>;

This is not valid plain JavaScript, but Babel will turn it into:

const element = React.createElement("h1", null, "Hello, world!");

Along with this React allows you to work with components which are JavaScript functions that return markup:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

So you can just write your function once and reuse the component wherever you want!

There's a catch!

As I said JSX isn't nativaly supported by web browsers, it needs to be compiled to regular javascript, that's where a compiler like Babel comes in handy.

But as complexity grows you may also want the following things: - A dev server -> With hot reload, instant updates when you save files. - Optimized builds -> Minification, code splitting etc. - Bundling -> Basically resolving all the imports in one unique file to make it faster (one of the most famous is Rollup)

So it comes Vite, a local development server that does all of this for you: it has a Hot Module Replacement (HMR) system, which reduces wait times during development, has server-side rendering (SSR), code-splitting, and asynchronous loading.

Along with these it may be convenient to use a package manager like npm that handles files and third party packages.

When creating a vite app for istance you'd run:

npm create vite@latest (this downloads a sample app )

If you want to start from scratch:

npm install -D vite (The -D flag stands for Dev dependency)

We get these files:

|-- node_modules/
|-- package-lock.json
|-- package.json

in the package.json we have all the packages that we've installed along with other configuration data:

{
    "name": "test",
    "version": "0.0.0",

        // Packages used for developing, ex. minification, bundling, hmr...
    "devDependencies": {
        "vite": "^7.1.3"
    },
    // Packages used for running
    "dependencies": {
        "react": "^19.1.1"
    },
    // Running "npm run dev" will actually run "npx vite" for starting local server
    "scripts": {
        "dev": "vite",
        "build": "vite build",  // Building production (bundled and minified) build, outputs to /dist folder
        "preview": "vite preview" // Same as build but starts local server as well to test it
    },
}

The package-lock.json contains just the same packages but with resolved urls and all specific packages, for instance vite in its turn requires other packages, like the bundler "Rollup", and it automatically adds them for you:

"node_modules/rollup": {
    "version": "4.48.1",
    "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.48.1.tgz",
    "integrity": "sha512-jVG20NvbhTYDkGAty2/Yh7HK6/q3DGSRH4o8ALKGArmMuaauM9kLfoMZ+WliPwA5+JHr2lTn3g557FxBV87ifg==",
    ...

In the node_modules folder we have the actual downloaded packages.

| node_modules
  | @react
  | @vite

That's basically how nowadays most websites are built, leveraging the power of javascript, allowing for high interactivity and snappiness, just like a native application!