liveBook · Manning

Single-file component

As explained in Build a Frontend Web Framework (From Scratch)

A frontend component whose markup, styles, and script code are stored together in one file.

A single-file component (SFC) keeps a frontend component’s markup, styles, and JavaScript together in one file. This makes the component’s view and interaction logic easier to inspect as one unit. section 1.3.1

A component file brings together:

Conditional content

A component can show a paragraph only when application state indicates a discount. Vue uses v-if, Svelte uses an if block, and React uses a JavaScript expression. section 1.3.1

<p v-if="hasDiscount">
  You get a discount!
</p>

See the Vue conditional-rendering example; comparable Svelte and React forms are available as related listings. section 1.3.1

How Build a Frontend Web Framework (From Scratch) covers it

How deep it goes
Defines the file arrangement and compares rendering syntax, but does not descend into framework implementation internals.
Examples
Uses conditional discount paragraphs expressed with Vue v-if, Svelte if blocks, and React JSX expressions.
What it assumes
Assumes familiarity with HTML, CSS, and JavaScript while identifying framework-specific template or JSX syntax.
What you can do after
Apply via Vue, Svelte, or comparable frontend frameworks when organizing component view and interaction code.
How it connects
Connects HTML, CSS, JavaScript, React, Preact, Vue, Svelte, Angular, JSX, and conditional rendering.
Cover of Build a Frontend Web Framework (From Scratch)
liveBookmanning.com
Read Build a Frontend Web Framework (From Scratch) on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build a Frontend Web Framework (From Scratch). The section links point to the parts of the book it draws on.