SolidJS Cheatsheet

Previous
Next

This SolidJS cheatsheet provides a concise reference to key SolidJS concepts, including project setup, TypeScript support, styling options, ESLint configuration, and automation scripts. It covers core reactivity features such as signals, effects, and memos, along with component basics, control flow, lifecycle hooks, and the Context API. Advanced topics like directives, routing, and pre-commit hooks are also included, with practical code snippets for each feature.

Table of contents

Introduction

Declarative j Library to build a user interface for HTML using JavaScript is called Solid.js. It has a special emphasis on fine-grained reactivity for optimized performance and has pre-processing JSX syntax which makes it easy for React developers to pick. It is one of the models that are most valued for its lightness and effective performance.

Setting Up a Project

Initialize a SolidJS project using JavaScript or TypeScript templates with degit.

JavaScript Template: Use npx degit to create a JavaScript-based SolidJS project.

npx degit solidjs/templates/js my-solid-project
cd my-solid-project
npm install

TypeScript Template: Use npx degit to create a TypeScript-based SolidJS project.

npx degit solidjs/templates/ts my-solid-project
cd my-solid-project
npm install

Adding TypeScript Support

Install TypeScript and configure tsconfig.json for SolidJS.

Install TypeScript: Run npm install typescript to add TypeScript support.

npm install typescript

Add tsconfig.json: Set up TypeScript compiler options for SolidJS.

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] },
    "noEmit": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

TypeScript Error Check Script

{
    "scripts": {
    "type-check": "tsc --pretty --noEmit"
   }
}

Styling Options

Support for CSS preprocessors like SCSS, LESS, and Stylus.

Install Preprocessors: Install SCSS, LESS, Stylus, and Autoprefixer for styling.

npm add -D sass # SCSS/SASS
npm add -D less # LESS
npm add -D stylus # Stylus
npm install -D autoprefixer

Add PostCSS to vite.config.js: Configure PostCSS with Autoprefixer in vite.config.js.

import autoprefixer from 'autoprefixer';

export default {
  css: {
    postcss: {
      plugins: [autoprefixer()]
    }
  }
};

Custom Fonts

Load fonts via Google Fonts or self-hosted files.

Self-Hosted Fonts in index.html: Preload custom fonts in index.html.

<link rel="preload" href="/fonts/custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

Google Fonts in index.html: Import Google Fonts using a link tag in index.html.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

ESLint Configuration

Set up ESLint with the SolidJS plugin for linting.

Install ESLint: Run npm install -D eslint eslint-plugin-solid to install ESLint.

npm install -D eslint eslint-plugin-solid

Add .eslintrc: Configure ESLint settings for SolidJS projects.

{
  "plugins": ["solid"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "env": { "browser": true, "node": true }
}

Pre-Commit Hooks

Use Husky and Lint-Staged to enforce code quality before commits.

Install Husky and Lint-Staged: Run npm install -D husky lint-staged and initialize Husky.

npm install -D husky lint-staged
npx husky install

Add Pre-Commit Script in .husky/pre-commit: Configure Husky to run lint-staged before commits.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged

Add .lintstagedrc: Define pre-commit checks for TypeScript files.

{
  "*.ts": ["npm run lint", "npm run type-check"]
}

Scripts for Automation

Define npm scripts for development, build, linting, and type checking.

Add package.json Scripts: Include scripts for running, building, and checking code. 

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --fix",
    "type-check": "tsc --pretty --noEmit"
  }
}

Reactive State and Reactivity

Solid.js provides reactive primitives like createSignal, createEffect, and createMemo.

import { createSignal, createEffect, createMemo } from "solid-js";
const [count, setCount] = createSignal(0);
createEffect(() => console.log(count()));
const doubleCount = createMemo(() => count() * 2);

Component Basics

Components are functions that return JSX. Props are passed as function arguments.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Control Flow

Special Solid.js components like <Show> and <For> for conditional rendering and looping.

import { createSignal } from "solid-js";
const [visible, setVisible] = createSignal(true);
<Show when={visible()} fallback={<p>Hidden</p>}>
  <p>Visible</p>
</Show>;

Lifecycle Hooks

Lifecycle hooks like onMount and onCleanup allow executing code at specific component lifecycle phases.

import { onMount, onCleanup } from "solid-js";
onMount(() => console.log("Mounted"));
onCleanup(() => console.log("Cleaned up"));

Context API

Used for state sharing between components using createContext and useContext.

import { createContext, useContext } from "solid-js";
const MyContext = createContext();
function Provider(props) {
  return <MyContext.Provider value={props.value}>{props.children}</MyContext.Provider>;
}
function Consumer() {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}

Directives

Solid.js directives like classList and ref are useful for dynamic classes and DOM manipulation.

import { createSignal } from "solid-js";
const [isActive, setIsActive] = createSignal(false);
<div classList={{ active: isActive() }}>Toggle Me</div>;

Routing

Use solid-app-router for navigation in Solid.js. Configure routes using the <Routes> component.  

import { Routes, Route, Link } from "solid-app-router";
function App() {
  return (
    <>
      <nav>
        <Link href="/">Home</Link>
        <Link href="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </>
  );
}
Print Page
Previous
Next
Advertisements