React & Frontend

When a website is ready to be put online, all of its hundreds of small code files are squeezed and stitched together into one (or a few) compact files. That packaged-up result is the bundle. Smaller bundles mean faster page loads.

A reusable building block of a website or app. Think of a 'Like' button or a product card: once it's built, you can drop it into any page and it works the same way every time. Most modern apps are made by snapping these blocks together.

A way to share information across an entire app without passing it through every single building block by hand. It's like setting one master switch, for the theme, the logged-in user, the chosen language, that any part of the app can read whenever it needs to.

A form field, a text box, a checkbox, a dropdown, whose value is being watched and managed by the rest of the app, rather than just floating freely on the page. The app always knows exactly what's typed in, character by character.

A way of building websites where the browser receives a mostly empty page plus a chunk of code, then assembles the visible content right there on your device. The first load can feel slow because nothing is visible until the code finishes running, but after that, moving between pages is snappy.

A small helper that lets a building block remember things, react to changes, or do work in the background. There are different hooks for different jobs: one for remembering values, one for running setup code, one for tapping into shared settings.

The moment a static page wakes up and becomes interactive. The server first sends the browser a fully drawn page so you have something to look at right away. Then a little code arrives and 'hydrates' the page, wiring up all the buttons and forms so they actually respond to clicks.

A way of writing what a webpage should look like, the headings, buttons, images, right next to the code that controls how it behaves. It looks a lot like the regular tags you'd see in any webpage, just mixed together with normal code.

Remembering the answer to an expensive question so you don't have to figure it out from scratch every time. As long as the inputs haven't changed, you hand back the saved answer instead of redoing the work.

When a piece of information has to be passed down through many layers of building blocks just to reach the one that actually needs it. The blocks in the middle have to lug it along even though they don't use it themselves: usually a sign that there's a tidier way to share that data.

Short for 'properties.' Props are the bits of information you hand to a building block when you use it, a button's label, a card's title, a profile's avatar, to tell it what to show this time. The block itself can't change them; they come from outside.

Anything an app does that reaches outside its own neat little world: saving to a database, fetching a file from the internet, changing the page title, starting a timer. Side effects need to be handled carefully because the outside world is unpredictable.

A way of building websites where the server does the work of drawing the page first, then sends the finished page down to the browser. The visitor sees real content right away: useful for slow connections, search engines, and any page where the first impression matters.

The information a building block remembers and can change over time: like the current value in a search box, whether a menu is open, or how many items are in a cart. When the state changes, the part of the screen tied to it redraws itself to match.

A lightweight, in-memory sketch of what a webpage should look like. When something changes, the app draws a new sketch, compares it with the old one, and only updates the parts of the actual page that are different. This makes updates much faster than redrawing everything.