Skip to content
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
JavaScript TypeScript
Branch: master
Clone or download
JoviDeCroock bailout when hook throws an error (#2193)
* bailout when hook throws an error

* solve more scenario's

* solve issue with double commit

* clean solution for effect-error bailing

* better solution where everything is handled in options._commit

* add accidentely removed whitespace

* add ._render test
Latest commit 3d457f8 Jan 23, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Move Code of Conduct into .github dir Jul 10, 2019
compat Add tests highlighting issues of Suspense (#2229) Jan 5, 2020
config Apply prettier formatting to js files Oct 29, 2019
debug Remove old devtools tests Jan 23, 2020
demo bailout when hook throws an error (#2193) Jan 23, 2020
devtools Add mangle.json to preact/devtools Jan 23, 2020
hooks bailout when hook throws an error (#2193) Jan 23, 2020
src avoid removing existing dom nodes on subsequent replaceNode calls Jan 22, 2020
test-utils Rewrite teardown tests to not rely on internals Nov 15, 2019
test Remove FLAKEY flag Jan 23, 2020
.editorconfig Make all json files use 2-space Oct 31, 2019
.gitignore adding the package-lock.json Jan 16, 2020
.travis.yml add npm ci to speed up travis (#2255) Jan 16, 2020
CODE_OF_CONDUCT.md Add back CoC from Preact 8 branch (#1897) Aug 27, 2019
CONTRIBUTING.md Add info for first time contributors (#2265) Jan 21, 2020
LICENSE Update license year Jan 1, 2018
README.md More readme updates (#2235) Jan 7, 2020
babel.config.js Inline babel config to allow file based plugins Dec 13, 2019
jsconfig.json Add jsconfig.json to improve VSCode intellisense Nov 3, 2019
karma.conf.js Remove FLAKEY flag Jan 23, 2020
mangle.json Replace "__p" to "__" in mangle.json (#2044) Nov 2, 2019
package-lock.json Prevent postinstall from running on installation (#2271) Jan 22, 2020
package.json Prepare packaging of preact/devtools Jan 23, 2020
sizereport.config.js (chore) - Update links (#1649) May 23, 2019

README.md

Preact

Fast 3kB alternative to React with the same modern API.

All the power of Virtual DOM components, without the overhead:

  • Familiar React API & patterns: ES6 Class, hooks, and Functional Components
  • Extensive React compatibility via a simple preact/compat alias
  • Everything you need: JSX, VDOM, DevTools, HMR, SSR.
  • Highly optimized diff algorithm and seamless hydration from Server Side Rendering
  • Supports all modern browsers and IE11+
  • Transparent asynchronous rendering with a pluggable scheduler
  • Instant production-grade app setup with Preact CLI

💁 More information at the Preact Website ➞

npm Preact Slack Community OpenCollective Backers OpenCollective Sponsors

travis coveralls gzip size brotli size

You can find some awesome libraries in the awesome-preact list 😎


Getting Started

💁 Note: You don't need ES2015 to use Preact... but give it a try!

The easiest way to get started with Preact is to install Preact CLI. This simple command-line tool wraps up the best possible tooling for you, and even keeps things like Webpack and Babel up-to-date as they change. Best of all, it's easy to understand! Start a project or compile for production in a single command (preact build), with no configuration needed and best practices baked in! 🙌

Tutorial: Building UI with Preact

With Preact, you create user interfaces by assembling trees of components and elements. Components are functions or classes that return a description of what their tree should output. These descriptions are typically written in JSX (shown underneath), or HTM which leverages standard JavaScript Tagged Templates. Both syntaxes can express trees of elements with "props" (similar to HTML attributes) and children.

To get started using Preact, first look at the render() function. This function accepts a tree description and creates the structure described. Next, it appends this structure to a parent DOM element provided as the second argument. Future calls to render() will reuse the existing tree and update it in-place in the DOM. Internally, render() will calculate the difference from previous outputted structures in an attempt to perform as few DOM operations as possible.

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>

Hooray! render() has taken our structure and output a User Interface! This approach demonstrates a simple case, but would be difficult to use as an application grows in complexity. Each change would be forced to calculate the difference between the current and updated stucture for the entire application. Components can help here – by dividing the User Interface into nested Components each can calculate their difference from their mounted point. Here's an example:

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} onChange={e => setInput(e.target.value)} />
		</div>
	)
}

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

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]


License

MIT

Preact

You can’t perform that action at this time.