preact

name	preact
description	> [!NOTE] > This is the branch for the upcoming release, for patches to v10 you need the [v10.x branch](https://github.com/preactjs/preact/tree/v10.x) WHEN: make http requests. Triggers: use preact, i

preact

[!NOTE] > This is the branch for the upcoming release, for patches to v10 you need the v10.x branch

When to Use

• Make HTTP requests

When NOT to Use

• Projects using Python or Rust (different ecosystem)

Quick Start

Install

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(
	<main>
		<h1>Hello</h1>
	</main>,
	document.body
);

// update the tree in-place:
render(
	<main>
		<h1>Hello World!</h1>
	</main>,
	document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onInput={e => setInput(e.target.value)} />
		</div>
	);
};

render(<App />, document.body);

Basic Usage

import { h, render } from 'preact';
// Tells babel to use h for JSX. It's better to configure this globally.
// See https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#usage
// In tsconfig you can specify this with the jsxFactory
/** @jsx h */

// create our tree and append it to document.body:
render(
	<main>
		<h1>Hello</h1>
	</main>,
	document.body
);

// update the tree in-place:
render(
	<main>
		<h1>Hello World!</h1>
	</main>,
	document.body
);
// ^ this second invocation of render(...) will use a single DOM call to update the text of the <h1>

import { render, h } from 'preact';
import { useState } from 'preact/hooks';

/** @jsx h */

const App = () => {
	const [input, setInput] = useState('');

	return (
		<div>
			<p>Do you agree to the statement: "Preact is awesome"?</p>
			<input value={input} onInput={e => setInput(e.target.value)} />
		</div>
	);
};

render(<App />, document.body);

Key API

• render
• hydrate
• createElement
• h
• Fragment
• createRef
• isValidElement
• Component
• cloneElement
• createContext

Project Info

• Language: JavaScript, TypeScript
• License: MIT
• Tests: Yes

File Structure

├── benchmarks/
├── compat/
│   ├── src/
│   ├── test/
│   ├── client.d.ts
│   ├── client.js
│   ├── client.mjs
│   ├── jsx-dev-runtime.js
│   ├── jsx-dev-runtime.mjs
│   ├── jsx-runtime.js
│   ├── jsx-runtime.mjs
│   ├── LICENSE
│   ├── mangle.json
│   ├── package.json
│   ├── scheduler.d.ts
│   ├── scheduler.js
│   ├── scheduler.mjs
│   ├── server.browser.js
│   ├── server.d.ts
│   ├── server.js

Generated by repo2skill