Learn ReactJS - Modern Tooling & Build Automation

#Introduction

A good toolchain makes a team productive; a bad one drains time every day. Episode 19 covers modern React development tooling thoroughly — from bundlers and code quality to TypeScript and build optimization.

We'll see why Vite replaced Create React App as the primary choice, tidy up code with ESLint and Prettier, add TypeScript for type safety, and optimize the production bundle so your app ships faster and smaller.

#Vite, Create React App, and Modern Bundlers

#Why Vite

Vite became the standard for two reasons: an instant dev server via native ESM and a fast Rollup-based production build. Create React App still works, but its development is slow and it's no longer recommended by the React team for new projects.

npm create vite@latest aplikasi-ts -- --template react-ts
cd aplikasi-ts
npm install
npm run dev

--template react-ts immediately creates a React project with TypeScript configured. Vite's dev server serves native modules without bundling first, so even large projects feel instant on startup.

#ESLint, Prettier, and Code Quality Tools

#Uniting ESLint and Prettier

ESLint catches errors and bad patterns; Prettier standardizes formatting. In the Vite template, the eslint.config.js file already exists. Add Prettier if it's not there yet:

npm install -D prettier eslint-config-prettier

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 80
}

eslint-config-prettier turns off the ESLint rules that conflict with Prettier, so the two don't fight each other. printWidth: 80 keeps lines short and comfortable to read.

#Husky: Automatic Linting Before Commit

To guarantee quality, run lint and tests automatically before every commit with Husky and lint-staged:

npm install -D husky lint-staged
npx husky init

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

lint-staged runs eslint --fix and prettier --write only on changed files. Code that doesn't pass lint will never enter git history — quality is enforced automatically, not by willpower.

#TypeScript Integration for React

#Why TypeScript

TypeScript adds static types to JavaScript. In React, that means: wrong props are caught at compile time, refactors are safe, and editor autocomplete is much better.

Typed props

type ProfilProps = {
  nama: string
  umur: number
  aktif?: boolean
}
 
function Profil({ nama, umur, aktif = true }: ProfilProps) {
  return (
    <div>
      <h2>{nama}</h2>
      <p>{umur} tahun, {aktif ? "aktif" : "nonaktif"}</p>
    </div>
  )
}

type ProfilProps defines the shape of the props. Passing umur="tiga puluh" will be rejected by TypeScript because umur must be a number. The .tsx file extension allows JSX inside TypeScript.

#Typecheck in CI

Add a typecheck script and run it in CI alongside lint:

{
  "scripts": {
    "typecheck": "tsc --noEmit"
  }
}

tsc --noEmit checks types without emitting files. Combine npm run typecheck and npm run lint in the CI pipeline so code that doesn't pass never reaches production.

#Build Optimization and the Production Bundle

#Measuring and Splitting the Bundle

Episode 14 already introduced bundle analysis and manualChunks. It's time to unify it all into a build strategy:

Vite build configuration

export default {
  build: {
    target: "es2020",
    sourcemap: false,
    minify: "terser",
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
        },
      },
    },
  },
}

sourcemap: false shrinks the production bundle (sourcemaps are enough during debugging), and manualChunks separates React so the browser can cache it independently. This optimization is immediately visible in the size of the dist files.

#A Proper Production Build

Test the production build before shipping — the build can fail on things that aren't visible in dev:

npm run build
npm run preview

npm run preview serves the dist build output locally, mimicking production conditions. Always check that npm run build is green before deploying — it's the last quality gate.

#Conclusion

Episode 19 brought together the modern toolchain: Vite as a fast bundler, ESLint and Prettier for code quality with Husky guarding commits, TypeScript for type safety, and a build strategy that produces a small bundle.

Key takeaways:

• Vite is the primary choice: instant dev server and fast Rollup build.
• ESLint catches errors, Prettier standardizes formatting, without conflict.
• Husky and lint-staged run quality checks automatically before commits.
• TypeScript catches prop errors at compile time, not runtime.
• tsc --noEmit as the typecheck gate in CI.
• Measure the bundle and split vendors for a small, fast build.

In the next episode, episode 20, we'll cover deployment & hosting — SSG and SPA deployment, hosting options like Vercel and Netlify, CI/CD for React apps, and environment variables and build-time configuration. It's time for your app to go public.