React / JSX

What is React

What is .jsx

What is Vite

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

New

Frameworks and Build Tools

What is a Framework?

In general, a framework is a structured set of tools that provides a foundation for creating software

• The tools for the framework are usually in the form of libraries
• There are usually accepted conventions for how to use the framework, and where your code “fits in”

In web development, a framework is a pre-built structure of code that provides tools, libraries, and conventions to create and organise web applications efficiently and in a consistent way. You can always add new libraries / plugins, and make changes to the setup but you should be able to generate usable output with the base set of tools and associated commands.

As frameworks are templates of sorts they are usually installed via command-line eg. npm create vite@latest my-app for Vite / React app in JavaScript or django-admin startproject myproject for a Django project in Python. These commands usually create the directory and file structure of the project. Not all frameworks have these commands, or as rigid of a directory structure, but it is very common.

[!NOTE] Not all frameworks are full-stack, sometimes they only cover part of the project and you may need to interleave different frameworks in order to “create your stack”

What is a Build Tool?

A build tool is software that automates the process of preparing your code for production. It takes your source code and transforms it into optimised files that browsers can efficiently run. Build tools are essential for modern web development because they bridge the gap between developer-friendly code and production-ready, optimised files.

Uses of Build Tools

Development

• Provide a development server to serve files locally, via localhost
• Provide Hot Module Replacement (HMR) where updates in the code show up in browser without full refresh
• Provide source maps which allow you to debug transpiled code by mapping back to original source

Transpilation

• Transform TypeScript to JavaScript
• Process JSX into JavaScript
• Convert modern JavaScript (ES6+) to older versions for browser compatibility
• Convert Sass/SCSS to CSS

Bundling

• Combine multiple files into fewer files
• Resolve import / export statements
• Create optimised bundles for faster loading

Optimisation

• Minification - Remove whitespace, comments, and shorten variable names
• Tree shaking - Remove unused code
• Code splitting - Break large bundles into smaller chunks
• Asset optimisation - Compress images, fonts, and other assets

Common Build Tools:

• Webpack - Powerful and highly configurable bundler that is used by many frameworks
• Parcel - Zero-configuration build tool
• esbuild - Extremely fast JavaScript bundler
• Rollup - Focused on ES modules and “tree shaking”
• Vite - Commonly used build tool that uses esbuild and Rollup under the hood

Example Frameworks / Build Tools for Web Development

Vite

Vite is a build tool, and also a development server that handles routing and makes use of HMR. It allows you to bundle code for production via npm run build, and handles minification and optimisation of the built files. Another common use is the transpilation of .ts => .js and .jsx => .js

• Vite with vanilla JavaScript

  npm create vite@latest my-app
  

• Vite with React

  npm create vite@latest my-app -- --template react
  

Svelte

Svelte is a frontend framework that includes a compiler for .svelte files and has its own “reactivity” system, it often uses Vite for the development server / HMR and build tools (bundling, minification)

npm create vite@latest my-app -- --template svelte

[!NOTE] You can also try SvelteKit which is a full-stack framework for Svelte which uses Vite by default

Next.js

Next.js is a full-stack framework built on React that includes a build tool (usually Webpack), the React UI library and tools for routing and makes use of Hot Module Replacement (HMR). It can be thought of as a “meta-framework”, or a framework on top of another framework.

npx create-next-app@latest my-app

Vue.js

Vue.js is a frontend framework with a component-based architecture and reactivity system. It can be used as both a library and framework depending on setup

npm create vue@latest my-app

Angular

Angular is a comprehensive frontend framework with built-in routing, HTTP client, and uses TypeScript by default

npm install -g @angular/cli
ng new my-app

React

One of the most commonly mentioned things in web development is React, and it is often thought of as a framework. In reality it is best thought of as a UI library, or a set of tools for creating reactive elements, or a reactive DOM, for your site.

[!NOTE] Whilst it is not the point of this section on frameworks, in simple terms elements in the DOM “react” to changes in the underlying data, and the DOM only re-renders elements that have been changed. It uses diffing to achieve this, which is comparing two versions of something, here the DOM and the Virtual DOM, and finding the differences between them.

---

[!NOTE] This document focuses on frontend frameworks and build tools. Backend frameworks (Express.js, Django, Flask) and CSS frameworks (Tailwind CSS, Bootstrap) are also important even if they haven’t been touched upon here.