JavaScript All-in-One For Dummies

Chapter 2

Building with Components

IN THIS CHAPTER

Making new components

Exploring the parts of a component

Adding style

“‘Think simple,' as my old master used to say — meaning reduce the whole of its parts into the simplest terms, getting back to first principles.”

—FRANK LLOYD WRIGHT

One of the goals of Svelte is to require developers to write less code, and the structure of Svelte components reflects this aim. In this chapter, you'll learn how to write Svelte components, how to add style to components, and how to combine components.

Writing Lean Components

Programmers call the code you must write to make the code you want to write work boilerplate or plumbing. Compared to React and Vue, Svelte components require very little plumbing. For example, consider the following React class component:

import { Component } from 'react';class ReactCounter extends Component {constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Increment </button> </div> ); }}export default ReactCounter;

This example of the simplest possible React Counter app written ...